Sizing and Spacing
间距和大小的标记用于在您的应用中提供一致的间距和大小。所有的大小和间距属性都以 rem
为单位定义。
REM 单位
rem
是一个相对长度单位。它相对于 根元素 的字体大小。
大小
使用这些属性来调整组件的大小(宽度、高度)。m
是几乎所有组件的标准大小。
选择大小
选择大小时,请始终确保它足够大,以便用于触控目标。
示例
.element {
width: var(--dwc-size-m);
height: var(--dwc-size-m);
}
变量
变量 | 默认值 | 示例 |
---|---|---|
--dwc-size-3xs | 1.125rem | |
--dwc-size-2xs | 1.375rem | |
--dwc-size-xs | 1.625rem | |
--dwc-size-s | 1.875rem | |
--dwc-size-m | 2.25rem | |
--dwc-size-l | 2.75rem | |
--dwc-size-xl | 3.5rem | |
--dwc-size-2xl | 4rem | |
--dwc-size-3xl | 4.25rem | |
--dwc-size | var(--dwc-size-m) |
间距
使用这些属性来调整组件之间的间距(边距、填充)。
示例
.element {
padding: var(--dwc-space-m);
}
变量
变量 | 默认值 | 示例 |
---|---|---|
--dwc-space-3xs | 0.075rem | |
--dwc-space-2xs | 0.15rem | |
--dwc-space-xs | 0.25rem | |
--dwc-space-s | 0.5rem | |
--dwc-space-m | 1rem | |
--dwc-space-l | 1.25rem | |
--dwc-space-xl | 1.5rem | |
--dwc-space-2xl | 1.75rem | |
--dwc-space-3xl | 2rem | |
--dwc-space | var(--dwc-space-s) |