
<template>
  <div class="demo-bxs-tag">
    <div class="demo-title">
      默认风格、宽松型、边框类
    </div>
    <div class="bx-list">
      <div class="bx-list-item">
        <div class="bx-list-item-title">
          默认风格
        </div>
        <div class="bx-list-item-extra">
          <bxs-tag>默认标签</bxs-tag>
        </div>
      </div>
      <div class="bx-list-item">
        <div class="bx-list-item-title">
          宽松型
        </div>
        <div class="bx-list-item-extra">
          <bxs-tag loose>
            宽松型标签
          </bxs-tag>
        </div>
      </div>
      <div class="bx-list-item">
        <div class="bx-list-item-title">
          边框类
        </div>
        <div class="bx-list-item-extra">
          <bxs-tag plain>
            边框类标签
          </bxs-tag>
        </div>
      </div>
    </div>

    <div class="demo-title">
      type 类型列表
    </div>
    <div class="bx-list">
      <div class="bx-list-item">
        <div class="bx-list-item-title">
          default
        </div>
        <div class="bx-list-item-extra">
          <div>
            <bxs-tag>实底类标签</bxs-tag>
            <bxs-tag plain>
              边框类标签
            </bxs-tag>
          </div>
        </div>
      </div>

      <div class="bx-list-item">
        <div class="bx-list-item-title">
          primary
        </div>
        <div class="bx-list-item-extra">
          <div>
            <bxs-tag type="primary">
              实底类标签
            </bxs-tag>
            <bxs-tag
              plain
              type="primary"
              >
              边框类标签
            </bxs-tag>
          </div>
        </div>
      </div>

      <div class="bx-list-item">
        <div class="bx-list-item-title">
          success
        </div>
        <div class="bx-list-item-extra">
          <div>
            <bxs-tag type="success">
              实底类标签
            </bxs-tag>
            <bxs-tag
              plain
              type="success"
              >
              边框类标签
            </bxs-tag>
          </div>
        </div>
      </div>

      <div class="bx-list-item">
        <div class="bx-list-item-title">
          info
        </div>
        <div class="bx-list-item-extra">
          <div>
            <bxs-tag type="info">
              实底类标签
            </bxs-tag>
            <bxs-tag
              plain
              type="info"
              >
              边框类标签
            </bxs-tag>
          </div>
        </div>
      </div>

      <div class="bx-list-item">
        <div class="bx-list-item-title">
          warning
        </div>
        <div class="bx-list-item-extra">
          <div>
            <bxs-tag type="warning">
              实底类标签
            </bxs-tag>
            <bxs-tag
              plain
              type="warning"
              >
              边框类标签
            </bxs-tag>
          </div>
        </div>
      </div>

      <div class="bx-list-item">
        <div class="bx-list-item-title">
          danger
        </div>
        <div class="bx-list-item-extra">
          <div>
            <bxs-tag type="danger">
              实底类标签
            </bxs-tag>
            <bxs-tag
              plain
              type="danger"
              >
              边框类标签
            </bxs-tag>
          </div>
        </div>
      </div>

      <div class="bx-list-item">
        <div class="bx-list-item-title">
          caution
        </div>
        <div class="bx-list-item-extra">
          <div>
            <bxs-tag type="caution">
              实底类标签
            </bxs-tag>
            <bxs-tag
              plain
              type="caution"
              >
              边框类标签
            </bxs-tag>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
}
</script>
<style>
.demo-title {
  padding: 15px 15px;
  font-size: 16px;
  font-weight: bold;
}
.demo-bxs-tag .bx-list-item-extra {
  margin-right: 2px;
  height: 14px;
}
.bx-list-item .bx-tag + .bx-tag {
  margin-left: 6px;
}
</style>
