beeimp
BeeImp
beeimp
전체 방문자
오늘
어제
  • 분류 전체보기 (110)
    • Program_Language (17)
      • Python (13)
      • Go (0)
      • JavaScript (4)
      • TypeScript (0)
      • Rust (0)
      • Solidity (0)
    • OS (8)
      • UNIX&LINUX (7)
      • Windows (0)
      • MacOS (1)
    • Front-End (19)
      • Svelte (19)
      • React (0)
    • Blockchain (6)
      • Bitcoin (0)
      • Ethereum (1)
      • Klaytn (0)
      • Project (5)
    • Data Structure&Algorithm (11)
      • Greedy (7)
      • Dynamic Programming (1)
      • Sort (0)
      • DFS & BFS (2)
      • Recursive (1)
    • Security (0)
      • SDP (0)
      • Authentication (0)
    • Network (3)
      • OpenWrt (0)
      • SDN&NFV (1)
    • Git (5)
    • IT_News (0)
    • 베타 학습단 (12)
      • SQL (12)
    • Project (1)
    • Issues (1)
    • Reviews (3)
    • I Learned (23)
      • TIL (23)
      • WIL (0)
    • Other (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • svelte
  • Git
  • mysql
  • react
  • javascript
  • sql
  • github
  • greedy
  • Ethereum
  • ubuntu
  • typescript
  • 블록체인
  • jenkins
  • Nest.js
  • blockchain
  • 탐욕법
  • solidity
  • PYTHON
  • Docker
  • 기초

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
beeimp

BeeImp

Front-End/Svelte

13_Svelte_Classes

2021. 8. 12. 18:29

Classes

클래스 지침

다른 속성과 마찬가지로 다음과 같이 JavaScript 속성으로 클래스를 지정할 수 있습니다.

<button
  class="{ current === 'foo' ? 'selected' : '' }"
  on:click="{ () => current = 'foo' }"
>
  foo
</button>

이는 UI 개발에서 매우 일반적인 패턴으로, Svelte에는 이를 단순화하기 위한 특별 지침이 포함되어 있습니다.

<button
  class:selected="{ current === 'foo' }"
  on:click="{ () => current = 'foo' }"
>
  foo
</button>

selected 클래스는 표현식의 값이 true일 때마다 요소에 추가되고, false일 때는 제거됩니다.

Shorthand 클래스 지침

종종 클래스의 이름은 종속된 값의 이름과 같습니다.

<div class:big="{big}">
  <!-- ... -->
</div>

이러한 경우, 다음과 같은 간단한 양식을 사용할 수 있습니다.

<div class:big>
  <!-- ... -->
</div>

'Front-End > Svelte' 카테고리의 다른 글

15_Svelte_Context_API  (0) 2021.08.14
14_Svelte_Component_Composition  (0) 2021.08.13
12_Svelte_Actions  (0) 2021.08.11
11_Svelte_Animations  (0) 2021.08.10
10_Svelte_Transitions  (0) 2021.08.09
    'Front-End/Svelte' 카테고리의 다른 글
    • 15_Svelte_Context_API
    • 14_Svelte_Component_Composition
    • 12_Svelte_Actions
    • 11_Svelte_Animations

    티스토리툴바