布局
HeroUI 提供布局定制选项,用于间距、字体以及其他视觉属性。布局 token 有助于在不修改 Tailwind CSS 默认值的情况下保持组件的一致性。
布局选项适用于所有组件。
默认布局
布局 token 的默认值如下:
CSS 变量
HeroUI 为每个布局 token 使用格式 --prefix-prop-name-scale 创建 CSS 变量。默认前缀为 heroui,但你可以通过 prefix 选项进行更改。
然后,你可以在 CSS 文件中使用这些 CSS 变量。
API 参考
| Attribute | Type | Description |
|---|---|---|
| hoverOpacity | string, number | 一个 0 与 1 之间的数字,在组件悬停时以 opacity-[value] 应用。 |
| disabledOpacity | string, number | 一个 0 与 1 之间的数字,在组件禁用时以 opacity-[value] 应用。 |
| dividerWeight | string | 应用于分隔符组件的默认高度。建议使用 px 单位。 |
| fontSize | FontThemeUnit | 适用于所有组件的默认字体大小。 |
| lineHeight | FontThemeUnit | 适用于所有组件的默认行高。 |
| radius | BaseThemeUnit | 适用于所有组件的默认圆角半径。建议使用 rem 单位。 |
| borderWidth | BaseThemeUnit | 适用于所有组件的边框宽度。 |
| boxShadow | BaseThemeUnit | 适用于所有组件的阴影。 |

