FOUNDATIONS · LAYOUT & SIZING布局与尺寸 Layout & Sizing
控件高度、图标宽高、容器宽度三套尺寸阶梯。间距与内外边距统一使用 space Token,见「间距与边距」页面。
控件高度 size-control · 5
| Token 名称 | 高度 | 示例 |
|---|
| size-control-xs | 24px | 24px |
| size-control-sm | 28px | 28px |
| size-control-md | 32px | 32px |
| size-control-lg | 36px | 36px |
| size-control-xl | 40px | 40px |
图标尺寸 size-icon · 5
| Token 名称 | 宽 × 高(px) | 示例 |
|---|
| size-icon-xs | 12 × 12 px | |
| size-icon-sm | 14 × 14 px | |
| size-icon-md | 16 × 16 px | |
| size-icon-lg | 20 × 20 px | |
| size-icon-xl | 24 × 24 px | |
容器宽度 size-container · 19
| Token 名称 | 宽度 | 比例示例 |
|---|
| size-container-080 | 80px | |
| size-container-096 | 96px | |
| size-container-128 | 128px | |
| size-container-160 | 160px | |
| size-container-200 | 200px | |
| size-container-240 | 240px | |
| size-container-280 | 280px | |
| size-container-320 | 320px | |
| size-container-360 | 360px | |
| size-container-400 | 400px | |
| size-container-480 | 480px | |
| size-container-560 | 560px | |
| size-container-640 | 640px | |
| size-container-720 | 720px | |
| size-container-800 | 800px | |
| size-container-960 | 960px | |
| size-container-1280 | 1280px | |
| size-container-1440 | 1440px | |
| size-container-1600 | 1600px | |