Newtil CSS

토글 (Toggle) ​

토글 컴포넌트는 온/오프 상태를 가지는 작은 컴포넌트입니다.

Overview ​

Type ​

slide, check-box, dot, outline-box 타입이 제공됩니다. 자세한 내용을 보려면 여기를 클릭하세요.

Size ​

small, medium, large 사이즈가 제공됩니다. 자세한 내용을 보려면 여기를 클릭하세요.

슬라이드 ​

체크박스 ​

도트 ​

아웃라인박스 ​

Status ​

disabled 상태가 제공됩니다. 자세한 내용을 보려면 여기를 클릭하세요.

Label ​

라벨을 토글의 상단 또는 하단에 위치시킬 수 있습니다. 자세한 내용을 보려면 여기를 클릭하세요.

Top ​

Bottom ​

Usage ​

토글 컴포넌트는 input 요소에 n-toggle 클래스를 적용하여 사용할 수 있습니다.

html
<input type="checkbox" class="n-toggle" />

Type ​

n-toggle-type:타입명 또는 n-toggle:타입명 약어 클래스를 사용하여 다양한 토글 스타일을 적용할 수 있습니다.

html
<input type="checkbox" class="n-toggle n-toggle-type:slide" />
<input type="checkbox" class="n-toggle n-toggle-type:check-box" />
<input type="checkbox" class="n-toggle n-toggle-type:dot" />
<label class="n-toggle n-toggle-type:outline-box">
  Outline
  <input type="checkbox" class="d:none" />
</label>
타입클래스약어 클래스변수
sliden-toggle-type:sliden-toggle:slide .n-toggle {
--toggle-slide-background-color: rgba(var(--rgb-base-10), 0.12);
--toggle-slide-background-color-checked: var(--color-main-2);
--toggle-slide-circle-color: var(--color-base-1);
--toggle-slide-circle-color-checked: var(--color-base-1);
}
check-boxn-toggle-type:check-box
n-toggle-type:check		n-toggle:check-box
n-toggle:check		 .n-toggle {
--toggle-check-border-color: var(--color-base-3);
--toggle-check-background-color: var(--color-base-1);
--toggle-check-background-color-checked: var(--color-main-2);
}
dotn-toggle-type:dotn-toggle:dot .n-toggle {
--toggle-dot-border-color: var(--color-base-3);
--toggle-dot-background-color: var(--color-base-1);
--toggle-dot-border-color-checked: var(--color-main-2);
--toggle-dot-background-color-checked: var(--color-main-2);
}
outline-boxn-toggle-type:outline-box
n-toggle-type:outline		n-toggle:outline-box
n-toggle:outline		 .n-textbox {
--toggle-outline-color: rgba(var(--rgb-base-10), 0.85);
--toggle-outline-background-color: var(--color-base-1);
--toggle-outline-border-color: var(--color-base-3);
--toggle-outline-color-checked: var(--color-base-1);
--toggle-outline-background-color-checked: var(--color-main-2);
--toggle-outline-border-color-checked: transparent;
}

Size ​

toggle-size:값 클래스를 통해 토글 사이즈를 변경할 수 있습니다.

슬라이드 ​

codes
html
<label>
  Small
  <input
    type="checkbox"
    class="n-toggle n-toggle-type:toggle n-toggle-size:1" />
</label>
<label>
  Medium
  <input
    type="checkbox"
    class="n-toggle n-toggle-type:toggle n-toggle-size:2" />
</label>
<label>
  Large
  <input
    type="checkbox"
    class="n-toggle n-toggle-type:toggle n-toggle-size:3" />
</label>

체크 ​

codes
html
<label>
  Small
  <input
    type="checkbox"
    class="n-toggle n-toggle-type:check-box n-toggle-size:1" />
</label>
<label>
  Medium
  <input
    type="checkbox"
    class="n-toggle n-toggle-type:check-box n-toggle-size:2" />
</label>
<label>
  Large
  <input
    type="checkbox"
    class="n-toggle n-toggle-type:check-box n-toggle-size:3" />
</label>

도트 ​

codes
html
<label>
  Small
  <input type="radio" class="n-toggle n-toggle-type:dot n-toggle-size:1" />
</label>
<label>
  Medium
  <input type="radio" class="n-toggle n-toggle-type:dot n-toggle-size:2" />
</label>
<label>
  Large
  <input type="radio" class="n-toggle n-toggle-type:dot n-toggle-size:3" />
</label>

아웃라인박스 ​

codes
html
<label class="n-toggle n-toggle-type:outline-box n-toggle-size:1">
  Small
  <input type="checkbox" class="d:none" />
</label>
<label class="n-toggle n-toggle-type:outline-box n-toggle-size:2">
  Medium
  <input type="checkbox" class="d:none" />
</label>
<label class="n-toggle n-toggle-type:outline-box n-toggle-size:3">
  Large
  <input type="checkbox" class="d:none" />
</label>
사이즈클래스
1n-toggle-size:1
2n-toggle-size:2
3n-toggle-size:3

Disabled ​

input 태그에 disabled 속성을 추가하거나 클래스에 n-toggle-status:disabled를 추가하여 토글 컴포넌트에 비활성화 스타일을 적용할 수 있습니다.

html
<input type="checkbox" class="n-toggle n-toggle-type:toggle" disabled />
<input type="checkbox" class="n-toggle n-toggle-type:check-box" disabled />
<input type="radio" class="n-toggle n-toggle-type:dot" disabled />
<label class="n-toggle n-toggle-type:outline-box">
  Outline
  <input type="checkbox" class="d:none" disabled />
</label>

Label ​

n-toggle-label:값 클래스를 적용하여 라벨을 토글의 상단 또는 하단에 위치시킬 수 있습니다.

Top ​

codes
html
<label>
  Slide
  <input
    type="checkbox"
    class="n-toggle n-toggle-type:toggle n-toggle-label:top" />
</label>
<label>
  Check
  <input
    type="checkbox"
    class="n-toggle n-toggle-type:check-box n-toggle-label:top" />
</label>
<label>
  Dot
  <input type="radio" class="n-toggle n-toggle-type:dot n-toggle-label:top" />
</label>
클래스변수
n-toggle-label:top

Bottom ​

codes
html
<label>
  Slide
  <input
    type="checkbox"
    class="n-toggle n-toggle-type:toggle n-toggle-label:bottom" />
</label>
<label>
  Check
  <input
    type="checkbox"
    class="n-toggle n-toggle-type:check-box n-toggle-label:bottom" />
</label>
<label>
  Dot
  <input
    type="radio"
    class="n-toggle n-toggle-type:dot n-toggle-label:bottom" />
</label>
클래스변수
n-toggle-label:bottom

Overriding ​

토글 컴포넌트는 스타일 재정의에 대한 변수를 아래와 같이 제공하고 있습니다.

css
/* toggle.css */
.n-toggle {
  /* toggle-type:slide */
  --toggle-slide-background-color: rgba(var(--rgb-base-10), 0.12);
  --toggle-slide-checked-background-color: var(--color-main-2);
  --toggle-slide-circle-color: var(--color-base-1);
  --toggle-slide-circle-checked-color: var(--color-base-1);

  /* toggle-type:check */
  --toggle-check-border-color: var(--color-base-3);
  --toggle-check-bagkground-color: var(--color-base-1);
  --toggle-check-checked-background-color: var(--color-main-2);

  /* toggle-type:dot */
  --toggle-dot-border-color: var(--color-base-3);
  --toggle-dot-background-color: var(--color-base-1);
  --toggle-dot-checked-border-color: var(--color-main-2);
  --toggle-dot-checked-background-color: var(--color-main-2);

  /* toggle-type:outline-box */
  --toggle-outline-color: rgba(var(--rgb-base-10), 0.85);
  --toggle-outline-background-color: var(--color-base-1);
  --toggle-outline-border-color: var(--color-base-3);
  --toggle-outline-checked-color: var(--color-base-1);
  --toggle-outline-checked-background-color: var(--color-main-2);
  --toggle-outline-checked-border-color: transparent;
}

Example ​

html
<input type="checkbox" class="n-toggle n-toggle-type:toggle" />
<input type="checkbox" class="n-toggle n-toggle-type:check-box" />
<input type="radio" class="n-toggle n-toggle-type:dot" />
<label class="n-toggle n-toggle-type:outline-box">
  Outline
  <input type="checkbox" class="d:none" />
</label>
css
/* root.css */
.n-toggle {
  /* toggle:slide */
  --toggle-slide-background-color: #cccccc;
  --toggle-slide-checked-background-color: #f4a423;
  --toggle-slide-circle-color: #f0f0f0;
  --toggle-slide-circle-color-checked: var(--color-base-1);

  /* toggle:check */
  --toggle-check-border-color: #f4a423;
  --toggle-check-bagkground-color: var(--color-base-1);
  --toggle-check-background-color-checked: #f4a423;

  /* n-toggle:dot */
  --toggle-dot-border-color: #cccccc;
  --toggle-dot-background-color: var(--color-base-1);
  --toggle-dot-border-color-checked: #f4a423;
  --toggle-dot-background-color-checked: #f4a423;

  /* toggle:outline-box */
  --toggle-outline-color: #f4a423;
  --toggle-outline-background-color: var(--color-base-1);
  --toggle-outline-border-color: #f4a423;
  --toggle-outline-color-checked: var(--color-base-1);
  --toggle-outline-background-color-checked: #f4a423;
  --toggle-outline-border-color-checked: transparent;
}

TIP

컴포넌트 커스터마이징에 대한 자세한 내용은 컴포넌트 커스터마이징하기에서 확인하실 수 있습니다.

Example ​

토글 컴포넌트를 활용한 다양한 예시입니다.

슬라이드 ​

codes
html
<label class="font-size:2 font-weight:1">
  푸쉬알림
  <input type="checkbox" class="n-toggle n-toggle-size:1" />
</label>

체크 ​

codes
html
<ul class="d:flex fl-dir:column gap:2">
  <li>
    <label>
      <input type="checkbox" class="n-toggle n-toggle-type:check-box" />
      <span class="font-size:2 font-weight:2 d:flex gap:1">
        <span>(필수)</span>
        <span>서비스 이용약관에 동의합니다.</span>
      </span>
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" class="n-toggle n-toggle-type:check-box" />
      <span span class="font-size:2 font-weight:2 d:flex gap:1">
        <span class="color:base-5">(선택)</span>
        <span>마케팅 정보 수신에 동의합니다.</span>
      </span>
    </label>
  </li>
</ul>

도트 ​

가장 좋아하는 동물을 선택해주세요!

codes
html
<p class="font-weight:2">가장 좋아하는 동물을 선택해주세요!</p>
<ul class="w:full d:flex jc:center gap:4">
  <li>
    <label class="font-size:2 font-weight:1">
      고양이 🐱
      <input type="radio" class="n-toggle n-toggle-type:dot" name="amimal" />
    </label>
  </li>
  <li>
    <label class="font-size:2 font-weight:1">
      강아지 🐶
      <input type="radio" class="n-toggle n-toggle-type:dot" name="amimal" />
    </label>
  </li>
  <li>
    <label class="font-size:2 font-weight:1">
      여우 🦊
      <input type="radio" class="n-toggle n-toggle-type:dot" name="amimal" />
    </label>
  </li>
</ul>

아웃라인 박스 ​

✨ 베스트 강의

codes
html
<p class="n-font:h2">✨ 베스트 강의</p>
<ul class="w:full d:flex jc:center gap:2">
  <li>
    <label class="n-toggle n-toggle-type:outline-box">
      실시간
      <input type="radio" class="d:none" name="category" checked />
    </label>
  </li>
  <li>
    <label class="n-toggle n-toggle-type:outline-box">
      일간
      <input type="radio" class="d:none" name="category" />
    </label>
  </li>
  <li>
    <label class="n-toggle n-toggle-type:outline-box">
      월간
      <input type="radio" class="d:none" name="category" />
    </label>
  </li>
  <li>
    <label class="n-toggle n-toggle-type:outline-box">
      주간
      <input type="radio" class="d:none" name="category" />
    </label>
  </li>
</ul>

Copyright © 2024 newlecture