Newtil CSS

프로그레스 (Progress) ​

프로그레스 컴포넌트는 어느 작업의 완료 정도를 나타내는 컴포넌트입니다.

Overview ​

Color ​

main, sub, accent, base 색상이 제공됩니다. 자세한 내용을 보려면 여기를 클릭하세요.

Usage ​

프로그레스 컴포넌트는 요소에 n-progress 클래스를 적용하고, 내부에 div 요소를 추가하여 진행 상태를 나타내는 너비를 설정합니다.

너비는 style 속성을 사용하여 설정할 수 있습니다.

html
<div class="n-progress" role="progressbar">
  <div style="width: 25%"></div>
</div>

Color ​

n-progress-color:색상 클래스를 통해 프로그레스의 색을 변경할 수 있습니다.

html
<div class="n-progress n-progress-color:main" role="progressbar">
  <div style="width: 33%"></div>
</div>
<div class="n-progress n-progress-color:sub" role="progressbar">
  <div style="width: 33%"></div>
</div>
<div class="n-progress n-progress-color:accent" role="progressbar">
  <div style="width: 33%"></div>
</div>
<div class="n-progress n-progress-color:base" role="progressbar">
  <div style="width: 33%"></div>
</div>
색상클래스
mainn-progress-color:main
subn-progress-color:sub
accentn-progress-color:accent
basen-progress-color:base

Overriding ​

프로그레스 컴포넌트의 변수는 다음과 같습니다:

css
/* progress.css */
.n-progress {
  --progress-height: 6px;
  --progress-border-radius: 999px;
  --progress-background-color: rgba(var(--rgb-base-6), 0.2);

  --progressbar-color-main: var(--color-main-1);
  --progressbar-color-sub: var(--color-sub-1);
  --progressbar-color-accent: var(--color-accent-1);
  --progressbar-color-base: var(--color-base-6);
}

Example ​

html
<div class="n-item">
  <div class="n-progress" role="progressbar">
    <div style="width: 33%"></div>
  </div>
</div>
css
/* root.css */
.n-item .n-progress {
  --progress-height: 10px;
  --progress-background-color: #f1f3f5;
  --progressbar-color-main: #a5d8ff;
}

TIP

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

Copyright © 2024 newlecture