Sass参考(Sass Reference)
变量 (Variables)
您可以使用表中列出的以下SASS变量来更改组件的样式 -
| Sr.No. | 名称和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $offcanvas-size 它指定画布外菜单宽度。 | Number | 250px |
| 2 | $offcanvas-background 它显示非画布菜单的背景颜色。 | Color | $light-gray |
| 3 | $offcanvas-zindex 它指定非画布菜单的Z-index。 | Number | -1 |
| 4 | $offcanvas-transition-length 它在非画布菜单上显示动画的长度。 | Number | 0.5s |
| 5 | $offcanvas-transition-timing 它指定了画布菜单的动画计时功能。 | Keyword | ease |
| 6 | $offcanvas-fixed-reveal 如果为true，则显示的非画布可以通过将其设置为true来固定显示的画布的位置。 | true | |
| 7 | $offcanvas-exit-background 它显示非画布菜单叠加层的背景颜色。 | Color | 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 它显示标题栏的背景颜色。 | Color | $black |
| 11 | $titlebar-color 它定义标题栏内文本的文本颜色。 | Color | $white |
| 12 | $titlebar-padding 它在标题栏中定义填充。 | Length | 0.5rem |
| 13 | $titlebar-text-font-weight 它指定文本的字体粗细。 | Weight | bold |
| 14 | $titlebar-icon-color 它定义菜单的标题栏图标颜色。 | Color | $white |
| 15 | $titlebar-icon-color-hover 它定义悬停时菜单的标题栏图标颜色。 | Color | $medium-gray |
| 16 | $titlebar-icon-spacing 它指定菜单图标与标题栏内文本之间的间距。 | Length | 0.25rem |
Mixins
您可以使用mixins为组件构建CSS类结构，如下所述。
off-canvas-basics
它为画布添加样式，并且可以使用以下mixin包含样式 -
@include off-canvas-basics;
off-canvas-base
它指定了非画布菜单的基本样式，您可以使用以下mixin包含样式 -
@include off-canvas-base;
off-canvas-reveal
它指定显示非画布菜单的样式。
@include off-canvas-reveal($position);
它可以按照下表中的定义指定 -
| Sr.No. | 参数和描述 | 类型 | 默认值 |
|---|---|---|---|
| 1 | $position 它设置了非画布菜单的位置。 | Keyword | left |
