018 Tag 标签

用途

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

最小示例

tags := []string{"Baroque", "Gothic"}
view := func(c *ui.Context) {
	core.Use(c, core.Settings{})
	ui.Row(c).Gap(8).Children(func() {
		for i, t := range tags {
			var v display.TagView
			ui.Box(c).Key(t).Children(func() {
				v = display.Tag(c, t, display.TagOptions{Icon: "star", Clickable: true, Closable: true})
			})
			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 统一调暗，不响应输入；祖先元素禁用时同样不响应，包括 Delete/Backspace。
文字随系统文本缩放放大。

事件

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

键盘操作

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

限制

在循环中渲染多个标签时，把稳定的 Key 放在包住 Tag 的外层容器上（见示例）。Tag 在创建时就处理输入，事后再设置 Key 无法保持身份。
不可点击的标签不获取焦点，只能通过关闭按钮操作。
标签不提供“选中”状态；需要可选标签时请使用 Toggle 类组件。