LinearProgress선형 프로그레스

선형 프로그레스는 데이터 로딩이나 양식 제출과 같은 작업의 진행 상황을 사용자에게 표시하는 수평형 인디케이터입니다.

사용법

컴포넌트 가져오기:

import 'mdui/components/linear-progress.js';

컴포넌트의 TypeScript 타입 가져오기:

import type { LinearProgress } from 'mdui/components/linear-progress.js';

사용 예시:

<mdui-linear-progress></mdui-linear-progress>

선형 프로그레스는 기본적으로 불확정 진행률을 표시하며, value 속성으로 현재 진행률을 설정할 수 있습니다. 기본 최대 진행률은 1입니다.

<mdui-linear-progress value="0.5"></mdui-linear-progress>

소스

max 속성으로 진행률의 최대값을 설정할 수도 있습니다.

<mdui-linear-progress value="30" max="100"></mdui-linear-progress>

소스

HTML 속성	JavaScript 프로퍼티	유형	기본값
`max`	`max`	`number`	`1`
프로그레스의 최대값입니다. 기본값은 `1`입니다.
`value`	`value`	`number`	-
프로그레스의 현재 값입니다. 이 값이 지정되지 않으면 불확정 상태가 됩니다.

이름
`indicator`
표시기 부분

이름
`--shape-corner`
컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.

이전 장

Layout 레이아웃

다음 장

List 목록