z-uiDesign system
Componentes · z-ui

Gantt

Linha do tempo de etapas com barras, progresso dentro da barra, marcos e dependências desenhadas em SVG. A coluna com o nome fica fixa enquanto a linha do tempo rola na horizontal. Uma tabela equivalente fica disponível para leitores de tela.

Ciclo de um contrato

Da redação ao registro. A linha vermelha marca hoje e a escala troca entre dia, semana e mês. Clique numa barra ou num marco para abrir a etapa.

Etapa
Redação da minutaJurídico interno
Revisão jurídicaLuísa Andrade
Minuta aprovada
Envio do envelopeOperações
Coleta das assinaturas4 signatários
Registro em cartórioCartório do 2º Ofício
Contrato vigente
Cronograma do contrato de prestação de serviços
EtapaInícioFimProgressoDepende de
Redação da minuta1 de outubro de 20267 de outubro de 2026100%—
Revisão jurídica8 de outubro de 202616 de outubro de 202670%Redação da minuta
Minuta aprovada (marco)19 de outubro de 202619 de outubro de 2026—Revisão jurídica
Envio do envelope19 de outubro de 202620 de outubro de 20260%Minuta aprovada
Coleta das assinaturas20 de outubro de 202630 de outubro de 20260%Envio do envelope
Registro em cartório3 de novembro de 20266 de novembro de 20260%Coleta das assinaturas
Contrato vigente (marco)9 de novembro de 20269 de novembro de 2026—Registro em cartório

Nenhuma etapa aberta.

Escala por dia

Na escala de dia, os fins de semana ficam em fundo sutil. Sem onTaskClick, as barras são imagens com nome acessível.

Etapa do aditivo
Pedido de aditivo
Ajuste de cláusulas
Assinatura do aditivo
Aditivo arquivado
Cronograma do aditivo contratual 02
Etapa do aditivoInícioFimProgressoDepende de
Pedido de aditivo5 de outubro de 20266 de outubro de 2026100%—
Ajuste de cláusulas7 de outubro de 202613 de outubro de 2026100%Pedido de aditivo
Assinatura do aditivo14 de outubro de 202617 de outubro de 202650%Ajuste de cláusulas
Aditivo arquivado (marco)19 de outubro de 202619 de outubro de 2026—Assinatura do aditivo

Props

PropTipoPadrãoDescrição
tasksGanttTask[]—{ id, name, start, end, progress?, tone?, milestone?, dependsOn?, owner? }.
scale"day" | "week" | "month"—Escala controlada. Use com onScaleChange.
defaultScale"day" | "week" | "month""week"Escala inicial quando não controlada.
todayDatenew Date()Posição da linha de hoje. A linha do tempo rola até ela ao abrir.
showTodaybooleantrueMostra a linha e o rótulo de hoje.
onTaskClick(task) => void—Torna barras e marcos botões.
labelstring"Cronograma"Nome acessível do gráfico e legenda da tabela equivalente.
nameColumnLabelstring"Etapa"Título da coluna fixa.