间距
更新您的布局而无需创建新的类,间距辅助器对于修改元素的填充(padding)和边距(margin)都非常有用。
Playground
Use the playground to get a feel for what the different helper classes can do. For an explanation of how they work, see the How it works section below.
如何运行
将margin或者padding应用于一个元素,范围在 0到5 之间。每个尺寸增量都设计成与常用Material Design间距对齐。这些类可以使用{property}{direction}-{size}这个格式来应用。
.
占位符 property 用来设置间距的类型:
m
- 对应margin
p
- 对应padding
占位符 direction 指定属性所应用到的方向:
t
- 对应margin-top
或者padding-top
属性b
- 对应margin-bottom
orpadding-bottom
l
- 对应margin-left
orpadding-left
r
- 对应margin-right
orpadding-right
x
- 同时对应*-left
和*-right
属性y
- 同时对应*-top
和*-bottom
属性
占位符 size 控制属性的增量:
0
- 将margin
或者padding
设置为0,会使这些属性被删除1
- 将margin
或者padding
属性设置为$spacer * .25
2
- 将margin
或者padding
属性设置为$spacer * .5
3
- 将margin
或者padding
属性设置为$spacer
4
- 将margin
或者padding
属性设置为$spacer * 1.5
5
- 将margin
或者padding
属性设置为$spacer * 3