Badge 徽章
徽章可以疊在頭像、圖示或按鈕的右上角，沒有子元素時則是一顆行內狀態膠囊。
示範
類型
疊加時
default 是通知紅。primary 為品牌實心與 brand-on。warning 用 brand-on 文字，避免淺金底上看不清。 圓點、處理中、按鈕上
dot 是 8×8 圓點，會忽略 value。processing 以類型色做脈衝。只有圓點時請在宿主上給 aria-label。 上限與顯示 0
數字大於
max（預設 99）會顯示 99+。0 預設隱藏，設 show-zero 才顯示。字串不會被 max 截斷。右側 H 是隱藏示範。 獨立徽章
沒有子元素時是行內膠囊。獨立的
default 是淺灰；疊加的 default 仍是通知紅。 位移
用
--gk-badge-offset-x、--gk-badge-offset-y 從右上角微調，或傳 offset（"4, -2" 或 [4, -2]）。 API
Badge 屬性
| 屬性 | 型別 | 預設 |
|---|---|---|
value | number | string | — |
max | number | 99 |
dot | boolean | false |
type | 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'default' |
show-zero | boolean | false |
processing | boolean | false |
offset | [number, number] | — |
max 只在 value 為數字時生效。value="120" 這種屬性會當成數字。空值，或 0 且沒有 show-zero，不會渲染徽章。v1 沒有事件，點擊會落到子元素。
數字膠囊高 18px、最少寬 20px，水平內距 6px（超過一個字元時 7px），字元不會貼到膠囊邊緣或白環。
Badge 插槽
| 名稱 | 說明 |
|---|---|
| 預設 | 被疊加的子元素。省略則為獨立膠囊 |
CSS Parts
| Part | 說明 |
|---|---|
root | 行內外層 |
wrapper | 包住子元素的定位層 |
badge / sup | 膠囊或圓點 |
dot | dot 開啟時出現在同一個節點 |
value | 文字 |
CSS 變數
| 變數 | 預設 |
|---|---|
--gk-badge-offset-x | 0px |
--gk-badge-offset-y | 0px |
--gk-badge-z-index | 1 |
無障礙
- 數字徽章會帶「3 則未讀」這類名稱；宿主已有
aria-label時改由宿主命名。 - 只有圓點時請在宿主上提供
aria-label。未提供時元件退回「狀態」。 - 獨立文字徽章以可見文字為名稱。不會設定
role="status"。 - 純圖示按鈕的點擊區請保持至少 34px。