220426 CSS Toggles

css-toggles 패키지

사용방법

해당 포스팅은 큰 특징만 정리하였습니다.
기타 다른 사항은 oddbird.net/ Docs 를 참고하세요

Global Color Toggle

light / dark 모드를 변경할 때 사용할 수 있습니다.

  html {
     toggle-root: mode [auto light dark];
  }

  html:toggle (mode light) { ... }
  html:toggle (mode dark) { ... }

  .mode-btn {
    toggle-trigger: mode;  
  }

Binary self-toggle switches

  .todo li {
    toggle: todo self;
    list-style-type: '❌ ';
  }

  .todo li:toggle(todo) {
    list-style-type: '✅ ';
  }

Named states

이 문법은 이름을 가지고 사용할 수 있습니다.

  .colors {
    toggle-root: colors [grape green blue red] at blue;
  }

  .colors button {
    toggle-trigger: colors;
  }

  /* for each color */
  .colors button.grape {
    toggle-trigger: colors grape;
  }

  .show-colors:toggle(colors grape) {
    background-color: var(--grape-9);
  }

---

특징

• Toggle Root 는 하나 이상의 토글이 가능합니다.
• 토글은 1 개 이상의 active 상태가 가능하고, 0, 1 외의 값도 가능합니다.
• 상태가 숫자일 필요는 없고, 단어도 가능합니다.
• 처음 토글 상태는 0이 기본이지만, 덮어쓸 수 있습니다.
• 요소는 toogle-root 나 toggle-trigger 둘다 될 수 있고, 이런 경우에 toggle 프로퍼티를 사용합니다.
• toggle 값의 스코프는 직계 자손 요소에게만 전달됩니다. (형제나 형제의 자손들에게 전달되진 않습니다)
• toggle-visibility 는 요소를 toggle 값에 기반하여 show/hide 시킬 수 있습니다.
• toggle-group 을 사용하여 토글은 그룹핑 될 수 있습니다. 간편한 tab 인터페이스를 통해, 1개의 탭이 동시에 활성화 됩니다.
• Sticky toggle은 active 상태가 하나라도 있으면 활성화 되지 못합니다.

출처 - bram.us/the-future-of-css-css-toggles/