mirror of https://github.com/ElemeFE/element
[Carousel] Add an optional label to indicator buttons (#4317)
* Add optional label to indicator buttons * Add styling for indicator labels * Fix positioning of indicators * Update item.vue * Update main.vue * Update carousel.csspull/4551/head
parent
fcfda74543
commit
54e2047818
|
@ -29,7 +29,11 @@
|
||||||
name: 'ElCarouselItem',
|
name: 'ElCarouselItem',
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
name: String
|
name: String,
|
||||||
|
label: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
|
|
|
@ -34,14 +34,14 @@
|
||||||
<ul
|
<ul
|
||||||
class="el-carousel__indicators"
|
class="el-carousel__indicators"
|
||||||
v-if="indicatorPosition !== 'none'"
|
v-if="indicatorPosition !== 'none'"
|
||||||
:class="{ 'el-carousel__indicators--outside': indicatorPosition === 'outside' || type === 'card' }">
|
:class="{ 'el-carousel__indicators--labels': hasLabel, 'el-carousel__indicators--outside': indicatorPosition === 'outside' || type === 'card' }">
|
||||||
<li
|
<li
|
||||||
v-for="(item, index) in items"
|
v-for="(item, index) in items"
|
||||||
class="el-carousel__indicator"
|
class="el-carousel__indicator"
|
||||||
:class="{ 'is-active': index === activeIndex }"
|
:class="{ 'is-active': index === activeIndex }"
|
||||||
@mouseenter="throttledIndicatorHover(index)"
|
@mouseenter="throttledIndicatorHover(index)"
|
||||||
@click.stop="handleIndicatorClick(index)">
|
@click.stop="handleIndicatorClick(index)">
|
||||||
<button class="el-carousel__button"></button>
|
<button class="el-carousel__button"><span v-if="hasLabel">{{ item.label }}</span></button>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
@ -95,6 +95,12 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
hasLabel() {
|
||||||
|
return this.items.some(item => item.label.toString().length > 0);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
items(val) {
|
items(val) {
|
||||||
if (val.length > 0) this.setActiveItem(0);
|
if (val.length > 0) this.setActiveItem(0);
|
||||||
|
|
|
@ -70,6 +70,23 @@
|
||||||
opacity: 0.24;
|
opacity: 0.24;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@modifier labels {
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
transform: none;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.el-carousel__button {
|
||||||
|
size: auto auto;
|
||||||
|
padding: 2px 18px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-carousel__indicator {
|
||||||
|
padding: 6px 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@e indicator {
|
@e indicator {
|
||||||
|
@ -114,4 +131,4 @@
|
||||||
transform: translateY(-50%) translateX(10px);
|
transform: translateY(-50%) translateX(10px);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue