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

列印頁面