布局

HeroUI 提供布局定制选项,用于间距、字体以及其他视觉属性。布局 token 有助于在不修改 Tailwind CSS 默认值的情况下保持组件的一致性。

布局选项适用于所有组件。

默认布局

布局 token 的默认值如下:

CSS 变量

HeroUI 为每个布局 token 使用格式 --prefix-prop-name-scale 创建 CSS 变量。默认前缀为 heroui,但你可以通过 prefix 选项进行更改。

然后,你可以在 CSS 文件中使用这些 CSS 变量。

API 参考

AttributeTypeDescription
hoverOpacitystring, number一个 0 与 1 之间的数字,在组件悬停时以 opacity-[value] 应用。
disabledOpacitystring, number一个 0 与 1 之间的数字,在组件禁用时以 opacity-[value] 应用。
dividerWeightstring应用于分隔符组件的默认高度。建议使用 px 单位。
fontSizeFontThemeUnit适用于所有组件的默认字体大小。
lineHeightFontThemeUnit适用于所有组件的默认行高。
radiusBaseThemeUnit适用于所有组件的默认圆角半径。建议使用 rem 单位。
borderWidthBaseThemeUnit适用于所有组件的边框宽度。
boxShadowBaseThemeUnit适用于所有组件的阴影。

BaseThemeUnit

FontThemeUnit