Foundation - Switch SASS 參考

描述

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

變數

下表列出了專案設定檔案中的 SASS 變數，這些變數使該元件的預設樣式可以自定義。

混合宏

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

switch-container

@include switch-container;

它新增開關容器的樣式。將其應用於容器類。

switch-input

@include switch-input;

它新增開關輸入樣式。在開關內，您必須將其應用於<input>。

switch-paddle

@include switch-paddle;

它新增開關的滑塊和背景的樣式。在開關內，您必須將其應用於<label>。

switch-text

@include switch-text;

在開關內，它新增活動或非活動文字的基本樣式。您必須將其應用於<label>內的文字元素。

switch-text-active

@include switch-text-active;

它新增開關活動狀態文字的樣式。

switch-text-inactive

@include switch-text-inactive;

它新增開關非活動狀態文字的樣式。

switch-size

@include switch-size($font-size, $width, $height, $paddle-width, $paddle-offset);

透過更改主體和滑塊的大小，switch-size 改變開關的大小。您必須將其應用於開關的容器。

下表列出了switch-size接受的引數。