Badge

Example

Style & Size

뱃지 뱃지

뱃지 뱃지

뱃지 뱃지

width Icon

뱃지 뱃지 뱃지 뱃지

뱃지 뱃지 뱃지 뱃지

Clickable

Clicked:

Only텍스트

아이콘+텍스트

텍스트+아이콘

Source Code

<template>
  <div>
    <h3>Style & Size</h3>
    <div>
      <c-badge size="medium">뱃지</c-badge>
      <c-badge size="small">뱃지</c-badge>
    </div>
    <div>
      <c-badge c-badgeStyle="gray" size="medium">뱃지</c-badge>
      <c-badge c-badgeStyle="gray" size="small">뱃지</c-badge>
    </div>
    <div>
      <c-badge c-badgeStyle="yellow" size="medium">뱃지</c-badge>
      <c-badge c-badgeStyle="yellow" size="small">뱃지</c-badge>
    </div>

    <h3>width Icon</h3>
    <div>
      <div>
        <c-badge c-badgeStyle="gray" size="medium" iconLeft="hashtag">뱃지</c-badge>
        <c-badge c-badgeStyle="gray" size="medium" iconLeft="action-topbar-back-black">뱃지</c-badge>
        <c-badge c-badgeStyle="gray" size="medium" iconLeft="action-input-like">뱃지</c-badge>
        <c-badge c-badgeStyle="gray" size="medium" iconLeft="action-exit-gray">뱃지</c-badge>
      </div>
      <div>
        <c-badge c-badgeStyle="gray" size="medium" iconRight="hashtag">뱃지</c-badge>
        <c-badge c-badgeStyle="gray" size="medium" iconRight="action-topbar-back-black">뱃지</c-badge>
        <c-badge c-badgeStyle="gray" size="medium" iconRight="action-input-like">뱃지</c-badge>
        <c-badge c-badgeStyle="gray" size="medium" iconRight="action-exit-gray">뱃지</c-badge>
      </div>
    </div>

    <h3>Clickable</h3>
    <div>
      Clicked: {{ msg }}
    </div>
    <div>
      <div><c-badge c-badgeStyle="gray" size="medium" clickable @click="handleClickBadge('전체')">Only텍스트</c-badge></div>
      <div><c-badge c-badgeStyle="gray" size="medium" iconLeft="hashtag" clickable @click="handleClickBadge('전체')">아이콘+텍스트</c-badge></div>
      <div><c-badge c-badgeStyle="gray" size="medium" iconRight="tagclose" clickable @click="handleClickBadge('아이콘만')">텍스트+아이콘</c-badge></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: null,
    }
  },
  methods: {
    handleClickBadge(msg) {
      this.msg = msg
    },
  },
}
</script>

slots

...

props

...