Foundation - Menu SASS 参考
变量
您可以使用表中列出的以下 SASS 变量来更改组件的样式。
| Sr.No. | 名称 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 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);
| Sr.No. | 名称和说明 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$count 菜单内的项目数。 |
关键字或数字 | auto |
menu-direction
菜单方向已设置。
@include menu-direction($dir);
| 序号 | 姓名 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$dir 设置菜单方向为水平或垂直。 |
关键字 | 水平 |
menu-simple
创建简单菜单时没有填充或悬停状态。
@include menu-simple;
menu-nested
包含嵌套菜单的样式。将 margin-left 添加到菜单中。
@include menu-nested($padding);
| Sr.No. | 名称 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$padding 设置边距长度。 |
关键字或数字 | auto |
menu-icons
图标包含在菜单项中。
@include menu-icons($position, $base);
| 序号 | 姓名 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 |
$position 设置图标的位置。 |
关键字 | side |
| 2 |
$base 若要在同一元素上多次调用 mixin，请将其设置为 false。 |
boolean | true |
foundation_navigation.html
