[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.css

packages/carousel/src/item.vue

@@ -29,7 +29,11 @@
     name: 'ElCarouselItem',
 
     props: {
-      name: String
+      name: String,
+      label: {
+        type: [String, Number],
+        default: ''
+      }
     },
 
     data() {

packages/carousel/src/main.vue

@@ -34,14 +34,14 @@
     <ul
       class="el-carousel__indicators"
       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
         v-for="(item, index) in items"
         class="el-carousel__indicator"
         :class="{ 'is-active': index === activeIndex }"
         @mouseenter="throttledIndicatorHover(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>
     </ul>
   </div>
@@ -95,6 +95,12 @@ export default {
     };
   },
 
+  computed: {
+    hasLabel() {
+      return this.items.some(item => item.label.toString().length > 0);
+    }
+  },
+
   watch: {
     items(val) {
       if (val.length > 0) this.setActiveItem(0);

packages/theme-default/src/carousel.css

@@ -70,6 +70,23 @@
           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 {
@@ -114,4 +131,4 @@
     transform: translateY(-50%) translateX(10px);
     opacity: 0;
   }
-}
+}