Diagram

Complete

Diagramas de flujo y organigramas dibujados como SVG. Los cuadros se colocan automáticamente por niveles según sus conexiones, o en las X e Y que usted indique. Con Editable, el usuario arrastra los cuadros o los mueve con las flechas. Cada conexión está disponible también como texto para los lectores de pantalla.

Ejemplo

Parámetros

Parámetro	Tipo	Descripción
`Class`	`string`	Clases CSS adicionales que se agregan al elemento raíz.
`Direction`	`DiagramDirection`	TopDown o LeftRight.
`Edges`	`IEnumerable<DiagramEdge>`	Elementos DiagramEdge(from, to, text) que enlazan identificadores de nodos.
`Editable`	`bool`	Permite que el usuario mueva cuadros.
`Height`	`Double`	Altura máxima del cuerpo de la cuadrícula, por ejemplo 24rem (28rem de forma predeterminada con VirtualScroll).
`Label`	`string`	Texto visible de la etiqueta (gráficos: nombre accesible; IconButton: nombre accesible y sugerencia).
`LevelSpacing`	`Double`	Espacio entre niveles.
`Nodes`	`IEnumerable<DiagramNode>`	Elementos DiagramNode(id, text, shape, x, y, accent). Formas: Process, Decision, Data, Terminal.
`NodeSpacing`	`Double`	Espacio entre cuadros de un mismo nivel.
`NodeWidth`	`Double`	Ancho de cada cuadro.
`ShowDataLabels`	`bool`	Escribe el valor en cada marca (barras, puntos de línea, sectores circulares).
`ShowExport`	`bool`	Agrega botones que guardan el gráfico como imagen PNG o SVG.
`ShowLegend`	`bool`	Muestra la leyenda en la que se puede hacer clic.
`Style`	`string`	Estilo en línea agregado al elemento raíz.
`ValueFormat`	`string`	Formato numérico para el eje y la información sobre herramientas, p. ej. N0 o P1.
`Width`	`Double`	Skeleton: cualquier longitud CSS. Charts: ancho del dibujo en unidades SVG (el gráfico sigue adaptándose a su contenedor).

Eventos

Evento	Tipo	Descripción
`OnNodeMoved`	`EventCallback<DiagramNodeMove>`	Se genera con el id y la nueva posición de un cuadro movido.

Paquete

Diagram forma parte de RayCraft Complete. Paquete: RayCraft.Blazor.Complete. Se obtiene del feed privado de RayCraft y requiere una licencia activa. Consulte Primeros pasos.

Enviar comentariosVersión 1.0.3