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




歡迎來到我的部落格!這裡是一個分享前端開發、貓咪寫真以及與菲律賓女友生活的文化衝擊與英文學習的個人空間。我熱愛前端技術,喜歡追求最新的網頁開發趨勢,並將這些知識分享給大家。
留言0
查看全部
發表第一個留言支持創作者!
Media query可以很複雜,但是這裡KP只談最簡單、最實用的基礎。
對於前端工程師而言,如何處理圖片是一個看是基本但是又重要的技能。就像是日本料理的師傅要懂得處理生魚片一樣。 因為flexbox的flex-item有自動伸縮的功能,所以要注意裡面的圖片如何被伸縮。
在上一篇文章-跟著KP用21天征服Responsive Layout-W2-Flexbox基礎-flex-item的伸縮 。我們提到了flex-item的width會由自身的內容長度決定。這其實是件很不可控的事情,所以我們在開發上會傾向於對flex-item設置width。 flex-item
在學習了flexbox的起手式之後,讓我們來檢視與優化html結構吧。 <section class="three-col"> <div class="container"> <!--用來設置layout--> <div class="row"> <!-
歡迎來到第二周,這一周我們就要進入Flexbox了。今天我們會先認識Flexbox的起手式與flex-item的伸縮規則。
這周KP分享的第三個概念是max-width,我們在甚麼狀況下會使用它。 情境:電腦版的文字太長,而缺乏可讀性。 在前面學到了對width設置百分比後,我們常會用以下的方式來設計個container,來達成內容置中,左右留白,內容佔螢幕85%(你想佔百分之幾都可以)的效果。 .contai
Media query可以很複雜,但是這裡KP只談最簡單、最實用的基礎。
對於前端工程師而言,如何處理圖片是一個看是基本但是又重要的技能。就像是日本料理的師傅要懂得處理生魚片一樣。 因為flexbox的flex-item有自動伸縮的功能,所以要注意裡面的圖片如何被伸縮。
在上一篇文章-跟著KP用21天征服Responsive Layout-W2-Flexbox基礎-flex-item的伸縮 。我們提到了flex-item的width會由自身的內容長度決定。這其實是件很不可控的事情,所以我們在開發上會傾向於對flex-item設置width。 flex-item
在學習了flexbox的起手式之後,讓我們來檢視與優化html結構吧。 <section class="three-col"> <div class="container"> <!--用來設置layout--> <div class="row"> <!-
歡迎來到第二周,這一周我們就要進入Flexbox了。今天我們會先認識Flexbox的起手式與flex-item的伸縮規則。
這周KP分享的第三個概念是max-width,我們在甚麼狀況下會使用它。 情境:電腦版的文字太長,而缺乏可讀性。 在前面學到了對width設置百分比後,我們常會用以下的方式來設計個container,來達成內容置中,左右留白,內容佔螢幕85%(你想佔百分之幾都可以)的效果。 .contai
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
畢業季求職新鮮人適用~履歷的相關須知,如何準備履歷內容,最後來點版面設計的建議,製作有水準的履歷。履歷並不是一昧地將自己塑造出很厲害的模樣,而是將重點放在「認識自我.行銷自己」進而讓對方認識自己,給出對方想知道的內容,創造面試的機會。
Thumbnail
根據調查,高達7成上班族都曾有簡報焦慮的困擾,這篇文章將教你如何製作吸睛的簡報。包括受眾分析、抓住注意力的方法以及使用數據和案例,並提供兩個免費的線上簡報製作工具。看完這篇文章,你將對簡報製作有更深入的瞭解。
Thumbnail
3D 模型是用來表示物體的多邊形,可以是現實世界的實體或虛構的東西。本文分享國外網站如何製作 3D 模型的多種方法,包括文字轉 3D 模型、圖像轉 3D 模型和掃描現實物體轉 3D 模型等。歡迎想要製作或使用 3D 模型的你參考!
Thumbnail
現在網路資訊發達,而我們又身處在快時尚的世界,衣服千千萬萬,太多選擇反而是件不好的事。越來越多人買了衣服回家後發現材質不好或是版型不對花了大價錢買了不開心,這讓我忽然萌生了想法,為什麼不自己做一件屬於自己獨一無二的衣服呢?
Thumbnail
我相信大家應該都有在表單上看過開關元件,那麼我們會拿它來做甚麼?要怎麼把它做出來?
課堂管理制度是以情緒控管差的自閉症者為主的訓練方式,而在愛培自閉症基金,因為有販售,怕沒有預算,那就乾脆自己做。 找大張的,用大字報尺寸的紙。在紙上的中間,寫上和準備相關的詞。 原則:越上面,表示表現越好,頂端才是終點。越往下,表示要付出代價。 五詞寫好,就可以美化大字報。並在美化後,找到夾子和名牌
Thumbnail
你有開課的夢想嗎?一直以來都很想錄製一套可以幫助知識工作做好知識理解的塗鴉筆記課程!我一直對這個主題有濃厚的興趣,希望也有更多夥伴能加入,體驗塗鴉筆記如何改變自己的生活與工作。本來開課的想法都只留在混亂的規劃文件中,但最近因為一些事件,覺得這套課程的產生將不再只是文件中的一些想像了!
Thumbnail
這篇文章要告訴你的是:我平日最常使用的兩個製作股價走勢比較圖的工具。
Thumbnail
以下有關如何製作(即mint)和銷售 NFT 的一些步驟。 1. 挑選要鑄造物品 您需要確定要將哪種獨特的數字資產轉變為NFT,可以是自定義繪畫、圖片、音樂、視頻遊戲收藏品、Meme、GIF,甚至是一條貼文。NFT是具有唯一所有者的獨特數字項目,這種稀有性給出了NFT價值。 3. 設置數字錢包
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
畢業季求職新鮮人適用~履歷的相關須知,如何準備履歷內容,最後來點版面設計的建議,製作有水準的履歷。履歷並不是一昧地將自己塑造出很厲害的模樣,而是將重點放在「認識自我.行銷自己」進而讓對方認識自己,給出對方想知道的內容,創造面試的機會。
Thumbnail
根據調查,高達7成上班族都曾有簡報焦慮的困擾,這篇文章將教你如何製作吸睛的簡報。包括受眾分析、抓住注意力的方法以及使用數據和案例,並提供兩個免費的線上簡報製作工具。看完這篇文章,你將對簡報製作有更深入的瞭解。
Thumbnail
3D 模型是用來表示物體的多邊形,可以是現實世界的實體或虛構的東西。本文分享國外網站如何製作 3D 模型的多種方法,包括文字轉 3D 模型、圖像轉 3D 模型和掃描現實物體轉 3D 模型等。歡迎想要製作或使用 3D 模型的你參考!
Thumbnail
現在網路資訊發達,而我們又身處在快時尚的世界,衣服千千萬萬,太多選擇反而是件不好的事。越來越多人買了衣服回家後發現材質不好或是版型不對花了大價錢買了不開心,這讓我忽然萌生了想法,為什麼不自己做一件屬於自己獨一無二的衣服呢?
Thumbnail
我相信大家應該都有在表單上看過開關元件,那麼我們會拿它來做甚麼?要怎麼把它做出來?
課堂管理制度是以情緒控管差的自閉症者為主的訓練方式,而在愛培自閉症基金,因為有販售,怕沒有預算,那就乾脆自己做。 找大張的,用大字報尺寸的紙。在紙上的中間,寫上和準備相關的詞。 原則:越上面,表示表現越好,頂端才是終點。越往下,表示要付出代價。 五詞寫好,就可以美化大字報。並在美化後,找到夾子和名牌
Thumbnail
你有開課的夢想嗎?一直以來都很想錄製一套可以幫助知識工作做好知識理解的塗鴉筆記課程!我一直對這個主題有濃厚的興趣,希望也有更多夥伴能加入,體驗塗鴉筆記如何改變自己的生活與工作。本來開課的想法都只留在混亂的規劃文件中,但最近因為一些事件,覺得這套課程的產生將不再只是文件中的一些想像了!
Thumbnail
這篇文章要告訴你的是:我平日最常使用的兩個製作股價走勢比較圖的工具。
Thumbnail
以下有關如何製作(即mint)和銷售 NFT 的一些步驟。 1. 挑選要鑄造物品 您需要確定要將哪種獨特的數字資產轉變為NFT,可以是自定義繪畫、圖片、音樂、視頻遊戲收藏品、Meme、GIF,甚至是一條貼文。NFT是具有唯一所有者的獨特數字項目,這種稀有性給出了NFT價值。 3. 設置數字錢包