网站导航

组件

坐标轴

在主体周围说明物理方向。

主轴与交叉轴

主轴
交叉轴
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>