목적

스테이지 진행률 펼침 단추 구성요소는 트랜잭션의 스테이지 진행률을 시각적으로 표현한 것으로, 일반적으로 가로 펼침 단추 막대로 표시됩니다. 정적으로 또는 동적으로 정의할 수 있으며 레이아웃 JSON을 통해 구성할 수 있습니다.

구성 옵션

구성요소는 레이아웃 JSON의 루트 수준( 헤더 또는 tierDef와 함께)에 배치됩니다.

정적 정의

스테이지 목록을 수동으로 정의합니다.

JSON:

"stageProgress": {
  "stageList": [
    { "value": "draft", "label": "Draft" },
    { "value": "stage2", "label": "Stage 2" },
    ...
  ],
  "currentStage": "draft"
}

YAML입니다.

stageProgress:
  stageList:
    - value: draft
      label: Draft
    - value: stage2
      label: Stage 2
    # ... add more stages as needed
  currentStage: draft

• stageList 는 각 스테이지의 값 과 표시 레이블을 정의합니다.
• currentStage 는 활성 스테이지를 강조 표시합니다.

  currentStage가 생략되면 기본값은 txn.stage입니다. 이를 통해 여러 스테이지에서 사용하는 기본 레이아웃에서 사용할 수 있습니다.

사용자 지정 선택 목록 기반 정의

사용자 지정 필드를 사용하여 펼침 버튼을 동적으로 채웁니다.

JSON:

"stageProgress": {
  "stageListField": "txn.custom.stageList",
  "currentStageField": "txn.custom.stageList"
}

YAML입니다.

stageProgress:
  stageListField: txn.custom.stageList
  currentStageField: txn.custom.stageList

• stageListField 는 사용 가능한 스테이지 목록을 가져올 위치를 지정합니다.
• currentStageField 는 현재 스테이지 값이 포함된 필드를 지정합니다.

이 메서드는 다음을 지원합니다.

• 특정 스테이지를 숨기거나 비활성화하는 제외 규칙입니다.
• 현재 스테이지의 값을 설정하는 결정 규칙입니다.

  결정 규칙은 여러 스테이지를 단일 펼침 단추로 표시해야 할 경우에 유용합니다.

조합 사용

정적 구성과 동적 구성을 혼합할 수 있습니다.

• 동적 currentStageField와 함께 정적 stageList를 사용합니다.
• stageList와 stageListField가 모두 정의되지 않은 경우 아무 것도 표시되지 않습니다.
• currentStage와 currentStageField가 모두 정의되지 않은 경우 기본적으로 txn.stage가 사용됩니다.
• 정적 버전과 동적 버전이 모두 있는 경우 동적 버전이 우선합니다.

테마

구성요소는 CSS 사용자 지정 속성을 사용한 테마 지정을 지원합니다. 다음 표는 관련 변수의 완전하지 않은 목록을 보여줍니다.