Cách áp dụng động CSS trong Svelte

Tôi có nhu cầu áp dụng động một sốCSSthuộc tính của một phần tử, sử dụngSvelte, khi một trong các biến của nó có một giá trị cụ thể.

Giải pháp đơn giản nhất mà tôi tìm thấy là thêm một lớp HTML khiselectedgiá trị biến làtruevà sau đó tôi đã viết một số CSS nhắm mục tiêu phần tử đó với lớp:

<style>
  /* ...other CSS... */
  span.cell.selected {
    outline-color: lightblue;
    outline-style: dotted;
  }
</style>
<span class=“cell {selected === true ? ‘selected’ : ‘’}”>
{value}
</span>

Loại nhu cầu này phổ biến đến mức Svelte đã thêm khả năng liên kết tên lớp với một giá trị biến:

<span class="cell" class:selected="{selected}">
  {value}
</span>

và theo cách ngắn gọn hơn, sử dụng ký hiệu viết tắt:

<span class="cell" class:selected>
  {value}
</span>

Các hướng dẫn nhỏ gọn hơn:

• Bắt đầu với Svelte - một hướng dẫn ngắn
• Cách làm việc với các đạo cụ trong Svelte
• Cách nhập các thành phần trong Svelte
• Cách xuất các hàm và biến từ một thành phần Svelte
• Mẫu Svelte: logic có điều kiện
• Cách kết xuất một thành phần Svelte theo yêu cầu
• Slotte Slots
• Cách thêm nhận xét trong các mẫu Svelte
• Ràng buộc mảnh mai
• Xử lý cập nhật trạng thái trong Svelte
• Câu lệnh phản ứng trong Svelte
• Sự kiện vòng đời của Svelte
• Svelte mẫu: vòng lặp
• Giải quyết lời hứa trong các mẫu Svelte
• Làm việc với các sự kiện trong Svelte
• Quản lý nhà nước nhiều thành phần trong Svelte
• Cách truy cập tham số URL trong Sapper bên ngoài mô-đun tập lệnh
• Cách áp dụng động CSS trong Svelte
• Cách chuyển hướng đến một URL trong Sapper
• Cách mô phỏng vòng lặp for trong các mẫu Svelte