Todos los componentes (244)

Organigrama

Datos · OrganizationTree · .amset-org

Qué es y cuándo usarlo

Un organigrama: quién depende de quién, con su puesto y cuántas personas tiene a cargo.

Cuándo usarlo

La estructura de una empresa o de un departamento, para encontrar a alguien y ver de quién depende.
nodes es el árbol: cada persona con name, title, src y sus children.
layout="chart" pinta cajas de arriba abajo unidas por líneas (se desplaza de lado si es más ancho que la pantalla); layout="list", una lista sangrada para pantallas estrechas o árboles muy anchos.
defaultDepth dice hasta qué nivel sale desplegado; «Desplegar todo» y «Plegar todo» van arriba. onSelect abre la ficha de una persona.

Cuándo no

Un árbol de carpetas o categorías: Tree.
Editar la estructura arrastrando: aquí solo se consulta.

Teclado: es una sola parada del tabulador. Flechas arriba y abajo entre personas, derecha despliega o baja a su equipo, izquierda pliega o sube a su responsable, Inicio y Fin a los extremos, e Intro elige.

Accesibilidad: es un árbol de ARIA con nivel, posición y estado desplegado en cada persona; el número de personas a cargo va escrito.

Aspecto fino: variables --amset-org-line (el color de las líneas) y --amset-org-gap (la separación entre niveles).

Cómo se ve

Aitor MenaDirección3 personas a cargo
- Marta RuizVentas1 persona a cargo
  - Lucía FerrerTienda online
- Carla GilOperaciones

<OrganizationTree
  label="Equipo"
  nodes={organigrama}
  layout="chart"
  selectedId={elegido}
  onSelect={(nodo) => setElegido(nodo.id)}
/>

Props

Se importa con import { OrganizationTree } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Que organigrama es («Organigrama de Acme»). Obligatorio.
`nodes`obligatoria	`readonly OrgNode[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`defaultDepth`	`number`	Hasta que nivel sale desplegado al empezar. Por defecto, 2.
`layout`	`OrganizationLayout`	`chart`: cajas de arriba abajo con sus lineas. `list`: lista sangrada, para pantallas estrechas o arboles anchos.
`onSelect`	`(node: OrgNode) => void`	Al pulsar una persona (Intro o clic): abrir su ficha.
`selectedId`	`string`	La persona marcada como elegida.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-org-line`	`var(--amset-border-bold)`
`--amset-org-gap`	`var(--amset-space-4)`

Cómo se cambia

.amset-org {
  --amset-org-line: ...;
  --amset-org-gap: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: