Tag 标签

用于表示区域的状态的标签

引入

import { Tag } from 'mand-mobile'
Vue.component(Tag.name, Tag)

代码演示

半圆

<template>
  <div class="md-example-child md-example-child-tag md-example-child-tag-0">
    <tag size="tiny" shape="circle" type="fill" fill-color="#FC7353" font-color="#000"></tag>
    <tag size="small" shape="circle" type="fill" fill-color="#FC7353" font-color="#fff">特惠</tag>
    <tag size="large" shape="circle" type="fill" fill-color="#FC7353" font-color="#fff">返5000</tag>
    <tag size="small" shape="circle" type="ghost" font-color="#FC7353">特惠</tag>
  </div>
</template>
<script>
import {Tag} from 'mand-mobile'
export default {
  name: 'tag-demo',
  components: {
    Tag,
  },
}
</script>
                

线框

<template>
  <div class="md-example-child md-example-child-tag md-example-child-tag-2">
    <tag size="large" shape="square" font-color="#3CA0E6" type="ghost">运营车</tag>
    <tag size="small" shape="square" font-color="#3CA0E6" type="ghost">运营车</tag>
  </div>
</template>
<script>
import {Tag} from 'mand-mobile'
export default {
  name: 'tag-demo',
  components: {
    Tag,
  },
}
</script>
                

圆角

<template>
  <div class="md-example-child md-example-child-tag md-example-child-tag-1">
    <tag size="large" shape="fillet" type="fill" fill-color="#FC9153" font-weight="normal" font-color="#fff">字</tag>
    <tag size="large" shape="fillet" type="fill" fill-color="#50A050" font-weight="bold" font-color="#fff">字</tag>
    <tag size="large" shape="fillet" type="fill" fill-color="#91C6EF" font-weight="bolder" font-color="#fff">字</tag>
  </div>
</template>
<script>
import {Tag} from 'mand-mobile'
export default {
  name: 'tag-demo',
  components: {
    Tag,
  },
}
</script>
                

阳文

<template>
  <div class="md-example-child md-example-child-tag md-example-child-tag-3">
    <tag size="large" shape="square" fill-color="rgba(0,0,0,0)" type="fill" font-weight="bolder" font-color="#333">￥3600</tag>
    <tag size="small" shape="square" fill-color="rgba(0,0,0,0)" type="fill" font-weight="bolder" font-color="#333">￥300</tag>
  </div>
</template>
<script>
import {Tag} from 'mand-mobile'
export default {
  name: 'tag-demo',
  components: {
    Tag,
  },
}
</script>
 
                

API

Tag Props