如何製作開關元件(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當兩種模式切換的邏輯也可)。
你可能也想看
