# Tag 标记

请扫码查看示例

# 介绍

用来主体内容的标签数据。

# 引入

通过以下方式来引入组件

使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
在要使用该组件的页面中使用element标签引入该组件。

# 代码演示

# 基本用法

<element name="m-tag" src="@/node_modules/mui-minix/src/tag/index"></element>
<m-tag text="标签"></m-tag>

1
2

# 样式风格

<element name="m-tag" src="@/node_modules/mui-minix/src/tag/index"></element>
<div>
  <m-tag class="m-r-10" text="空心" plain="{{true}}"></m-tag>
  <m-tag class="m-r-10" text="矩形" round="{{false}}"></m-tag>
  <m-tag text="标记" mark="{{true}}"></m-tag>
</div>

1
2
3
4
5
6

.m-r-10{
  margin-right:10px;
}

1
2
3

# 主题颜色

通过设置 theme 属性，可以改变标记的主题颜色, 支持 brand purple yellow blue cyan orange orange-red gray-offline。

<element name="m-tag" src="@/node_modules/mui-minix/src/tag/index"></element>
<div>
  <m-tag theme="brand" text="品牌色"></m-tag>
  <m-tag theme="purple" text="紫色按钮"></m-tag>
  <m-tag theme="yellow" text="黄色按钮"></m-tag>
</div>

1
2
3
4
5
6

# 自定义颜色

通过设置 textColor 属性，可以改变标记的文本颜色。默认为 #ffffff。

<element name="m-tag" src="@/node_modules/mui-minix/src/tag/index"></element>
<m-tag plain="{{true}}" background-color="#25cf42" text-color="#00cbb8" text="自定义颜色"></m-tag>

1
2

# Api

# Prop

字段	说明	类型	默认值	是否必须
`height`	高度	`number`	`0`	`否`
`padding-left`	左侧留白	`number`	`0`	`否`
`padding-right`	右侧留白	`number`	`0`	`否`
`border-width`	边框宽度	`number`	`1`	`否`
`text-size`	文本大小	`number`	`0`	`否`
`text-color`	文本颜色	`string`	`-`	`否`
`theme`	主题颜色。可选值与 `m-button` 相同	`string`	`brand`	`否`
`size`	大小	`string`	`middle`	`否`
`round`	是否圆形	`boolean`	`true`	`否`
`plain`	是否显示边框	`boolean`	`false`	`否`
`mark`	是否徽记样式, 当与 `round`同时设置时, `mark` 优先级高	`boolean`	`false`	`否`
`text`	文本	`string`	`-`	`是`