Lộ trình tác vụ / từ đầu vào đến kết quả
Cách thiết kế một công tắc CSS thuần
- 01
Định cỡ thanh trượt
Đặt Chiều rộng thanh trượt từ 44 đến 128 px và Chiều cao thanh trượt từ 24 đến 64 px. Chiều rộng phải lớn hơn chiều cao ít nhất 8 px để núm trượt có khoảng di chuyển. Mặc định 64 × 34 px phản ánh tỷ lệ của hầu hết công tắc trên di động. 18 Mẫu · Đã chọn · Màu
- 02
Khớp núm trượt
Chọn Kích thước núm trượt từ 16 đến 56 px. Nó phải nằm gọn trong thanh trượt — tối đa bằng chiều cao thanh trượt trừ 4 px — nếu không trạng thái sẽ chuyển thành KIỂM TRA GIÁ TRỊ kèm chính xác quy tắc bị vi phạm.
- 03
Tô màu cả hai trạng thái
Các hướng dẫn này áp dụng cho mẫu cơ bản; mẫu trong thư viện có hình dạng, màu, cấu trúc HTML và thời gian riêng: Chọn Thanh trượt tắt cho vị trí tắt và Thanh trượt bật cho vị trí bật. Bản thân núm trượt luôn màu trắng với một bóng đổ nhỏ mềm, nên cả hai màu thanh trượt chỉ cần tương phản với màu trắng.
- 04
Xem trước hiệu ứng chuyển
Các hướng dẫn này áp dụng cho mẫu cơ bản; mẫu trong thư viện có hình dạng, màu, cấu trúc HTML và thời gian riêng: Bật Hiển thị trạng thái bật để xem núm trượt trượt đi và thanh trượt đổi màu với nhịp ease 180 ms thật. Khoảng đệm quanh núm trượt được tính bằng một nửa chiều cao thanh trượt còn dư, nên độ khít luôn đều ở bất kỳ kích thước nào bạn chọn.
- 05
Sao chép hoặc tải xuống CSS
Nhấn Sao chép CSS hoặc Tải xuống .css để lưu toolars-switch.css. Núm trượt trắng trượt đúng quãng đường đã tính giữa hai trạng thái, và bản xuất có sẵn xử lý focus lẫn reduced-motion ngay từ đầu. Bảng đầu ra hiển thị số byte trực tiếp, để bạn thấy component gọn đến mức nào.
- 06
Lắp ráp markup
Đặt một input checkbox rồi đến một phần tử .switch-track bên trong một khối bao .switch, đúng thứ tự đó — bộ chọn anh em phụ thuộc vào nó. Input thu nhỏ thành một hộp vô hình 1 px nhưng vẫn focus được, và focus vẽ một đường viền 3 px theo màu Thanh trượt bật của bạn. HTML chứa CSS hiện tại và ví dụ hoạt động. Điều khiển gốc hỗ trợ bàn phím.