Giả sử người dùng phải tạo danh sách các mục cho trang web của họ. Để giúp quá trình thiết kế trở nên dễ dàng hơn, Tailwind cung cấp nhiều lớp kiểu danh sách khác nhau có thể dùng để thay đổi loại, vị trí và căn chỉnh các thành phần trong danh sách.
Bài viết này sẽ cung cấp quy trình thiết lập kiểu danh sách trong Tailwind.
Làm cách nào để đặt kiểu kiểu danh sách trong Tailwind?
Tailwind cung cấp ba loại kiểu danh sách mặc định. Chúng được sử dụng để cung cấp “ đánh dấu ” kiểu cho các mục trong danh sách. Ba lớp kiểu kiểu danh sách mặc định được mô tả như sau:
- danh sách đĩa: Lớp này sẽ cung cấp các dấu đầu dòng làm điểm đánh dấu danh sách.
- danh sách thập phân: Lớp này sẽ cung cấp các số thập phân làm điểm đánh dấu danh sách.
- danh sách không: Lớp này sẽ xóa mọi điểm đánh dấu danh sách khỏi các mục.
Cú pháp sử dụng các kiểu kiểu danh sách như sau:
< ul lớp học = 'danh sách-{style}' > < / ul >
Để hiểu rõ hơn, phần minh họa được cung cấp bên dưới sẽ sử dụng cú pháp được xác định ở trên để cung cấp các kiểu đánh dấu khác nhau cho các mục liệt kê. Trong ví dụ này, ba thành phần danh sách sẽ được tạo và cung cấp các kiểu điểm đánh dấu khác nhau bằng cách sử dụng các lớp kiểu danh sách mặc định trong Tailwind:
< P lớp học = 'văn bản trung tâm văn bản-xl phông chữ đậm' >Danh sách khác mặc định Phong cách Các loại trong Tailwind< / P >
< anh >
< div lớp học = 'flex biện minh-không gian trung tâm-x-20 bg-slate-100 làm tròn-lg mx-4 p-2' >
< ul lớp học = 'danh sách đĩa' >
DANH SÁCH # 1
< cái đó >Đây là mục đầu tiên< / cái đó >
< cái đó >Đây là mục thứ hai< / cái đó >
< cái đó >Đây là mục thứ ba< / cái đó >
< / ul >
< ul lớp học = 'danh sách thập phân' >
DANH SÁCH # 2
< cái đó >Đây là mục đầu tiên< / cái đó >
< cái đó >Đây là mục thứ hai< / cái đó >
< cái đó >Đây là mục thứ ba< / cái đó >
< / ul >
< ul lớp học = 'không có danh sách' >
DANH SÁCH # 3
< cái đó >Đây là mục đầu tiên< / cái đó >
< cái đó >Đây là mục thứ hai< / cái đó >
< cái đó >Đây là mục thứ ba< / cái đó >
< / ul >
< / div >
Giải thích đoạn code trên như sau:
- MỘT ' Phần tử ” được tạo bằng dấu “ xl ” cỡ chữ và một “ in đậm ” trọng lượng phông chữ. Nội dung văn bản của phần tử được đặt ở giữa bằng cách sử dụng “ trung tâm văn bản ' lớp học.
- Sau khi ngắt dòng, dấu “ ” phần tử được tạo và được cung cấp một phần tử “ uốn cong ' lớp học. Điều này sẽ tạo ra một thùng chứa để căn chỉnh các mục con theo chiều ngang.
- Các ' trung tâm biện minh ”lớp sẽ đặt các vật phẩm vào giữa thùng chứa.
- Các ' dấu cách-x-{size} ” lớp cung cấp không gian theo chiều ngang giữa các mục.
- Các ' bg-{color}-{number} ” Lớp đặt nền của vùng chứa thành màu được chỉ định.
- Các ' làm tròn-lg ” class làm cho các góc của container được bo tròn.
- Các ' mx-4 ” Lớp cung cấp lề ngang cho vùng chứa linh hoạt.
- Các ' p-2 ” Lớp cung cấp phần đệm cho thùng chứa linh hoạt.
- Tiếp theo, ba thành phần danh sách được tạo và được cung cấp các kiểu kiểu danh sách khác nhau bằng cách sử dụng “ danh sách-{type} ' lớp học.
Đầu ra:
Từ kết quả đầu ra bên dưới, có thể thấy rằng danh sách đầu tiên sử dụng dấu đầu dòng, danh sách thứ hai sử dụng số thập phân và danh sách thứ ba không sử dụng bất kỳ dấu mục nào.
Sử dụng lớp kiểu danh sách với các biến thể trạng thái trong Tailwind
Bạn có thể sử dụng lớp kiểu danh sách với các biến thể trạng thái mặc định trong Tailwind để giúp thiết kế trở nên năng động hơn. Bằng cách sử dụng các biến thể trạng thái di chuột, tiêu điểm và trạng thái hoạt động, người dùng có thể thay đổi kiểu điểm đánh dấu của các mục danh sách bất cứ khi nào trạng thái được chỉ định được kích hoạt. Cú pháp sử dụng lớp kiểu danh sách với các biến thể trạng thái như sau:
< ul lớp học = '{state}:danh sách-{style}...' > < / ul >Dưới đây là ví dụ về việc sử dụng kiểu kiểu danh sách với trạng thái 'di chuột', trong đó người dùng có thể thay đổi kiểu điểm đánh dấu bằng cách di chuột qua khối danh sách:
< P lớp học = 'văn bản trung tâm văn bản-xl phông chữ in đậm' >Di chuột qua khối danh sách để thay đổi kiểu đánh dấu< / P >
< anh >
< div lớp học = 'flex biện minh-không gian trung tâm-x-20 bg-slate-100 làm tròn-lg mx-4 p-2' >
< ul lớp học = 'danh sách đĩa di chuột: danh sách thập phân' >
DANH SÁCH # 1
< cái đó >Đây là mục đầu tiên< / cái đó >
< cái đó >Đây là mục thứ hai< / cái đó >
< cái đó >Đây là mục thứ ba< / cái đó >
< / ul >
< / div >Trong đoạn mã trên, danh sách được cung cấp với “ đĩa danh sách ” class làm kiểu kiểu danh sách mặc định. Tuy nhiên, việc sử dụng “ di chuột: danh sách thập phân ” class, kiểu kiểu danh sách sẽ được thay đổi khi người dùng di con trỏ chuột lên khối danh sách.
Đầu ra:
Kết quả đầu ra bên dưới cho thấy kiểu danh sách thay đổi từ danh sách có dấu đầu dòng sang danh sách được đánh số khi con trỏ di chuột qua khối danh sách.
Sử dụng lớp kiểu danh sách với các điểm dừng trong Tailwind
Điểm dừng được sử dụng để thiết kế bố cục đáp ứng cho các kích thước màn hình khác nhau. Năm điểm dừng mặc định do Tailwind cung cấp là sm, md, lg, xl và 2xl. Cú pháp sau đây được sử dụng để cung cấp cho lớp kiểu danh sách một điểm dừng:
< ul lớp học = '{breakpoint}:danh sách-{style}...' > < / ul >Đây là một ví dụ về cách sử dụng kiểu danh sách với “ md ” điểm dừng, trong đó kiểu điểm đánh dấu sẽ thay đổi khi kích thước màn hình đạt đến điểm dừng “md”:
< P lớp học = 'văn bản trung tâm văn bản-xl phông chữ đậm' >Tăng màn hình Kích cỡ để thay đổi kiểu đánh dấu< / P >
< anh >
< div lớp học = 'flex biện minh-không gian trung tâm-x-20 bg-slate-100 làm tròn-lg mx-4 p-2' >
< ul lớp học = 'list-disc md:list-decimal' >
DANH SÁCH # 1
< cái đó >Đây là mục đầu tiên< / cái đó >
< cái đó >Đây là mục thứ hai< / cái đó >
< cái đó >Đây là mục thứ ba< / cái đó >
< / ul >
< / div >Trong đoạn mã trên, danh sách được cung cấp với “ đĩa danh sách ” class làm kiểu mặc định. Tuy nhiên, việc sử dụng “ md:danh sách-thập phân ” lớp, kiểu danh sách sẽ thay đổi theo kích thước màn hình “md”.
Đầu ra:
Như bạn có thể thấy trong kết quả đầu ra bên dưới, kiểu danh sách thay đổi từ dạng đĩa sang số thập phân khi kích thước màn hình đạt đến mức “ md “điểm dừng.
Đó là tất cả về việc thiết lập Kiểu kiểu danh sách trong Tailwind.
Phần kết luận
Tailwind cung cấp ba lớp loại kiểu danh sách được xác định trước để thay đổi kiểu danh sách của một phần tử. Các ' đĩa danh sách ” Lớp cung cấp các dấu đầu dòng để liệt kê các mục. Các ' danh sách thập phân ” Lớp cung cấp các số để liệt kê các mục. Các ' danh sách không có ” lớp tạo một danh sách không sử dụng bất kỳ điểm đánh dấu mục nào. Bài viết này đã cung cấp quy trình thiết lập kiểu danh sách trong Tailwind.