- 基礎 常規
- 基礎 - 全域性樣式
- 基礎 - Sass
- 基礎 - JavaScript
- 基礎 - JavaScript 實用工具
- 基礎 - 媒體查詢
- 基礎 - 網格系統
- 基礎 - Flex 網格
- 基礎 - 表單
- 基礎 - 可見性類
- 基礎 - 基本排版
- 基礎 - 排版輔助工具
- 基礎 - 基本控制元件
- 基礎 - 導航
- 基礎 - 容器
- 基礎 - 媒體
- 基礎 - 外掛
- 基礎 SASS
- 基礎 - Sass 函式
- 基礎 - Sass 混合宏
- 基礎 庫
- 基礎 - Motion UI
基礎 - Sass 參考
變數
您可以使用下表中列出的以下 SASS 變數來更改元件的樣式。
| 序號 | 名稱及描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 |
$accordion-background 定義手風琴組的預設背景顏色。 |
顏色 | $white |
| 2 |
$accordion-plusminus 透過將其設定為 true，可以在每個手風琴標題的旁邊新增加號和減號圖示。 |
布林值 | true |
| 3 | $accordion-item-color 顯示選單中專案的預設文字顏色。 |
顏色 | foreground($accordion-background, $primary-color) |
| 4 |
$accordion-item-background-hover 選單中專案懸停時的預設背景顏色。 |
顏色 | $light-gray |
| 5 |
$accordion-item-padding 手風琴專案的預設填充。 |
數字或列表 | 1.25rem 1rem |
| 6 |
$accordion-content-background 提供選項卡內容的背景顏色。 |
顏色 | $white |
| 7 |
$accordion-content-border 提供選項卡內容的邊框顏色。 |
顏色 | 1px solid $light-gray |
| 8 |
$accordion-content-color 指定選項卡內容的文字顏色。 |
顏色 | foreground($accordion-background, $primary-color) |
| 9 |
$accordion-content-padding 顯示選項卡內容的填充。 |
數字或列表 | 1rem |
混合宏
您可以使用混合宏構建元件的 CSS 類結構，如表中所列。
| 序號 | 名稱及描述 | 格式 |
|---|---|---|
| 1 |
accordion-container 它包含手風琴容器的樣式。 |
@include accordion-container |
| 2 |
accordion-title 它定義手風琴專案的標題。 |
@include accordion-title |
| 3 |
accordion-content 它提供手風琴內容的樣式。 |
@include accordion-content |
foundation_containers.htm
廣告