Badge Stack

Example

Normal

첫번째 두번째 세번째 네번째 다섯번째 여섯번째 일곱번째 여덟번째 아홉번째 열번째

IconSet left

첫번째 두번째 세번째 네번째 다섯번째 여섯번째 일곱번째 여덟번째 아홉번째 열번째

IconSet right

첫번째 두번째 세번째 네번째 다섯번째 여섯번째 일곱번째 여덟번째 아홉번째 열번째

clickable - 전체영역

Clicked:

첫번째 두번째 세번째 네번째 다섯번째 여섯번째 일곱번째 여덟번째 아홉번째 열번째

clickable - 아이콘영역

첫번째 두번째 세번째 네번째 다섯번째 여섯번째 일곱번째 여덟번째 아홉번째 열번째

single line

첫번째 두번째 세번째 네번째 다섯번째 여섯번째 일곱번째 여덟번째 아홉번째 열번째

첫번째 두번째 세번째 네번째 다섯번째 여섯번째 일곱번째 여덟번째 아홉번째 열번째

Source Code

<template>
  <div>
    <h3>Normal</h3>
    <c-badge-stack :list="list" badge-style="gray" size="medium" />

    <h3>IconSet left</h3>
    <c-badge-stack :list="list" badge-style="gray" size="medium" icon-left="hashtag" />

    <h3>IconSet right</h3>
    <c-badge-stack :list="list" badge-style="gray" size="medium" icon-right="hashtag" />

    <h3>clickable - 전체영역</h3>
    <i>Clicked: {{ clickedItem }}</i>
    <c-badge-stack :list="list" badge-style="gray" size="medium" icon-left="hashtag" clickable @click="handleClickBadegStack" />

    <h3>clickable - 아이콘영역</h3>
    <c-badge-stack :list="listForDelete" badge-style="gray" size="medium" icon-right="tagclose" clickable @click="handleClickCloseIcon" />

    <h3>single line</h3>
    <div>
      <div style="width: 200px; border: 1px solid orange;">
        <c-badge-stack :list="list" badge-style="orange" size="small" :multiline="false" />
      </div>
    </div>
    <div>
      <div style="width: 200px; border: 1px solid orange;">
        <c-badge-stack :list="list" badge-style="gray" size="medium" :multiline="false" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clickedItem: null,
      list: ['첫번째', '두번째', '세번째', '네번째', '다섯번째', '여섯번째', '일곱번째', '여덟번째', '아홉번째', '열번째'],
      listForDelete: ['첫번째', '두번째', '세번째', '네번째', '다섯번째', '여섯번째', '일곱번째', '여덟번째', '아홉번째', '열번째'],
    }
  },
  methods: {
    handleClickBadegStack(badge) {
      this.clickedItem = badge
    },
    handleClickCloseIcon(badge) {
      const deletedIndex = this.listForDelete.findIndex((item) => item === badge)
      this.listForDelete.splice(deletedIndex, 1)
    },
  },
}
</script>

slots

...

props

...