Tag 标签

用于标记和分类的标签组件。

基础用法

<div class="sa-tag" data-tag data-text="标签"></div>

<script>
  SA.init('body');
</script>

加载 SanoUI 组件中...

不同类型

支持多种类型：success、warning、danger、info。

<div class="sa-tag" data-tag data-type="success" data-text="成功"></div>
<div class="sa-tag" data-tag data-type="warning" data-text="警告"></div>
<div class="sa-tag" data-tag data-type="danger" data-text="危险"></div>
<div class="sa-tag" data-tag data-type="info" data-text="信息"></div>

<script>
  SA.init('body');
</script>

加载 SanoUI 组件中...

可关闭

通过 data-closable="true" 启用关闭功能。

<div class="sa-tag" 
     data-tag 
     data-text="可关闭的标签" 
     data-closable="true">
</div>

<script>
  SA.init('body');
</script>

加载 SanoUI 组件中...

不同尺寸

通过 data-size 属性设置标签大小。

<div class="sa-tag" data-tag data-size="large" data-text="大标签"></div>
<div class="sa-tag" data-tag data-text="默认标签"></div>
<div class="sa-tag" data-tag data-size="small" data-text="小标签"></div>

<script>
  SA.init('body');
</script>

加载 SanoUI 组件中...

自定义颜色

<div class="sa-tag" 
     data-tag 
     data-text="自定义颜色"
     data-color="#ff6b6b">
</div>

<script>
  SA.init('body');
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaTagOptions	{}

配置选项

参数	说明	类型	可选值	默认值
text	标签文本	string	-	''
type	标签类型	string	success / warning / danger / info	-
color	自定义颜色	string	-	-
closable	是否可关闭	boolean	-	false
size	标签尺寸	string	large / default / small	default
onClose	关闭回调	function()	-	-

方法

方法名	说明	参数	返回值
close	关闭标签	-	void
destroy	销毁实例	-	void

自动初始化属性

属性	说明	类型	默认值
class="sa-tag"	启用自动初始化	-	-
data-tag	启用自动初始化标记	boolean	-
data-text	标签文本	string	''
data-type	标签类型	string	-
data-color	自定义颜色	string	-
data-closable	是否可关闭	boolean	false
data-size	标签尺寸	string	default

实际使用场景

场景 1：标签筛选

使用可关闭的标签实现筛选功能。

<div id="filter-tags" style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem;"></div>
<div id="filtered-content" style="padding: 1rem; border: 1px solid #ddd; border-radius: 4px;">
  全部内容
</div>

<script>
  SA.init('body');
  
  const tags = ['标签1', '标签2', '标签3'];
  const activeTags = new Set();
  
  tags.forEach((text, index) => {
    const container = document.createElement('div');
    document.getElementById('filter-tags').appendChild(container);
    
    const tag = new SaTag(container, {
      text: text,
      type: ['success', 'warning', 'info'][index],
      closable: true,
      onClose: () => {
        activeTags.delete(text);
        updateFilteredContent();
      }
    });
    
    activeTags.add(text);
  });
  
  function updateFilteredContent() {
    const content = document.getElementById('filtered-content');
    if (activeTags.size === 0) {
      content.textContent = '全部内容';
    } else {
      content.textContent = `已选择: ${Array.from(activeTags).join(', ')}`;
    }
  }
</script>

加载 SanoUI 组件中...