如何製作開關元件(Toggle Switch)

我相信大家應該都有在表單上看過開關元件，那麼我們會拿它來做甚麼?要怎麼把它做出來?

什麼是開關元件(Toggle Switch)

開關元件是在表單中切換兩個答案的選項，通常是yes 或no。在應用程式上，也常用來切換兩種模式，如一般模式與夜間模式。

如何做出來

剛剛有提到開關元件是表單中的選項，那麼我們就先來html的form的文件來看看。form的文件中，選項是input元素，它包含了以下幾種type:

看到這個不禁在心中罵了一下，怎麼沒有toggle這個type，HTML5也太不給立了。

在抱怨之後，我們還是要解決問題。既然沒有toggle，那我們必須要用原有的type去做出來。

回到上面提到的開關元件的定義，它是用來切換兩個答案的選項。這樣的屬性跟checkbox比較接近。

W3 SCHOOLS的教學

W3 shools 提供了開關元件(Toggle Switch)的教學，複製 參考它的程式碼之後就可以得到以下的結果。

解構程式碼

程式碼包括了兩大部分，html與css。

先來看html，它的結構很簡單，包括了

• switch label
• checkbox input
• slider的span

<!-- Rounded switch -->
<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

最單純的css基本架構

接者來看CSS如何把html加工成我們要的開關元件

1.最外層的switch:

在這裡用width與height來客製化你的開關元件要多大

.switch {
  position: relative;
  display: inline-block;
  /*----大小*/
  width: 60px;
  height: 34px;
}

2.隱藏原本的input的樣式

由於原本的input樣式不是我們要的，我們就用css隱藏它。用後面的slider span來呈現樣式，但是作用仍然是原本的checkbox。

/* Hide default HTML checkbox */
 .switch input {
  opacity: 0; 
  width: 0; 
  height: 0;
   }

3.silider

接著是我們要做的silder，silder是開關按鈕外面的滑道，這個部分我們會再用:before這個偽元素做出裡面的滑塊。

silider的top、left、right、bottom 都為0，完全服貼於switch

silider:before 則是設置width、height來決定滑塊大小，再用left、bottom來讓在滑道中。

兩者都設 transition，來設定後面滑動效果的速度。

 /* The slider */ 
 .slider {
  position: absolute;
  cursor: pointer; 
  top: 0;
  left: 0; 
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
   }
 .slider:before { 
 position: absolute; 
 content: "";
 height: 26px;
 width: 26px;
 left: 4px; 
 bottom: 4px; 
 background-color: white; 
 -webkit-transition: .4s; 
 transition: .4s; }

4.滑動的效果

針對input被checked後的滑塊，設定translateX，水平移動多少距離(這裡可以客製化)

 input:checked + .slider:before {
  -webkit-transform: translateX(26px);
   -ms-transform: translateX(26px);
    transform: translateX(26px);
     }

以上就是將checkbox做成toggle所需要的最基本的程式碼。教學上有對focus效果以及滑塊變成圓形下去做設定，這些看情況需要再加上即可。

應用開關元件

這樣做出來的開關元件，本質上跟checkbox是一樣的， input的都是boolean，預設為false。

如果要做成兩種模式切換的開關

要記得input的value仍然是boolean。要再寫額外的程式碼將其轉成對應的選項值(或是單純用boolean當兩種模式切換的邏輯也可)。