網站導覽

文件

數值 Token 表

共用的數值 token 表與實用範例。

含間距示範的呈現

Numeric theme variables
Token值px呈現方式
--spacing-4xs.125rem2px
--spacing-3xs.25rem4px
--spacing-2xs.375rem6px
--spacing-xs.5rem8px
--spacing-sm.75rem12px
--spacing-md1rem16px
--spacing-lg1.5rem24px
--spacing-xl2rem32px
--spacing-2xl3rem48px
--spacing-3xl4rem64px
--spacing-4xl6rem96px
--spacing-5xl8rem128px

使用於 版面系統指南.

用法與介面

ThemeNumberVariableTable 從 preset 讀取數值 tokens 與單位。spacing 呈現方式透過斜線背景與浮起物件,顯示每個實際間距。表格具有穩定的 token 與數值欄、細緻的列分隔線,以及窄螢幕下可透過鍵盤聚焦的捲動區域。

<ThemeNumberVariableTable namespace="spacing" representation="spacing" />

representation prop 可省略。斷點與容器使用同一份資料驅動表格,附上說明但不顯示間距示範。請以文字保留原生 token 值與參考單位,並將這份清單放在測量用版面示範之外。數值表檢視頁呈現目前的共用表格。