图标
图标可以显示内置符号、表情字符,也可以通过占位符动态切换。
用法
在编辑器底部点加号,添加 图标,然后在「图标」字段填写名称或字符。
| 图标填写 | 显示 |
|---|---|
star | 星形符号 |
heart | 心形符号 |
🌞 | 表情字符 |
${icon} | JS 顶层变量,值可以是上面任一种 |
属性
| 字段 | 可填写 | 说明 |
|---|---|---|
| 图标 | star / heart / 🌞 / ${icon} | 符号名称、表情字符或占位符 |
| 字号 | 24 / 24vp / ${size} | 图标大小。填数字时按固定视觉尺寸显示,预览和桌面卡片更一致 |
| 字重 | normal / bold / medium | 按编辑器下拉选项填写 |
| 前景色 | #000000 / ${color} | 内置符号颜色;表情字符不受影响 |
| 宽 / 高 | auto / 48 / ${size} | 图标区域尺寸 |
| 水平偏移 / 垂直偏移 / Z 轴偏移 | 0 / 8 / ${x} | 只移动显示位置,不改变原本占位 |
| 内边距 / 外边距 | 8 / 8,8,8,8 | 四周留白 |
| 显示 | true / false / ${show} | 控制是否显示 |
| 背景色 | #FFFFFF / ${color} | 图标背景 |
| 圆角 | 0 / 8 / 50% | 背景圆角 |
| 旋转角度 | 0 / 15 / ${angle} | 顺时针旋转角度 |
| 不透明度 | 0 到 1 | 1 为完全不透明 |
例:按状态切换图标
const obj = await new Request("https://api.example.com/health").fetchJSON()
let icon = obj.ok ? "checkmark" : "exclamationmark"
let color = obj.ok ? "#34C759" : "#FF3B30"
| 字段 | 填写 |
|---|---|
| 图标 | ${icon} |
| 前景色 | ${color} |
注意事项
找不到符号名称怎么办
不在内置表里的名称会显示为空白。可以用表情字符兜底:
let icon = knownIcon(obj.kind) ? obj.kind : "?"
表情字符不响应前景色
表情字符的颜色由系统字体决定。只有内置符号能通过「前景色」换色。