- 基礎通用
- 基礎 - 全域性樣式
- 基礎 - Sass
- 基礎 - JavaScript
- 基礎 - JavaScript 工具函式
- 基礎 - 媒體查詢
- 基礎 - 網格系統
- 基礎 - Flex 網格
- 基礎 - 表單
- 基礎 - 可見性類
- 基礎 - 基本排版
- 基礎 - 排版輔助類
- 基礎 - 基本控制元件
- 基礎 - 導航
- 基礎 - 容器
- 基礎 - 媒體
- 基礎 - 外掛
- 基礎 SASS
- 基礎 - Sass 函式
- 基礎 - Sass 混合宏
- 基礎庫
- 基礎 - Motion UI
基礎 - 按鈕組 SASS 參考
描述
您可以使用 SASS 參考來更改元件的樣式。
變數
下表列出了專案設定檔案中的 SASS 變數，這些變數使元件的預設樣式可以進行自定義。
| 序號 | 名稱和描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 |
$buttongroup-margin 它表示按鈕組的邊距。 |
數字 | 1rem |
| 2 |
$buttongroup-spacing 它表示按鈕組中每個按鈕之間的邊距。 |
邊框 | 1px |
| 3 |
$buttongroup-child-selector 它表示按鈕組內按鈕的選擇器。 |
字串 | '.button' |
| 4 |
$buttongroup-expand-max 它表示按鈕組中可以具有等寬的按鈕的最大數量。 |
數字 | 6 |
混合宏
要構建此元件的最終 CSS 輸出，可以使用以下混合宏。要使用 Foundation 元件構建您自己的類結構，您可以自己使用這些混合宏。
button-group
@include button-group($child-selector);
它為按鈕組的容器新增樣式。下表列出了為此目的使用的引數。
| 序號 | 引數和描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 |
$child-selector 它表示按鈕組內按鈕的選擇器。 |
字串 | $buttongroup-child-selector |
button-group-expand
@include button-group-expand($count, $selector);
建立一個全寬按鈕組，使每個按鈕都具有相等的寬度。它使用引數，這些引數在下面的表格中列出。
| 序號 | 引數和描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 |
$count 表示按鈕組內的按鈕數量。將其設定為auto，將生成考慮多個按鈕的 CSS。 |
關鍵字或數字 | auto |
| 2 |
$selector 表示按鈕組內按鈕的選擇器。 |
字串 | $buttongroup-child-selector |
button-group-stack
@include button-group-stack($selector);
它將按鈕組中的按鈕堆疊起來。下表列出了為此目的使用的引數。
| 序號 | 引數和描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 |
$selector 表示按鈕組內按鈕的選擇器。 |
字串 | $buttongroup-child-selector |
button-group-unstack
@include button-group-unstack($selector);
它取消按鈕組中的按鈕堆疊。下表列出了為此目的使用的引數。
| 序號 | 引數和描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 |
$selector 表示按鈕組內按鈕的選擇器。 |
字串 | $buttongroup-child-selector |
foundation_basic_controls.htm
廣告