Bài viết này minh họa cách sử dụng tính năng di chuột, tiêu điểm và các trạng thái khác với thuộc tính vị trí trong Tailwind.
Làm cách nào để sử dụng Hover, Focus và các trạng thái khác có thuộc tính vị trí trong Tailwind?
Di chuột, tiêu điểm và các trạng thái khác trong Tailwind được dùng để tạo kiểu cho các thành phần trong Tailwind nhằm mang lại giao diện hấp dẫn và thân thiện với người dùng cũng như trải nghiệm hấp dẫn cho người dùng. Đôi khi, thuộc tính vị trí sẽ được áp dụng để duy trì trải nghiệm ở tiêu chuẩn cao nhất.
Phương pháp 1: Sử dụng Biến thể di chuột với Thuộc tính vị trí
Biến thể di chuột được sử dụng để tạo kiểu cho các phần tử đã chọn khi người dùng di chuyển con trỏ qua phần tử đã chọn đó. Các ' chức vụ Thuộc tính ” có thể được sử dụng kết hợp với “ bay lượn ” để đặt vị trí trước và sau khi di chuột. Cặp này được sử dụng để tạo ra trải nghiệm hấp dẫn cho người dùng.
Bước 1: Thêm thuộc tính di chuột với vị trí trong HTML
Trong đoạn mã dưới đây, thuộc tính di chuột được áp dụng dọc theo thuộc tính vị trí trên “ cái nút ' yếu tố:
< thân hình >
< cái nút lớp học = 'tương đối w-40 h-12 bg-blue-500 di chuột:di chuột tuyệt đối:translate-x-4 di chuột:translate-y-4 ' >
< P lớp học = 'văn bản-trắng ở giữa văn bản' > Di chuột cho tôi < / P >
< / cái nút >
< / thân hình >
Trong mã này:
- Các ' liên quan đến ” lớp đặt nút liên quan đến trang mẹ.
- “ w-40 ” đặt chiều rộng thành 40px.
- “ h-12 ” đặt chiều cao thành 12px.
- “ bg-xanh-500 ” đặt màu nền thành màu xanh lam.
- “ di chuột: tuyệt đối ” thay đổi vị trí tương đối của nút thành tuyệt đối khi con trỏ chuột di chuyển qua nó.
- “ di chuột: dịch-x-4 ” di chuyển nút 4px sang phải trên trục x và đồng thời xuống 4px “ di chuột: dịch-y-4 ”.
- Văn bản được căn giữa bởi “ trung tâm văn bản ”.
Bước 2: Xác minh
Xem trước trang web được tạo bởi đoạn mã trên, trông như thế này:
Đầu ra cho thấy phần tử đã được di chuyển sang phải và hướng xuống dưới 4px.
Phương pháp 2: Sử dụng Biến thể tiêu điểm với Thuộc tính vị trí
Biến thể tiêu điểm được sử dụng để tạo kiểu cho các phần tử HTML nhằm thu hút sự chú ý của người dùng và nhấn mạnh vào một số phần tử. Vị trí cũng có thể được áp dụng kết hợp để định vị đối tượng tương đối hoặc tuyệt đối với trang mẹ. Nó được thực hiện để giữ cho người dùng tham gia.
Bước 1: Thêm thuộc tính tiêu điểm với vị trí trong HTML
Tạo một tệp HTML và áp dụng thuộc tính tiêu điểm với vị trí phù hợp. Ví dụ: vị trí tương đối được áp dụng cho hộp nhập liệu trong mã bên dưới:
< / thân hình >
Trong mã này:
- Đặt vị trí của “ đầu vào ” các phần tử thành “ liên quan đến ”.
- “ tiêu điểm: dịch-x-4 ” di chuyển nút 4px sang phải trên trục x và đồng thời xuống 4px “ tiêu điểm: dịch-y-4 ” khi người dùng nhấp vào hộp nhập liệu.
- “ tiêu điểm: phác thảo-2 ” tạo đường viền xung quanh hộp văn bản khi người dùng nhấp vào.
Bước 2: Xác minh đầu ra
Xem trước trang web được tạo bằng mã để nhận thấy sự thay đổi:
Kết quả đầu ra ở trên cho thấy kiểu đã được áp dụng cho phần tử đã chọn khi nó được lấy nét.
Sử dụng Biến thể hiện hoạt với Thuộc tính vị trí.
Biến thể hoạt động được sử dụng để tạo kiểu cho các phần tử HTML nhằm xác định trạng thái khi người dùng nhấp và giữ nút hoặc một số phần tử khác. Thuộc tính vị trí có thể làm cho đầu ra hấp dẫn hơn đối với người dùng, tạo ra trải nghiệm năng động hơn.
Bước 1: Thêm thuộc tính di chuột với vị trí trong HTML
Tạo một tệp HTML và áp dụng biến thể hoạt động kết hợp với thuộc tính vị trí. Ví dụ: các thuộc tính này được áp dụng cho một nút trong ví dụ mã bên dưới:
< cái nút lớp học = 'tương đối w-48 h-12 bg-blue-500 đang hoạt động:translate-y-2 đang hoạt động:bg-green-400' >
< nhịp lớp học = 'văn bản màu trắng' >Nhấp vào tôi< / nhịp >
< / cái nút >
< / thân hình >
Trong đoạn mã trên:
- Đặt vị trí của “ cái nút ” phần tử thành “ liên quan đến ”.
- “ bg-xanh-500 ” đặt màu nền của nút thành màu xanh lam.
- “ đang hoạt động: dịch-y-2 ” di chuyển nút xuống 2px và thay đổi màu nút thành màu xanh lục bằng cách “ đang hoạt động: bg-green-400 ”.
Bước 2: Xác minh đầu ra
Xem trước trang web được tạo bởi đoạn mã trên rồi nhấp và giữ nút để xem thay đổi:
Ảnh gif ở trên cho thấy kiểu dáng của thành phần nút đã chọn sẽ thay đổi khi nó hoạt động.
Đó là tất cả để áp dụng trạng thái di chuột, tiêu điểm và các trạng thái khác với thuộc tính vị trí trong Tailwind.
Phần kết luận
Bạn có thể sử dụng trạng thái di chuột, tiêu điểm và các trạng thái khác với thuộc tính vị trí bằng cách sử dụng các lớp di chuột, tiêu điểm và các trạng thái khác được xác định trước, sau đó áp dụng các thuộc tính của lớp vị trí như “ tuyệt đối ',' liên quan đến ” và vân vân. Blog này đã chỉ ra cách sử dụng tính năng di chuột, tiêu điểm và các trạng thái khác với tiện ích vị trí trong Tailwind.