Foundation - Off-canvas Sass 参考
变量
您可以使用表格中列出的以下 SASS 变量更改组件的样式 −
| Sr.No. | 名称 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $offcanvas-size 指定画布外菜单的宽度。 |
数字 | 250px |
| 2 | $offcanvas-background 显示画布外菜单的背景颜色。 |
颜色 | $light-gray |
| 3 | $offcanvas-zindex 指定画布外菜单的 Z 索引。 |
数字 | -1 |
| 4 | $offcanvas-transition-length 显示画布外菜单动画的长度。 |
数字 | 0.5s |
| 5 | $offcanvas-transition-timing 指定画布外菜单的动画的定时函数。 |
关键字 | ease |
| 6 | $offcanvas-fixed-reveal 如果为 true，显示出来的画布外菜单可以通过将其设置为 true 来固定显示的位置。 |
true | |
| 7 | $offcanvas-exit-background 显示画布外菜单叠加层的背景颜色。 |
颜色 | rgba($white, 0.25) |
| 8 | $maincontent-class 它使用 CSS 类作为主要内容区域。 |
'off-canvas-content' | |
| 9 | $maincontent-shadow 它显示主要内容区域的框阴影。 |
Shadow | 0 0 10px rgba($black, 0.5) |
| 10 | $titlebar-background 显示标题栏的背景颜色。 |
颜色 | $black |
| 11 | $titlebar-color 定义标题栏内文本的颜色。 |
颜色 | $white |
| 12 | $titlebar-padding 定义标题栏内的填充。 |
长度 | 0.5rem |
| 13 | $titlebar-text-font-weight 指定文本的字体粗细。 |
粗细 | 粗体 |
| 14 | $titlebar-icon-color 定义菜单的标题栏图标颜色。 |
颜色 | $white |
| 15 | $titlebar-icon-color-hover 它定义菜单悬停时的标题栏图标颜色。 |
颜色 | $medium-gray |
| 16 | $titlebar-icon-spacing 它指定菜单图标和标题栏内文本之间的间距。 |
长度 | 0.25rem |
Mixins
您可以使用 mixins 为您的组件构建 CSS 类结构，如下所述。
off-canvas-basics
它为 off-canvas 添加样式，可以使用以下 mixin − 包含样式
@include off-canvas-basics;
off-canvas-base
它为 off-canvas 菜单指定基本样式，您可以使用以下 mixin − 包含样式
@include off-canvas-base;
off-canvas-reveal
指定显示画布外菜单的样式。
@include off-canvas-reveal($position);
可按照下表定义指定 −
| Sr.No. | 参数 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $position 设置画布外菜单的位置。 |
关键字 | left |
foundation_containers.html
