축
대상 주위의 물리적 방향을 설명합니다.
주축과 교차축
주축
교차축
01
02
03
측정과 범례 함께 사용
Anatomy of a layout
주축
교차축
컨테이너
01
02
03
- Subject
- Comparison
- Context
사용 위치: 레이아웃 시스템 가이드.
사용법과 인터페이스
DemoAxes는 위쪽의 ui-axes-inline 화살표, 시작 가장자리에서 아래로 향하는 ui-axes-block 화살표, ui-axes-content 안의 대상으로 이루어진 div.ui-axes를 렌더링합니다. 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>