Bài viết này sẽ giải thích cách sử dụng phân số đường chéo trong Tailwind.
Làm cách nào để sử dụng phân số đường chéo trong CSS Tailwind?
Lớp phân số đường chéo trong Tailwind là một biến thể phông chữ số được xác định trước giúp làm cho tử số và mẫu số nhỏ hơn và phân tách chúng bằng dấu gạch chéo. Điều này làm cho số phân số có vẻ khác biệt so với phần còn lại của văn bản.
Cú pháp
Cú pháp sử dụng “ phân số chéo ” lớp học như sau:
< div lớp học = 'phân số đường chéo' >
< div / >
Như bạn có thể thấy từ cú pháp trên, nhà phát triển phải cung cấp “ phân số chéo ' bên trong ' lớp học ” thuộc tính của phần tử.
Hãy sử dụng lớp “phân số đường chéo” làm ví dụ thực tế. Trong phần minh họa bên dưới, người dùng có thể thấy sự khác biệt giữa phân số bình thường và phân số đường chéo:
< div lớp học = 'bg-slate-200 văn bản trung tâm văn bản-lg' >< P > Phân số bình thường: 3 / 5 6 / 3 6 / 5 < / P >
< P lớp học = 'phân số đường chéo' > Phân số chéo: 3 / 5 6 / 3 6 / 5 < / P >
< / div >
Giải thích đoạn code trên như sau:
- Các ' div Phần tử ” được tạo và cung cấp làm màu nền bằng cách sử dụng thuộc tính “ bg-{color}-{number} ' lớp học.
- Sau đó, văn bản được cung cấp cỡ chữ lớn và được căn chỉnh vào giữa phần tử bằng cách sử dụng “ văn bản-lg ' Và ' trung tâm văn bản ” các lớp tương ứng.
- Tiếp theo, hai “ ” phần tử được tạo, trong đó phần tử thứ hai được cung cấp “ phân số chéo ' lớp học.
Đầu ra:
Có thể thấy rõ sự khác biệt giữa phân số đường chéo và phân số chuẩn ở kết quả trên.
Sử dụng lớp phân số đường chéo có điểm dừng
Điểm ngắt được dùng làm truy vấn phương tiện trong Tailwind. Có năm điểm dừng mặc định với độ rộng tối thiểu được chỉ định. Bạn có thể sử dụng các điểm dừng này với bất kỳ lớp nào trong Tailwind để tạo bố cục thiết kế linh hoạt và linh hoạt.
Để sử dụng “ phân số chéo ” có điểm dừng trong Tailwind, cú pháp sau được sử dụng:
{ tiền tố điểm dừng } : phân số chéoBảng bên dưới cung cấp chiều rộng tối thiểu cho các điểm dừng khác nhau trong Tailwind:
| Tiền tố điểm dừng | Chiều rộng tối thiểu |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
Hãy sử dụng các điểm dừng với “ phân số chéo ” để hiểu thực tế công dụng của chúng:
< div lớp học = 'bg-slate-200 văn bản trung tâm văn bản-lg md: phân số đường chéo' >3/4, 7/8, 5/4, 6/5
< / div >
Trong đoạn mã được cung cấp ở trên, phần tử div được cung cấp trong phần “ md:phân số đường chéo ” lớp sẽ thay đổi phông chữ của các phân số khi “ md ” đã đạt đến điểm dừng.
đầu ra
Như bạn có thể thấy ở kết quả đầu ra, các số phân số được cung cấp phông chữ phân số chéo khi “ md ” đã đạt đến điểm dừng:
Sử dụng lớp phân số đường chéo với các trạng thái gió giật
Tailwind cung cấp mặc định “ Những trạng thái ” để cung cấp các thuộc tính thiết kế cho một phần tử khi trạng thái cụ thể đó được kích hoạt. Điều này làm cho bố cục thiết kế hấp dẫn và năng động hơn. Để sử dụng lớp “phân số đường chéo” có trạng thái trong Tailwind, cú pháp sau được sử dụng:
{ tình trạng } : phân số chéoTrạng thái mặc định do Tailwind cung cấp như sau:
- Bay lượn: Khi người dùng di con trỏ qua phần tử.
- Tập trung: Khi người dùng tập trung vào một phần tử bằng cách điều hướng đến phần tử đó.
- Tích cực: Khi người dùng kích hoạt một phần tử bằng cách nhấp vào nó.
- Vô hiệu hóa: Khi người dùng không được phép kích hoạt một phần tử.
Phần trình diễn dưới đây cung cấp một ví dụ thực tế về việc sử dụng “ phân số chéo ” lớp với “ bay lượn ” trạng thái trong Tailwind:
< div lớp học = 'bg-slate-200 văn bản ở giữa văn bản-lg di chuột: phân số đường chéo' >3/4, 7/8, 5/4, 6/5
< / div >
Các ' div Phần tử ” trong đoạn mã trên được cung cấp bởi một “ di chuột: phân số đường chéo ” lớp sẽ thay đổi phông chữ thông thường của các số phân số thành phông chữ phân số đường chéo.
đầu ra
Như bạn có thể thấy ở kết quả đầu ra, phông chữ số của số phân số thay đổi khi người dùng di con trỏ chuột qua nó:
Đó là tất cả về việc sử dụng lớp phân số đường chéo trong CSS Tailwind.
Phần kết luận
Để sử dụng các phân số đường chéo trong CSS Tailwind, hãy sử dụng “ phân số chéo ' lớp học. Lớp này sẽ phân tách tử số và mẫu số bằng dấu gạch chéo và làm cho chúng nhỏ lại. Người dùng cũng có thể sử dụng lớp “phân số đường chéo” với các điểm dừng và trạng thái mặc định trong Tailwind để giúp thiết kế trở nên năng động hơn. Bài viết này đã cung cấp quy trình sử dụng phân số đường chéo trong Tailwind.