布局
窗口尺寸类别、间距阶梯，以及布局如何在各类别之间自适应。
Tanrei 用五个类别来描述可用宽度。它们指的是布局所在的窗口或容器，而不是某一类设备：分屏显示的平板属于 compact，展开后的折叠屏手机则不是。
| 类别 | 宽度 | 典型布局 |
|---|---|---|
| Compact | 小于 600 | 单栏。导航放在底部的导航栏里，或收在菜单之后。 |
| Medium | 600–839 | 边距更宽的单栏；内容允许时可以用双栏。可以使用收起的导航抽屉（一列图标）。 |
| Expanded | 840–1199 | 双窗格，例如列表加详情。导航常驻显示。 |
| Large | 1200–1599 | 两个或三个窗格。限制文本宽度的是行长，而不是窗口。 |
| Extra-large | 1600 及以上 | 与 Large 相同，边距更宽裕；不要把内容拉伸到填满。 |
宽度采用与像素密度无关的单位：Web 上是 CSS 像素，Apple 平台上是点（pt），Android 上是 dp，Flutter 中是逻辑像素。
当布局跨过某个边界时，用下面几种可预期的方式之一来改变它：
- 显现： 把原本要点一下才能看到的窗格直接显示出来，例如在列表旁边显示详情视图。
- 拆分： 把一栏分成两栏。
- 缩放： 按比例调整窗格和边距的大小。
- 移位： 移动某个元素的位置，例如把底部的导航栏移到侧边，变成收起的导航抽屉。
- 替换： 把组件换成适合更大屏幕的对应组件，例如底部面板变成侧边面板。
三种排布方式可以覆盖大多数屏幕：在响应式网格中排列卡片的信息流、列表–详情，以及带有辅助窗格的内容。
间距令牌是以 8 个单位为基准的倍数和分数。令牌名称中的数字是相对于这个基准的百分比，因此 space100 是 8，space50 是 4，space200 是 16。
| 令牌 | 值 | 预览 |
|---|---|---|
--tanrei-sys-space-space0 | 0px | |
--tanrei-sys-space-space25 | 2px | |
--tanrei-sys-space-space50 | 4px | |
--tanrei-sys-space-space75 | 6px | |
--tanrei-sys-space-space100 | 8px | |
--tanrei-sys-space-space125 | 10px | |
--tanrei-sys-space-space150 | 12px | |
--tanrei-sys-space-space175 | 14px | |
--tanrei-sys-space-space200 | 16px | |
--tanrei-sys-space-space250 | 20px | |
--tanrei-sys-space-space300 | 24px | |
--tanrei-sys-space-space400 | 32px | |
--tanrei-sys-space-space450 | 36px | |
--tanrei-sys-space-space500 | 40px | |
--tanrei-sys-space-space600 | 48px | |
--tanrei-sys-space-space700 | 56px | |
--tanrei-sys-space-space800 | 64px | |
--tanrei-sys-space-space900 | 72px |
生成自 design/tokens/tanrei.light.tokens.json, tokens/sys/space.tokens.json
较小的级别用在组件内部，中间的级别用在组件之间，较大的级别用在各个区块之间。触摸目标之间的间距绝不小于 space100。
连续文本每行大致保持在 45 到 80 个字符之间。在 Large 和 Extra-large 的窗口中，为文本栏设定宽度上限，多出来的空间交给边距或辅助窗格。