座標軸
在主體周圍說明實體方向。
主軸與交錯軸
主軸
交錯軸
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>