版面配置

NextUI 的外掛程式提供多種版面配置客製化選項。您可以調整間距單位、字體大小、行高、圓角半徑等,以個人化每個佈景主題,符合您的喜好。

使用版面配置權杖,您可以確保所有元件都具有一致的美感,而無需覆寫預設的 Tailwind CSS 設定。

版面配置選項會套用至所有元件。

預設版面配置

版面配置權杖的預設值為

CSS 變數

NextUI 使用 --prefix-prop-name-scale 的格式為每個版面配置權杖建立 CSS 變數。預設情況下,前綴為 nextui,但您可以使用 prefix 選項來變更它。

然後,您可以在 CSS 檔案中使用 CSS 變數。

API 參考

屬性類型描述
hoverOpacity字串、數字介於 0 和 1 之間的數字,當元件處於懸停狀態時,會套用為 opacity-[value]。
disabledOpacity字串、數字介於 0 和 1 之間的數字,當元件停用時,會套用為 opacity-[value]。
dividerWeight字串套用至分隔線元件的預設高度。我們建議使用 px 單位。
fontSizeFontThemeUnit套用至元件的預設字體大小。
lineHeightFontThemeUnit套用至元件的預設行高。
radiusBaseThemeUnit套用至元件的預設圓角半徑。我們建議使用 rem 單位。
borderWidthBaseThemeUnit套用至元件的邊框寬度。
boxShadowBaseThemeUnit套用至元件的陰影。

BaseThemeUnit

FontThemeUnit