- 基礎通用
- 基礎 - 全域性樣式
- 基礎 - Sass
- 基礎 - JavaScript
- 基礎 - JavaScript 工具
- 基礎 - 媒體查詢
- 基礎 - 網格
- 基礎 - Flex 網格
- 基礎 - 表單
- 基礎 - 可見性類
- 基礎 - 基本排版
- 基礎 - 排版輔助工具
- 基礎 - 基本控制元件
- 基礎 - 導航
- 基礎 - 容器
- 基礎 - 媒體
- 基礎 - 外掛
- 基礎 SASS
- 基礎 - Sass 函式
- 基礎 - Sass 混合宏
- 基礎庫
- 基礎 - Motion UI
基礎 - 選單 SASS 參考
變數
您可以使用下表中列出的以下 SASS 變數來更改元件的樣式。
| 序號 | 名稱和描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 |
$menu-margin 設定選單中的邊距。 |
數字 | 0 |
| 2 |
$menu-margin-nested 設定巢狀選單中左側的邊距。 |
數字 | 1rem |
| 3 |
$menu-item-padding 0.7rem 1rem |
數字 | 設定選單中的填充。 |
| 4 |
$menu-icon-spacing 設定選單項中文字和圖示之間的間距。 |
數字 | 0.25rem |
| 5 |
$menu-expand-max 在 CSS 中包含最大數量的 expand-n 類。 |
數字 | 6 |
混合宏
您可以使用混合宏來構建元件的 CSS 類結構，如表中所列。
menu-base
為選單建立基本樣式。
@include menu-base;
menu-expand
以相同寬度展開選單項。
@include menu-expand($count);
| 序號 | 名稱和描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 |
$count 選單內的專案數量。 |
關鍵字或數字 | auto |
menu-direction
設定菜單方向。
@include menu-direction($dir);
| 序號 | 名稱和描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 |
$dir 水平或垂直設定菜單方向。 |
關鍵字 | horizontal |
menu-simple
建立簡單的選單，不帶填充或懸停狀態。
@include menu-simple;
menu-nested
包含巢狀選單的樣式。在選單中包含margin-left。
@include menu-nested($padding);
| 序號 | 名稱和描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 |
$padding 設定邊距長度。 |
關鍵字或數字 | auto |
menu-icons
在選單項中包含圖示。
@include menu-icons($position, $base);
| 序號 | 名稱和描述 | 型別 | 預設值 |
|---|---|---|---|
| 1 |
$position 設定圖示的位置。 |
關鍵字 | side |
| 2 |
$base 如果要在同一元素上多次呼叫混合宏，則將其設定為 false。 |
布林值 | true |
foundation_navigation.htm
廣告