Gerenciador de transações: Layouts - A divisa de andamento das fases

Você pode configurar uma barra de andamento usando layout JSON ou YAML e defini-la estática ou dinamicamente. Consulte snippets de código.

Finalidade

O componente Chevron do andamento das fases é uma representação visual da progressão da fase de uma transação, normalmente exibido como uma barra de divisa horizontal. Pode ser definido estática ou dinamicamente e é configurável por meio de layout JSON.

Opções de configuração

O componente é colocado no nível raiz do json de layout (ao lado de cabeçalho ou Def. De nível ).

Definição estática

Defina uma lista de fases manualmente.

JSON:

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

AML:

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

• StageList define cada fase valor e exibição rótulo .
• CurrentStage destaca a fase ativa.

  Se CurrentStage é omitido, o padrão é txn.fase . Isso permite que você use em um layout padrão usado por várias fases.

Definição personalizada baseada em lista de seleção

Use campos personalizados para preencher dinamicamente a divisa.

JSON:

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

AML:

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

• StageListField especifica para onde extrair a lista de fases disponíveis.
• CurrentStageField especifica o campo que contém o valor da fase atual.

Este método é compatível com:

• Regras de exclusão para ocultar ou desabilitar fases específicas.
• Regras de determinação para definir o valor da fase atual.

  As regras de determinação são úteis quando várias fases devem ser exibidas como uma única divisa.

Uso de combinação

Você pode misturar configurações estáticas e dinâmicas:

• Use uma estática StageList com uma dinâmica CurrentStageField .
• Se nenhum dos dois StageList nor StageListField está definido, nada é exibido.
• Se nenhum dos dois CurrentStage nor CurrentStageField está definido, txn.fase é usado por padrão.
• Se as versões estática e dinâmica estiverem presentes, a versão dinâmica terá precedência.

Tema

O componente oferece suporte a temas usando propriedades personalizadas de CSS. A tabela a seguir mostra uma lista não exaustiva de variáveis relevantes.

Variável	Descrição
--lgk-ProgressStep-chevron-tamanho	Tamanho geral da divisa
--lgk-ProgressStep-chevron-largura	Largura fixa para divisas
--lgk-ProgressStep-chevron-minWidth	Largura mínima por divisa
--lgk-ProgressStep-chevron-padding	Preenchimento dentro de cada divisa
--lgk-ProgressStep-chevron-disabled-opacity	Opacidade para divisas desabilitadas/inativas
--lgk-ProgressStep-Incomplete-backgroundColor	Plano de fundo para etapas incompletas
--lgk-ProgressStep-incompleto-chevron-cor	Cor do ícone de divisa para etapas incompletas
--lgk-ProgressStep-Current-backgroundColor	Plano de fundo da etapa atual
--lgk-ProgressStep-Corrente-chevron-cor	Cor do ícone de divisa da etapa atual
--lgk-ProgressStep-chevron-label-fontTamanho	Tamanho da fonte para rótulos de fase
--lgk-ProgressStep-chevron-label-FontWeight	Espessura da fonte para rótulos de fase

Dica:

Você pode inspecionar o elemento em seu navegador para explorar mais propriedades personalizadas.