Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Nút Toggle Switch Cho Trang Web (2020)

Cách Tạo Nút Toggle Switch Cho Trang Web (2020)


Ngày 21 Tháng 7 Năm 2020

Cách Tạo Nút Toggle Switch Cho Trang Web (2020)

Bài viết hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo một nút toggle switch cơ bản cũng như sử dụng các thư viện để tạo những nút này trong đẹp mắt hơn cho trang web của bạn. Và để hiểu rõ hơn, chúng ta hãy cùng nhau đi vào tìm hiểu nhé!

Toogle Switch Là Gì?

Toggle Switch được xem như là một công tắc giúp bạn có thể chuyển đổi trạng thái của một đối tượng trong trang web. Trong bài này chúng ta sẽ đi vào tìm hiểu vấn đề chính là cách thiết kế nút toggle switch để thu hút sự chú ý của người dùng cũng như mang lại cảm giác hiện đại cho trang web nhé!

Đầu tiên chúng ta sẽ đi vào tạo cấu trúc HTML cho nút Toogle Switch (Thông thường nút này sẽ được tạo bởi phần tử checkbox trong HTML nhé)

 

  
  



  
  

Tiếp theo chúng ta sẽ đi vào thiết lập các thuộc tính CSS cho các đối tượng HTML ở phía trên nhé:

/* thiết lập CSS cho switch */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
/* Ẩn ô checkbox  */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
/* Thiết lập CSS cho 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;
}

Và kết quả bạn xem dưới đây nhé:

See the Pen thiet lap html css cho check box by haycuoilennao19 (@haycuoilennao19) on CodePen.

Trước khi thêm chức năng để nó có thể hoạt động thì mình sẽ giải thích thêm về hai thuộc tính quan trọng được sử dụng để tạo nút toggle switch là input:focusinput:checked.

  • input:focus: Dùng để thiết lập style khi input(ô) đang được focus.
  • input:checked: Dùng để thiết lập style khi input(ô) ở trạng thái được chọn.

Và để dễ hình dùng hơn hai cách sử dụng này thì bạn hãy xem ví dụ dưới đây nhé:

See the Pen ô input voi thuoc tinh focus va checked by haycuoilennao19 (@haycuoilennao19) on CodePen.

Sau khi bạn đã hiểu hai thuộc tính này thì chúng ta sẽ đi vào thiết kế để nó có thể chuyển đổi qua lại như một công tắc thông qua đoạn code dưới đây nhé:

 input:checked + .slider {
  background-color: #2196F3;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}

Và kết quả cuối cùng bạn xem ở dưới đây nhé:

See the Pen nút hoàn chỉnh toggle switch by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn W3School

Sử Dụng Thư Viện MoreToggles.css Để Tạo Nút Toggle Switch

Việc chúng ta sử dụng thư viện để tạo nút toggle switch sẽ giúp bạn có thể giảm thời gian công sức cho việc viết mã cũng như mang lại tính thẩm cao, sự lựa chọn đa dạng cho trang web của bạn.

Đầu tiên chúng ta sẽ lấy đường dẫn CDN của thư viện để có thể sử dụng trực tiếp trong trang web thông qua đoạn mã sau nhé:

Bạn nhớ đặt đoạn mã trên ở trong thẻ head nha. Việc tiếp theo bạn chỉ cần gọi các class mà thư viện cung cấp là có thể tạo ra được nút toggle như ý muốn của mình rồi. Để hiểu rõ hơn chúng ta sẽ đi vào ví dụ nhé:


   
 

  
   
     


Với class mt-ios là một style được thiết kế sẵn cho nút toggle switch do thư viện cung cấp. Và bây giờ chúng ta hảy cùng nhau xem kết quả nhé:

See the Pen sử dụng moretoggles csss by haycuoilennao19 (@haycuoilennao19) on CodePen.

Và dưới đây là một số ví khác về nút này khi sử dụng thư viện MoreToggles.css nhé:

See the Pen Ví dụ khác về MoreToggles CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Một lưu ý nhỏ là khi bạn tạo từ 2 nút toggle switch trở lên thì ta phải thiết lập thuộc tính idfor của mỗi nút bắt buộc phải khác nhau. Và nếu bạn muốn tìm hiểu thêm thư viện này thi có thể xem ở đây nhé.

Những Ví Dụ Về Toggle Switch

Tiếp theo đây chúng ta sẽ đi vào những ví dụ khác về skillbar do các bạn lập trình viên trên Codepen thiết kế và phát triển nhé!
Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.

Pure Css "day and night" toggle:

See the Pen Pure Css "day and night" toggle by Benjamin Réthoré (@bnthor) on CodePen.

A Confusing Toggle Button:

See the Pen A Confusing Toggle Button by Himalaya Singh (@himalayasingh) on CodePen.

Simple CSS Switch / Toggle:

See the Pen Simple CSS Switch / Toggle by Aaron Iker (@aaroniker) on CodePen.

Simple CSS Switch / Toggle:

See the Pen Simple CSS Switch / Toggle by Aaron Iker (@aaroniker) on CodePen.

Springy Switchbox:

See the Pen ✅ Springy Switchbox | Checkbox toggle animation | @keyframers 2.0.0 by @keyframers (@keyframers) on CodePen.

Pure CSS Toggle Buttons:

See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by Himalaya Singh (@himalayasingh) on CodePen.

Checkboxes and Visual Affordance Indicators:

See the Pen Checkboxes and Visual Affordance Indicators by Adam Clark (@adamstuartclark) on CodePen.

I/O Codepen:

See the Pen I/O Codepen by Paraskevas Dinakis (@perry_nt) on CodePen.

Pure CSS Minimal Toggle:

See the Pen Pure CSS Minimal Toggle by Rau (@raubaca) on CodePen.

On/off toggle switch:

See the Pen On/off toggle switch by Anastasia Goodwin (@agoodwin) on CodePen.

Checky:

See the Pen Checky by Ekrem Büyükkaya (@ekrembk) on CodePen.

Custom Toggle Switch Inspiration (Pure CSS):

See the Pen Custom Toggle Switch Inspiration (Pure CSS) by Aditya Bhandari (@takeradi) on CodePen.

switch:

See the Pen switch by Stef Geraets (@stefgeraets) on CodePen.

Day to Night Toggle Switch:

See the Pen Day to Night Toggle Switch by Aybüke Ceylan (@aybukeceylan) on CodePen.

CSS Switch:

See the Pen CSS Switch by Randy Lebeau (@cl0udc0ntr0l) on CodePen.

Custom Checkbox / Toggle Switch:

See the Pen Custom Checkbox / Toggle Switch by thelaazyguy (@thelaazyguy) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn kiến thức về toggle switch hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!