MujicaUI/docs/components/018-tag.md

018 Tag 标签

用途

短标签，可带图标。可以点击，也可以关闭，点击标签和关闭标签是两个独立的操作，各有自己的焦点停靠点。

最小示例

tags := []string{"Baroque", "Gothic"}
view := func(c *ui.Context) {
	mujica.Use(c, mujica.Settings{})
	ui.Row(c).Gap(8).Children(func() {
		for i, t := range tags {
			v := mujica.Tag(c, t, mujica.TagOptions{Icon: "star", Clickable: true, Closable: true})
			v.Element.Key(t)
			if v.Closed {
				tags = append(tags[:i:i], tags[i+1:]...)
			}
		}
	})
}

参数

func Tag(c *ui.Context, label string, opts TagOptions) TagView

label 必填，空字符串 panic。

字段	类型	默认值	含义
Icon	string	""	图标名称，见 Icon 组件。
Clickable	bool	false	标签文字部分作为按钮，可以聚焦和点击。
Closable	bool	false	显示 28×28 DIP 的关闭按钮。
Disabled	bool	false	禁用点击和关闭，并移出 Tab 顺序。

返回值 TagView：Element；Clicked 表示标签被激活；Closed 表示请求关闭。

状态

• 默认：Surface 底色、细边框、2 DIP 圆角。
• 悬停 / 按下：可点击部分和关闭按钮分别变为 SurfaceHover / Selection。
• 聚焦：对应部分显示 2 DIP 焦点环。
• 禁用：由 MyGo 统一调暗，不响应输入。

事件

• TagView.Clicked：点击标签文字，或在聚焦时按 Enter/Space。点击关闭按钮不会触发它。
• TagView.Closed：点击关闭按钮，或在关闭按钮上按 Enter/Space，或在聚焦的可点击标签上按 Delete/Backspace。组件不会自行移除标签，由调用方删除数据。

键盘操作

按键	作用
Tab	先聚焦标签文字（仅 Clickable），再聚焦关闭按钮
Enter / Space	激活当前聚焦的部分
Delete / Backspace	在可点击标签上请求关闭（仅 Closable）

限制

• 不可点击的标签不获取焦点，只能通过关闭按钮操作。
• 标签不提供“选中”状态；需要可选标签时请使用 Toggle 类组件。