blackteay/vue-element-admin
1
0
Fork 0
mirror of https://github.com/PanJiaChen/vue-element-admin.git synced 2025-08-10 12:01:57 +08:00
Code Issues Releases Wiki Activity

Add Carousel Component (#956)

Browse Source 
Co-authored-by: elsiosanchez <elsiossanches@gmail.com>
This commit is contained in:
Elsio Sanchez 2021-06-30 18:58:57 -04:00 committed by GitHub
parent 90a4846b29
commit 59905a895e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 68 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/ADempiere/Carousel/index.vue Normal file
View File

@ -0,0 +1,68 @@
<!--
ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
Contributor(s): Elsio Sanchez elsiosanches@gmail.com www.erpya.com
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <https:www.gnu.org/licenses/>.
-->
<template>
<el-carousel :ref="stepReference" arrow="never" :autoplay="false" :initial-index="indicator" style="height: 100%;">
<el-carousel-item v-for="(item, key) in steps" :key="key">
<el-card class="box-card" style="height: 100%;">
<div slot="header" class="clearfix">
<p style="margin: 0px;text-align: center;">
<b>
{{ item.name }}
</b>
</p>
<p style="margin: 0px;text-align: center;">
{{ item.description }}
</p>
</div>
<div class="text item" style="height: 95%;">
<slot />
</div>
</el-card>
</el-carousel-item>
</el-carousel>
</template>
<script>
export default {
name: 'Carousel',
props: {
stepReference: {
type: String,
default: 'carousel'
},
steps: {
type: Array,
default: () => []
},
indicator: {
type: Number,
default: 0
}
},
watch: {
indicator(value) {
this.$refs[this.stepReference].activeIndex = value
}
}
}
</script>
<style>
.el-carousel__container {
position: relative;
height: 100%;
}
</style>