이 게시물에서는 사용 가능한 진행률 표시줄 위젯 중 하나를 소개하겠습니다. 이는 사용자에게 작업 흐름의 진행 상황을 표시하는 데 유용한 도구입니다.

진행률 표시줄 위젯을 사용하는 이유는 무엇입니까?

앱에서 여러 단계의 프로세스를 거치는 경우(예: 주문 양식 작성 또는 설문 조사 수행) 완료까지 얼마나 남았는지 시각적으로 표시하면 훌륭한 사용자 경험을 얻을 수 있습니다. 여기서 진행률 표시줄 위젯이 등장합니다. 이 위젯은 개발자에게 여러 가지 스타일을 사용하여 최종 사용자의 진행 상황을 시각적으로 표시하여 진행 메시지가 최종 사용자에게 성공적으로 전달되도록 할 수 있는 기능을 제공합니다.

진행률 표시줄 위젯 찾기

진행률 표시줄 위젯은 다음에서 찾을 수 있습니다. Mendix 앱 스토어"진행률 표시줄"을 검색하면 여러 진행률 표시줄 위젯이 나열되지만 이 블로그의 주요 초점은 다음과 같습니다. 부트스트랩 진행률 표시줄 Flock of Birds가 만든 위젯:

위젯 기능

본질적으로 Bootstrap Progress Bar 위젯은 단순히 0에서 100 사이의 숫자로 적절한 진행률 막대를 표시하여 완료율을 나타냅니다. 진행률 막대의 숫자 뒤에 텍스트를 표시할 수도 있습니다(예: "75" 또는 "75% 완료"를 표시할 수 있음).

위젯 구성하기

가장 먼저 해야 할 일은 위젯을 올바른 위치에 연결하는 것입니다. 진행 속성 부트스트랩 스타일:

progress 속성은 완료된 진행 상황을 표시하는 정수이며, 0~100 범위의 숫자로 설정해야 합니다. Bootstrap 스타일은 info, danger 또는 success 값 중 ​​하나인 경우 진행률 막대의 모양을 변경하는 데 사용할 수 있습니다. Bootstrap 스타일은 마이크로플로를 통해 progress 속성에 연결될 수 있으므로 예를 들어 "danger Bootstrap 스타일"의 진행률 막대에 0%의 진행률이 표시되고 "success Bootstrap 스타일"의 진행률 막대에 100%의 진행률이 표시될 수 있습니다.

또한 진행률 막대에 백분율 값 뒤에 표시되는 내용, 앱의 위젯 너비, 색상 스위치 값, 막대 자체의 모양 등 여러 가지 표시 설정을 조정할 수 있습니다.

아래에 표시된 것처럼 마이크로플로를 통해 진행률 표시줄에 클릭 시 동작을 제공하는 것도 가능합니다. 마이크로플로 동작을 활용하는 한 가지 사용 사례는 사용자가 사용자의 현재 페이지에 채워진 새 정보에 따라 진행률 표시줄 완료율을 업데이트하려는 경우입니다.

위에서 언급한 예 외에도 진행률 표시줄과 표시줄에 포함된 텍스트에 CSS 스타일을 적용할 수도 있습니다.

이 간단하면서도 효과적인 위젯은 워크플로 진행 상황을 시각적으로 설명하는 좋은 방법이며 Mendix 개발자들은 페이지에 사용하기 쉬운 진행률 표시줄을 추가하는 이점을 누릴 수 있습니다!