Skip to content

尺寸系统

ThemePro提供了统一的尺寸系统,用于控制组件大小、间距和其他尺寸相关的样式属性。

尺寸选项

ThemePro 支持以下尺寸选项:

尺寸名称
x-small 特小
small
medium 中等(默认)
large
x-large 特大

设置全局尺寸

你可以通过 themePro.size 属性设置全局组件尺寸:

js
// 设置为大尺寸
themePro.size = 'large';

// 设置为小尺寸
themePro.size = 'small';

设置全局尺寸后,所有支持尺寸系统的组件都会自动调整大小。

尺寸实现原理

ThemePro通过在根元素上设置 data-size 属性来控制尺寸:

js
// 在 JavaScript 中设置
document.documentElement.dataset.size = 'large';

// 等同于在 HTML 中设置
// <html data-size="large">

然后,在开发时使用以--auto-开发的CSS变量,就可以实现在切换尺寸动态调整组件尺寸。

loading

提示

更多的受data-size影响的以--auto-开头的CSS变量参见自动变量