版面配置
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 單位。 |
fontSize | FontThemeUnit | 套用至元件的預設字體大小。 |
lineHeight | FontThemeUnit | 套用至元件的預設行高。 |
radius | BaseThemeUnit | 套用至元件的預設圓角半徑。我們建議使用 rem 單位。 |
borderWidth | BaseThemeUnit | 套用至元件的邊框寬度。 |
boxShadow | BaseThemeUnit | 套用至元件的陰影。 |