Toggle Switch là một button có thể chuyển đổi giá trị giống như một công tắc, Chúng ta có thể sử dụng Toggle Switch trong các form để đại diện cho một nội dung nào đó gồm hai giá trị yes và no. Các bạn hãy xem hình ảnh dưới đây:
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức.
Trong bài này mình sẽ hướng dẫn các bạn tạo các Toggle Switch, Cùng tiến hành nhé!
1. Xây dựng giao diện
Bước đầu tiên là xây dựng phần giao diện, các bạn tạo file index.html
và đặt đoạn mã HTML dưới đây vào trong thẻ body:
Freetuts.net hướng dẫn tạo Toggle Switch
OK giờ chúng ta sẽ chuyển đến bước tiếp theo.
2. Thêm CSS để định dạng các thành phần
Trong bước này chúng ta sử dụng CSS để định dạng cho các thành phần dễ nhìn hơn, các bạn thêm đoạn mã CSS dưới đây vào bên trong thẻ style nhé:
Bài viết này được đăng tại [free tuts .net]
.container { width: 500px; margin: auto; text-align: center; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; margin: 20px; } .switch input {display:none;} .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; } 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]; } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }
Thuật toán ở đây như sau:
- Đầu tiên các bạn tạo các thành phần
slider
đại diện cho phần nền công tắc và.container { width: 500px; margin: auto; text-align: center; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; margin: 20px; } .switch input {display:none;} .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; } 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]; } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }
0 đại diện cho phần nút gạt của công tắc. - Khi có một input được select, đổi màu nền của công tắc theo sau nó đồng thời chuyển vị trí nút gạt bằng đoạn mã:
Code
input:checked + .slider:before { -webkit-transform: translateX[26px]; -ms-transform: translateX[26px]; transform: translateX[26px]; }
Vậy là ta đã có một công tắc được bật. Giờ các bạn chạy thử file index.html
để xem thành quả nhé!
3. Lời kết
Qua bài viết này, mình đã hướng dẫn các bạn tạo một Toggle Switch, hi vọng nó sẽ giúp các bạn có thêm sự lựa chọn khi xây dựng website. Nếu có bất cứ thắc mắc gì các bạn hãy để lại ở phần bình luận, hẹn gặp lại trong các bài viết tiếp theo trên freetuts.net
Tham khảo: w3schools.com
Tổng kết: 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 button 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é! đượ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é! Toogle Button Toggle Button đượ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ử 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ẻ!
/* 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;
}.container {
width: 500px;
margin: auto;
text-align: center;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin: 20px;
}
.switch input {display:none;}
.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;
}
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];
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
2 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é:
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à
.container { width: 500px; margin: auto; text-align: center; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; margin: 20px; } .switch input {display:none;} .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; } 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]; } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }
3 và.container { width: 500px; margin: auto; text-align: center; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; margin: 20px; } .switch input {display:none;} .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; } 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]; } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }
4.
.container { width: 500px; margin: auto; text-align: center; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; margin: 20px; } .switch input {display:none;} .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; } 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]; } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }3: Dùng để thiết lập style khi input[ô] đang được focus.
.container {
width: 500px;
margin: auto;
text-align: center;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin: 20px;
}
.switch input {display:none;}
.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;
}
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];
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
4: 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é:
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%;
}
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é:
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 Button
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.