Foundation - 按鈕 SASS 參考

描述

您可以使用 SASS 參考來更改元件的樣式。

變數

下表列出了專案設定檔案中用於自定義此元件預設樣式的 SASS 變數。

序號	名稱及描述	型別	預設值
1	$button-padding 按鈕內填充。	列表	0.85em 1em
2	$button-margin 按鈕周圍的邊距。	列表	0 0 $global-margin 0
3	$button-fill 預設按鈕填充。可以是實心或空心。	關鍵字	solid
4	$button-background 按鈕的預設背景顏色。	顏色	$primary-color
5	$button-background-hover 滑鼠懸停時按鈕的背景顏色	顏色	scale-color($button-background, $lightness: -15%)
6	$button-color 按鈕的字型顏色。	列表	#fff
7	$button-color-alt 如果背景色較淺，則為按鈕的字型顏色。	列表	#000
8	$button-radius 表示按鈕的圓角半徑，預設為 $global-radius。	數字	$global-radius
9	$button-sizes 按鈕尺寸。	對映	tiny: 0.6rem small: 0.75rem default: 0.9rem large: 1.25rem
10	$button-opacity-disabled 被停用的按鈕的不透明度。	列表	0.25

混合宏

要構建此元件的最終 CSS 輸出，可以使用以下混合宏。要使用 Foundation 元件構建您自己的類結構，您可以自己使用這些混合宏。

button-expand

@include button-expand($expand);

用於將按鈕擴充套件到全寬。

序號	引數及描述	型別	預設值
1	$expand 設定為true以啟用擴充套件，否則設定為false。	布林值	true

序號

引數及描述

型別

預設值

$expand

設定為true以啟用擴充套件，否則設定為false。

布林值

true

button-style

@include button-style($background, $background-hover, $color);

它設定按鈕的視覺樣式。

序號	引數及描述	型別	預設值
1	$background 按鈕的背景顏色。	顏色	$button-background
2	$background-hover 滑鼠懸停時按鈕的背景顏色。設定為auto將自動生成懸停顏色。	顏色	$button-background-hover
3	$color 按鈕上的文字顏色。設定為auto將根據背景顏色自動生成顏色。	顏色	$button-color

序號

引數及描述

型別

預設值

$background

按鈕的背景顏色。

顏色

$button-background

$background-hover

滑鼠懸停時按鈕的背景顏色。設定為auto將自動生成懸停顏色。

顏色

$button-background-hover

$color

按鈕上的文字顏色。設定為auto將根據背景顏色自動生成顏色。

顏色

$button-color

button-hollow

@include button-hollow;

它移除滑鼠懸停時的背景填充和空心按鈕焦點。

button-disabled

@include button-disabled;

透過淡化元素、重置游標和停用指標事件，它向按鈕新增停用樣式。

button-dropdown

@include button-dropdown($size, $color, $offset);

它為按鈕新增一個下拉箭頭。

序號	引數及描述	型別	預設值
1	$size 它表示箭頭的尺寸。建議使用em值，以便在不同按鈕尺寸中使用時三角形可以縮放。	數字	0.4em
2	$color 箭頭的顏色。	顏色	white
3	$offset 表示按鈕文字和箭頭之間的距離。	數字	$button-padding

序號

引數及描述

型別

預設值

$size

它表示箭頭的尺寸。建議使用em值，以便在不同按鈕尺寸中使用時三角形可以縮放。

數字

0.4em

$color

箭頭的顏色。

顏色

white

$offset

表示按鈕文字和箭頭之間的距離。

數字

$button-padding

button

@include button($expand, $background, $background-hover, $color, $style);

它新增按鈕的每種樣式。

序號	引數及描述	型別	預設值
1	$expand 要使按鈕全寬，將其設定為true。	布林值	false
2	$background 按鈕的背景顏色。	顏色	$button-background
3	$background-hover 滑鼠懸停時，設定背景顏色。設定為auto以使混合宏自動生成懸停顏色。	顏色	$button-background-hover
4	$color 表示按鈕的文字顏色。設定為auto以根據背景顏色自動生成顏色。	顏色	$button-color
5	$style 要建立空心按鈕，將其設定為hollow。$background顏色用作按鈕主色。	關鍵字	solid

foundation_basic_controls.htm

列印頁面