軸
対象の周囲で物理方向を説明します。
主軸と交差軸
主軸
交差軸
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>