间距

间距比例和缩放选项概述。

间距比例

间距值来源于 9 步比例，这些比例用于 margin 和 padding 等属性。这些属性接受从 "1" 到 "9" 的数字字符串，分别对应下面的比例步骤。

Step	Base value
1	`4px`
2	`8px`
3	`12px`
4	`16px`
5	`24px`
6	`32px`
7	`40px`
8	`48px`
9	`64px`

间距比例标记

间距比例标记也可以通过 CSS 变量访问。您可以使用这些标记来样式化您的自定义组件，确保它们与您主题的其他部分一致。

/* 间距比例 */
var(--space-1);
var(--space-2);
var(--space-3);
var(--space-4);
var(--space-5);
var(--space-6);
var(--space-7);
var(--space-8);
var(--space-9);

缩放

影响布局的值（间距、字体大小、行高度）相对依据在您的主题中定义的 scaling 值进行缩放。此设置允许您在整个应用程序中均匀缩放 UI 密度。

<Theme scaling="100%">
	<Card variant="surface">
		<Flex gap="3" align="center">
			<Avatar size="3" src={person.image} fallback={person.name} />
			<Box>
				<Text as="div" size="2" weight="bold">
					{person.name}
				</Text>
				<Text as="div" size="2" color="gray">
					已批准发票 <Link>#3461</Link>
				</Text>
			</Box>
		</Flex>
	</Card>
</Theme>

90%

95%

100%

105%

110%

缩放因子

缩放因子标记可以通过 --scaling CSS 变量访问。如果您在应用中需要使用不同的缩放因子，可以在自定义样式中使用此标记，确保它们与您主题的其他部分一致。

.MyCustomComponent {
	width: calc(200px * var(--scaling));
}

上一篇排版 Typography

下一篇断点 Breakpoints

在 GitHub 上编辑此页面

概览 Overview

主题 Theme

布局 Layout

排版

组件

通用工具 Utilities

间距

间距比例

间距比例标记

缩放

缩放因子