Diagram

Complete

Fluxogramas e organogramas desenhados como SVG. As caixas são posicionadas automaticamente em níveis a partir de suas conexões, ou nos X e Y que você indicar. Com Editable, o usuário arrasta as caixas ou as move com as setas. Cada conexão também está disponível como texto para leitores de tela.

Exemplo

Parâmetros

Parâmetro	Tipo	Descrição
`Class`	`string`	Classes CSS extras adicionadas ao elemento raiz.
`Direction`	`DiagramDirection`	TopDown ou LeftRight.
`Edges`	`IEnumerable<DiagramEdge>`	Itens DiagramEdge(from, to, text) que ligam ids de nós.
`Editable`	`bool`	Permite que o usuário mova caixas.
`Height`	`Double`	Altura máxima do corpo da grade, por exemplo 24rem (28rem por padrão com VirtualScroll).
`Label`	`string`	Texto visível do rótulo (gráficos: nome acessível; IconButton: nome acessível e dica de ferramenta).
`LevelSpacing`	`Double`	Espaço entre níveis.
`Nodes`	`IEnumerable<DiagramNode>`	Itens DiagramNode(id, text, shape, x, y, accent). Formas: Process, Decision, Data, Terminal.
`NodeSpacing`	`Double`	Espaço entre caixas do mesmo nível.
`NodeWidth`	`Double`	Largura de cada caixa.
`ShowDataLabels`	`bool`	Escreve o valor em cada marca (barras, pontos de linha, fatias de pizza).
`ShowExport`	`bool`	Adiciona botões que salvam o gráfico como imagem PNG ou SVG.
`ShowLegend`	`bool`	Mostra a legenda clicável.
`Style`	`string`	Estilo embutido adicionado ao elemento raiz.
`ValueFormat`	`string`	Formato numérico para o eixo e as dicas de ferramenta, p. ex. N0 ou P1.
`Width`	`Double`	Skeleton: qualquer comprimento CSS. Charts: largura do desenho em unidades SVG (o gráfico continua se ajustando ao seu contêiner).

Eventos

Evento	Tipo	Descrição
`OnNodeMoved`	`EventCallback<DiagramNodeMove>`	Gerado com o id e a nova posição de uma caixa movida.

Pacote

Diagram faz parte do RayCraft Complete. Pacote: RayCraft.Blazor.Complete. Vem do feed privado do RayCraft e requer uma licença ativa. Veja Primeiros passos.

Enviar feedbackVersão 1.0.3