坐标轴
在主体周围说明物理方向。
主轴与交叉轴
主轴
交叉轴
01
02
03
搭配测量与图例
Anatomy of a layout
主轴
交叉轴
容器
01
02
03
- Subject
- Comparison
- Context
使用于 布局系统指南.
用法与接口
DemoAxes 会渲染 div.ui-axes:顶部沿 ui-axes-inline 显示箭头,起始边缘沿 ui-axes-block 显示向下箭头,主体放在 ui-axes-content 中。inline 和 block 可替换默认的“Main axis”和“Cross axis”名称。
<DemoAxes inline="Inline axis" block="Block axis"> <DemoSurface className="flex gap-sm p-md">…</DemoSurface></DemoAxes><div class="ui-axes"> <div class="ui-axes-inline"><span>Main axis</span><span class="ui-axes-rule"></span></div> <div class="ui-axes-block"><span>Cross axis</span><span class="ui-axes-rule"></span></div> <div class="ui-axes-content">…</div></div>