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

更新於 發佈於 閱讀時間約 5 分鐘
raw-image

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

什麼是開關元件(Toggle Switch)

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


如何做出來

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

raw-image

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

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

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

W3 SCHOOLS的教學

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

raw-image

解構程式碼

程式碼包括了兩大部分,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。


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

raw-image


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




留言
avatar-img
留言分享你的想法!
avatar-img
Shang的 前端開發筆記
3會員
13內容數
歡迎來到我的部落格!這裡是一個分享前端開發、貓咪寫真以及與菲律賓女友生活的文化衝擊與英文學習的個人空間。我熱愛前端技術,喜歡追求最新的網頁開發趨勢,並將這些知識分享給大家。
2024/03/21
CatHelper是我開發的前端 SideProject,是貓咪募資收養的一站式平台。 我用戶使用流程、資料庫、頁面來構思這個專案。
Thumbnail
2024/03/21
CatHelper是我開發的前端 SideProject,是貓咪募資收養的一站式平台。 我用戶使用流程、資料庫、頁面來構思這個專案。
Thumbnail
2024/03/14
不同的運算子一起出現時,會根據其優先性(Precedence)來決定誰先誰後。MDN也很貼心的整理成表格了。 雖然有表格可以供我們查找,但是總不可能每一次用到運算子的時候,我們都去查找吧?我們最好對這張表有直觀上的理解與記憶。 那麼就讓我來分享我如何理解與記憶這張表吧! 運算子在做甚麼
Thumbnail
2024/03/14
不同的運算子一起出現時,會根據其優先性(Precedence)來決定誰先誰後。MDN也很貼心的整理成表格了。 雖然有表格可以供我們查找,但是總不可能每一次用到運算子的時候,我們都去查找吧?我們最好對這張表有直觀上的理解與記憶。 那麼就讓我來分享我如何理解與記憶這張表吧! 運算子在做甚麼
Thumbnail
2024/02/08
當前大多數網站不再是靜態網站,需要向後端的 Server 請求資料。而且,這些資料的請求通常是非同步進行的。在React中,目前被視為最佳實踐的方式是使用 useEffect。
2024/02/08
當前大多數網站不再是靜態網站,需要向後端的 Server 請求資料。而且,這些資料的請求通常是非同步進行的。在React中,目前被視為最佳實踐的方式是使用 useEffect。
看更多
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
這篇內容,將會講解什麼是「switch」,以及與「switch」相關的知識。包括switch的簡介、switch、break。
Thumbnail
這篇內容,將會講解什麼是「switch」,以及與「switch」相關的知識。包括switch的簡介、switch、break。
Thumbnail
在設計表單的時候有幾種不同的元件,可以用來加快填寫表單的速度。而在這些元件中比較常見的 Checkbox 與 Toggle Switch 常常會讓我覺得有點像又有點不像,在製作表單的時候會有點不太確定在什麼情境下分別使用這兩種元件。在搜集資料後發現,真的有人將這兩個元件做了一些詳細的說明,所以決定整
Thumbnail
在設計表單的時候有幾種不同的元件,可以用來加快填寫表單的速度。而在這些元件中比較常見的 Checkbox 與 Toggle Switch 常常會讓我覺得有點像又有點不像,在製作表單的時候會有點不太確定在什麼情境下分別使用這兩種元件。在搜集資料後發現,真的有人將這兩個元件做了一些詳細的說明,所以決定整
Thumbnail
接著之前介紹過的篩選器和篩選器檢視畫面,我們要來完成最後一塊拼圖——「篩選器控制項(Slicer)」!
Thumbnail
接著之前介紹過的篩選器和篩選器檢視畫面,我們要來完成最後一塊拼圖——「篩選器控制項(Slicer)」!
Thumbnail
我相信大家應該都有在表單上看過開關元件,那麼我們會拿它來做甚麼?要怎麼把它做出來?
Thumbnail
我相信大家應該都有在表單上看過開關元件,那麼我們會拿它來做甚麼?要怎麼把它做出來?
Thumbnail
要改變表單元素的樣式其實相當麻煩,有些樣式還不能更改,這篇就來探討如何把它們改成喜歡的模樣吧。
Thumbnail
要改變表單元素的樣式其實相當麻煩,有些樣式還不能更改,這篇就來探討如何把它們改成喜歡的模樣吧。
Thumbnail
圖片按鈕是網頁中常見的互動元素之一,它可以讓用戶進行操作,同時也為網頁增添了視覺吸引力。在這個教學中,我們將會學習如何使用 HTML 與 jQuery 創建一個簡單的圖片按鈕,並添加點擊事件。
Thumbnail
圖片按鈕是網頁中常見的互動元素之一,它可以讓用戶進行操作,同時也為網頁增添了視覺吸引力。在這個教學中,我們將會學習如何使用 HTML 與 jQuery 創建一個簡單的圖片按鈕,並添加點擊事件。
Thumbnail
Input 輸入元件一直是各大網站必備的元素,這篇會分成文字輸入 Text、按鈕 Button、互動元件 Modal、下拉式選單 Dropdown List、滑桿 Slider、選擇器 Picker 這六種常見介面元件,來記錄我在平台工作時遇到的 UI 元件,作為未來產品開發的資料庫。
Thumbnail
Input 輸入元件一直是各大網站必備的元素,這篇會分成文字輸入 Text、按鈕 Button、互動元件 Modal、下拉式選單 Dropdown List、滑桿 Slider、選擇器 Picker 這六種常見介面元件,來記錄我在平台工作時遇到的 UI 元件,作為未來產品開發的資料庫。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News