布局
NextUI 的插件提供了多种布局自定义选项。更改间距单位、字体大小、行高、圆角等,以个性化每个主题。
使用布局令牌,您可以确保所有组件的整体美观一致,而无需覆盖默认的 Tailwind CSS 配置。
布局选项应用于所有组件。
默认布局
布局令牌的默认值是
CSS 变量
NextUI 使用 --prefix-prop-name-scale
格式为每个布局令牌创建 CSS 变量。默认情况下,前缀为 nextui
,但您可以使用 prefix
选项更改它。
然后您可以在 CSS 文件中使用 CSS 变量。
API 参考
属性 | 类型 | 描述 |
---|---|---|
hoverOpacity | 字符串,数字 | 当组件被悬停时,作为 opacity-[value] 应用的 0 到 1 之间的数字。 |
disabledOpacity | 字符串,数字 | 当组件被禁用时,作为 opacity-[value] 应用的 0 到 1 之间的数字。 |
dividerWeight | 字符串 | 应用于分隔符组件的默认高度。我们建议使用 px 单位。 |
fontSize | FontThemeUnit | 应用于组件的默认字体大小。 |
lineHeight | FontThemeUnit | 应用于组件的默认行高。 |
radius | BaseThemeUnit | 应用于组件的默认圆角。我们建议使用 rem 单位。 |
borderWidth | BaseThemeUnit | 应用于组件的边框宽度。 |
boxShadow | BaseThemeUnit | 应用于组件的阴影。 |