Foundation - 侧边栏 Sass 参考

变量

您可以使用以下 SASS 变量更改组件的样式，如表中所列：-

序号	名称和描述	类型	默认值
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
7	$offcanvas-exit-background 显示侧边栏菜单覆盖层的背景颜色。	颜色	rgba($white, 0.25)
8	$maincontent-class 对主要内容区域使用 CSS 类。	'off-canvas-content'
9	$maincontent-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 指定文本的字体粗细。	粗细	bold
14	$titlebar-icon-color 定义菜单的标题栏图标颜色。	颜色	$white
15	$titlebar-icon-color-hover 定义菜单悬停时的标题栏图标颜色。	颜色	$medium-gray
16	$titlebar-icon-spacing 指定菜单图标和标题栏内文本之间的间距。	长度	0.25rem

您可以使用混合宏构建组件的 CSS 类结构，如下所述。

添加侧边栏的样式，并且可以使用以下混合宏包含样式：-

@include off-canvas-basics;

指定侧边栏菜单的基本样式，您可以使用以下混合宏包含样式：-

@include off-canvas-base;

指定显示侧边栏菜单的样式。

@include off-canvas-reveal($position);

它可以按以下表格中定义的方式指定：-

序号	参数和描述	类型	默认值
1	$position 设置侧边栏菜单的位置。	关键词	left

序号

参数和描述

类型

默认值

$position

设置侧边栏菜单的位置。

关键词

left

foundation_containers.htm

打印页面