间距
间距配置
为了方便实现风格一致的交互界面,ZUI 预置了间距设置。下面为默认的间距配置:
名称
实际值
预览
0
widthpx
width0.5
width1
width1.5
width2
width2.5
width3
width3.5
width4
width5
width6
width7
width8
width9
width10
width11
width12
width14
width16
width20
width24
width28
width32
width36
width40
width44
width48
width52
width56
width60
width64
width72
width80
width96
width4px
约定
通过上表可以看到,除了 0
和 px
比较特殊的设置,其他间距实际值都是 4px
的倍数,这是有意设计,无论是设计还是开发都应该将间距为 4px
的倍数作为约定,这样更有利于实现风格一致的交互界面。
当以上间距无法满足要求时,如果需要引入新的间距值也应当遵从 4px
约定。
间距会影响所有相关 CSS 属性配置,包括 padding
、margin
、width
、height
、maxHeight
、gap
、inset
等。
使用间距
在 ZUI 中提供了大量 CSS 工具类,可以非常方便的来应用间距配置,包括:
如需了解,请参考对应的文档。
自定义间距
可以通过定制主题来修改间距设置,具体参见 主题 文档。