Tags标记(CSS)

2024-07-01 00:27:47首发，3周前更新

可以单独使用tag标签，也可以用tags标签包裹tag标签来统一设定标记外观颜色、尺寸和边框样式；tag和tags是Tags组件和模块的基础。

简单使用

Tags标签常用在兴趣、分类、条件等多选情况中。使用_tag表示内容标签，如果需要以容器形式放置标签，请使用_tags父层包裹。

输出
HTML

单个Tag标签
多个Tag标签以_tags包裹风格统一参数统一

试一试

<span class="_tag">单个Tag标签</span>
<ax-br></ax-br>
<div class="_tags">
    <span class="_tag">多个Tag标签</span>
    <span class="_tag">以_tags包裹</span>
    <span class="_tag">风格统一</span>
    <span class="_tag">参数统一</span>
</div>

主题

对单个tag可使用theme属性来定义标记的主题颜色，支持的值包括：prim、succ、error、warn、info、issue、text、brief和ignore。

输出
HTML

默认中国操作成功！很危险！提示注意！这是一个疑问！名词解释正文标签灰色标签浅灰色文字提示
试一试

<span class="_tag">默认</span>
<span class="_tag" theme="prim">中国</span>
<span class="_tag" theme="succ">操作成功！</span>
<span class="_tag" theme="error">很危险！</span>
<a href="###" class="_tag" theme="warn">提示注意！</a>
<a href="###" class="_tag" theme="issue">这是一个疑问！</a>
<a href="###" class="_tag" theme="info">名词解释</a>
<a href="###" class="_tag" theme="text">正文标签</a>
<a href="###" class="_tag" theme="brief">灰色标签</a>
<a href="###" class="_tag" theme="ignore">浅灰色文字提示</a>

如果使用_tags父标签包裹，那么可通过对_tags标签设定theme属性以统一设定子tag的风格。

输出
HTML

中国新加坡澳大利亚俄罗斯

试一试

<div class="_tags" theme="prim">
    <span class="_tag">中国</span>
    <span class="_tag">新加坡</span>
    <span class="_tag">澳大利亚</span>
    <span class="_tag">俄罗斯</span>
</div>

Attrs属性

对于单个tag和tags组，可使用相同的attrs属性。

属性名	可选值	默认值	说明
theme	'prim'/'succ'/'error'/'warn'/'info'/'issue'/ 'text'/'brief'/'ignore'	''	颜色主题
size	'sm'/'md'/'lg'	'md'	尺寸
borderless	''/undefined	undefined	是否取消边框，使用则取消边框
shape	'round'/'radius'/'square'	'radius'	边框外型
compact	''/undefined	undefined	是否紧凑，使用则表示紧凑
type	'plain'/''	undefined	标签类型