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>

Tải xuống miễn phí của tôiSổ tay Svelte


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