切換

使用動畫轉場建立純 CSS3 開/關切換。現在您可以告訴使用者翻轉或關閉切換。

基礎

將 .switch 類別新增至元素以建立切換。在切換內部，新增一個具有 .switch-input 類別的 <input type="checkbox">。在旁邊，建立一個具有 .switch-paddle 類別的 <label>。

給予 <input> 一個唯一的 ID，並使用 for 屬性將 <label> 指向它。這使得切換可點選。

切換標籤內部是僅螢幕閱讀器文字，它使用 .show-for-sr 類別視覺遮罩文字。

檢查基礎輸入的值應透過評估該輸入的 checked 屬性來完成。

請確認開關的 HTML 以上述順序顯示：<input>，然後是 <label>

在影片中觀看此部分

<div class="switch">
  <input class="switch-input" id="exampleSwitch" type="checkbox" name="exampleSwitch">
  <label class="switch-paddle" for="exampleSwitch">
    <span class="show-for-sr">Download Kittens</span>
  </label>
</div>

已停用

有時您可能想要將開關固定在某個位置。這可透過在開關輸入上設定 disabled 選項來達成。

<div class="switch">
  <input class="switch-input" disabled checked="checked" id="exampleCheckedDisabledSwitch" type="checkbox" name="exampleCheckedDisabledSwitch">
  <label class="switch-paddle" for="exampleCheckedDisabledSwitch">
    <span class="show-for-sr">Can't Touch This Checked</span>
  </label>
</div>

<div class="switch">
  <input class="switch-input" disabled id="exampleUncheckedDisabledSwitch" type="checkbox" name="exampleUncheckedDisabledSwitch">
  <label class="switch-paddle" for="exampleUncheckedDisabledSwitch">
    <span class="show-for-sr">Can't Touch This Unchecked</span>
  </label>
</div>

無線電開關

您也可以使用 <input type="radio"> 取代 checkbox 來建立一系列選項。

在影片中觀看此部分

<div class="switch">
  <input class="switch-input" id="exampleRadioSwitch1" type="radio" checked name="testGroup">
  <label class="switch-paddle" for="exampleRadioSwitch1">
    <span class="show-for-sr">Bulbasaur</span>
  </label>
</div>

調整大小的類別

使用類別 .tiny、.small 或 .large 來變更開關大小。

在影片中觀看此部分

<div class="switch tiny">
  <input class="switch-input" id="tinySwitch" type="checkbox" name="exampleSwitch">
  <label class="switch-paddle" for="tinySwitch">
    <span class="show-for-sr">Tiny Sandwiches Enabled</span>
  </label>
</div>

<div class="switch small">
  <input class="switch-input" id="smallSwitch" type="checkbox" name="exampleSwitch">
  <label class="switch-paddle" for="smallSwitch">
    <span class="show-for-sr">Small Portions Only</span>
  </label>
</div>

<div class="switch large">
  <input class="switch-input" id="largeSwitch" type="checkbox" name="exampleSwitch">
  <label class="switch-paddle" for="largeSwitch">
    <span class="show-for-sr">Show Large Elephants</span>
  </label>
</div>

內部標籤

您可以在開關內放置啟用和停用文字。啟用文字 (.switch-active) 僅在開關開啟時顯示，而停用文字 (.switch-inactive) 僅在開關關閉時顯示。

啟用/停用文字會顯示在開關的 <label> 內。

根據您放置在開關內的字詞長度，您可能需要微調文字的 left 或 right CSS 屬性，才能將其正確定位。

在影片中觀看此部分

將 aria-hidden="true" 新增到這些標籤，以防止 AT 讀取它們。

<p>Do you like me?</p>
<div class="switch large">
  <input class="switch-input" id="yes-no" type="checkbox" name="exampleSwitch">
  <label class="switch-paddle" for="yes-no">
    <span class="show-for-sr">Do you like me?</span>
    <span class="switch-active" aria-hidden="true">Yes</span>
    <span class="switch-inactive" aria-hidden="true">No</span>
  </label>
</div>

您喜歡我嗎？

Sass 參考

變數

這個元件的預設樣式可以使用這些 Sass 變數在專案的設定檔中自訂。

名稱	類型	預設值	說明
`$switch-background`	顏色	`$medium-gray`	開關的背景顏色。
`$switch-background-active`	顏色	`$primary-color`	開關的背景啟用顏色。
`$switch-height`	數字	`2rem`	開關的高度，未套用任何類別。
`$switch-height-tiny`	數字	`1.5rem`	套用 .tiny 類別的開關高度。
`$switch-height-small`	數字	`1.75rem`	套用 .small 類別的開關高度。
`$switch-height-large`	數字	`2.5rem`	套用 .large 類別的開關高度。
`$switch-radius`	數字	`$global-radius`	開關的邊框半徑
`$switch-margin`	數字	`$global-margin`	模態框周圍的邊框。
`$switch-paddle-background`	顏色	`$white`	開關容器和滑塊的背景顏色。
`$switch-paddle-offset`	數字	`0.25rem`	開關滑塊與主體邊緣之間的間距。
`$switch-paddle-radius`	數字	`$global-radius`	開關滑塊的邊框半徑
`$switch-paddle-transition`	數字	`all 0.25s ease-out`	開關過場。
`$switch-opacity-disabled`	數字	`0.5`	已停用開關的不透明度。
`$switch-cursor-disabled`	游標	`not-allowed`	已停用開關的游標。

混合

我們使用這些混合來建構這個元件的最終 CSS 輸出。你可以自行使用混合，從我們的元件建構自己的類別結構。

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, $switch-height, $paddle-offset);

透過修改主體和撥桿的大小來變更開關的大小。將其套用至開關容器。

參數	類型	預設值	說明
`$font-size`	數字	`1rem`	開關中標籤文字的字型大小。
`$switch-height`	數字	`2rem`	開關主體的高度。
`$paddle-offset`	數字	`0.25rem`	開關撥桿與開關主體邊緣之間的間距。