# 018 Tag 标签

## 用途

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

## 最小示例

```go
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 {
			var v mujica.TagView
			ui.Box(c).Key(t).Children(func() {
				v = mujica.Tag(c, t, mujica.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 类组件。