머티리얼 디자인 3 및 웹 컴포넌트 기반의 새로운 mdui 2가 출시되었습니다. mdui 2 개발 문서 보기.

프로그레스 바

프로그레스 바에는 선형 프로그레스와 원형 프로그레스가 포함됩니다.

호출 방식

선형 프로그레스 바는 순수 CSS로 작성되었으며, HTML 코드를 작성하는 것만으로 적용됩니다.

원형 프로그레스 바는 페이지 로드가 완료된 후 자동으로 초기화됩니다. 동적으로 생성된 원형 프로그레스 바의 경우, 초기화를 위해 mdui.mutation()을 호출해야 합니다.

색상

선형 프로그레스 바는 메인 컬러를 사용합니다.

원형 프로그레스 바는 메인 컬러 또는 다채로운 색상을 사용합니다.

선형 프로그레스

미확정 상태 진행

이 프로그레스 바는 정확한 진행률 값을 알 수 없는 경우에 사용됩니다.

예시

<div class="mdui-progress">
  <div class="mdui-progress-indeterminate"></div>
</div>

확정 상태 진행

이 프로그레스 바는 정확한 진행률 값을 알 수 있는 경우에 사용됩니다.

<div class="mdui-progress-determinate"></div> 요소의 width 속성 값을 수정하여 진행률을 업데이트할 수 있습니다.

예시

<div class="mdui-progress">
  <div class="mdui-progress-determinate" style="width: 30%;"></div>
</div>

원형 프로그레스

<div class="mdui-spinner"></div> 요소를 추가하는 것만으로 원형 프로그레스 바를 생성할 수 있습니다. .mdui-spinner-colorful 클래스를 추가하면 다채로운 색상의 원형 프로그레스 바를 생성할 수 있습니다.

.mdui-spinner 클래스의 width와 height 스타일 값을 수정하여 원형 프로그레스 바의 크기를 변경할 수 있지만, width와 height 값이 같아야 합니다.

단색

예시

<div class="mdui-spinner"></div>

다채로운 색상

예시

<div class="mdui-spinner mdui-spinner-colorful"></div>

동적으로 생성된 원형 프로그레스

원형 프로그레스 컴포넌트가 동적으로 생성된 경우, 초기화를 위해 mdui.mutation()을 호출해야 합니다.

기존 원형 프로그레스 컴포넌트를 수정해야 하는 경우, mdui.updateSpinners() 메서드를 호출하여 컴포넌트를 다시 초기화해야 합니다. 이 메서드는 CSS 선택자(해당 선택자는 클래스명 .mdui-spinner를 포함해야 함), DOM 요소 또는 DOM 요소의 배열을 파라미터로 받아 지정된 원형 프로그레스만 다시 초기화할 수 있습니다. 파라미터를 전달하지 않으면 페이지의 모든 원형 프로그레스가 다시 초기화됩니다.

CSS 클래스 목록

클래스 이름	설명
`.mdui-progress`	선형 프로그레스 바를 정의합니다.
`.mdui-progress-indeterminate`	미확정 상태 진행의 선형 프로그레스 바.
`.mdui-progress-determinate`	확정 상태 진행의 선형 프로그레스 바.
`.mdui-spinner`	원형 프로그레스 바를 정의합니다.
`.mdui-spinner-colorful`	다채로운 색상의 원형 프로그레스 바.

메뉴

접기