Tree View — klin

Vista previa#

Vista anidada con details. Demo completa con datos realistas, renderizada en el servidor. Más abajo están las configuraciones, una por una.

Registro civilOficialía 013
- Acta de nacimientoCopia certificada45
- Acta de matrimonioRegistro y copias18
- CURPTrámite gratuito120
CatastroDirección de ingresos2
- PredialPago anual y parcialidades340
- Traslado de dominioRequiere avalúo vigente27
Obras públicasVentanilla técnica2
- Licencia de construcciónObra menor y mayor
- Permiso de banquetaReparación y rampas

Ejemplos#

Todas las configuraciones del componente, cada una viva y con datos propios. Cambia entre Preview y Code en cada tarjeta y copia lo que necesites.

Centro de saludTurno matutino2
- Consulta generalFichas 8:00 a 10:0030
- VacunaciónCartilla vigente50
DentalPrevia cita1
- LimpiezaMartes y jueves

servicios de salud abiertos con insignias y detalle

Actas
- Nacimiento
- Matrimonio
- Defunción
Oficios2024 a 2026
- Entrantes
- Salientes

archivo municipal colapsado al cargar

Uso#

Ejemplo mínimo con las props requeridas. Copia, pega y cambia los datos:

import { TreeView } from "@carlos-burelo/klin";
import "@carlos-burelo/klin/styles.css";
 
<TreeView
  items={/* … */}
  ariaLabel="Tree View"
/>

SSR-first

La gráfica es función pura de props a SVG: el HTML llega renderizado y sin JS se ve completa. Envuelve en ChartTooltipPortal solo si quieres tooltip rico; sin JS queda \<title\> nativo. Lee la guía /docs/ssr-first una vez y listo.

Código de esta demo#

Ver fuente (src/demos/tree-view.tsx)

import type { TreeItem } from "@carlos-burelo/klin";
import { TreeView } from "@carlos-burelo/klin";
 
const items: TreeItem[] = [
  {
    label: "Registro civil",
    detail: "Oficialía 01",
    badge: 3,
    children: [
      { label: "Acta de nacimiento", detail: "Copia certificada", badge: 45 },
      { label: "Acta de matrimonio", detail: "Registro y copias", badge: 18 },
      { label: "CURP", detail: "Trámite gratuito", badge: 120 },
    ],
  },
  {
    label: "Catastro",
    detail: "Dirección de ingresos",
    badge: 2,
    children: [
      { label: "Predial", detail: "Pago anual y parcialidades", badge: 340 },
      {
        label: "Traslado de dominio",
        detail: "Requiere avalúo vigente",
        badge: 27,
      },
    ],
  },
  {
    label: "Obras públicas",
    detail: "Ventanilla técnica",
    badge: 2,
    children: [
      { label: "Licencia de construcción", detail: "Obra menor y mayor" },
      { label: "Permiso de banqueta", detail: "Reparación y rampas" },
    ],
  },
];
 
export default function TreeViewDemo() {
  return (
    <TreeView
      items={items}
      ariaLabel="Catálogo de trámites municipales por dependencia"
    />
  );
}

Props#

8 props · 2 requeridas

Prop	Tipo	Descripción
items req	TreeItem[]	Elementos a renderizar (filas, columnas o tareas según el componente).
ariaLabel req	string	Etiqueta descriptiva del SVG (role=img). Describe la conclusión, no solo el tipo.
defaultOpen opc	boolean	Abre el primer nivel al cargar.
emptyTitle opc	string	Título del estado vacío (por defecto EMPTY_TITLE).
emptyDescription opc	string	Descripción del estado vacío.
className opc	string	Clase extra en el contenedor (aditivo, no rompe estilos).
style opc	CSSProperties	Estilos inline extra en el contenedor.
ariaDescribedBy opc	string	Id de un texto largo que describe la gráfica (opcionales detalles).

Tipo completo: TreeViewProps en tree-view.tsx.

Accesibilidad#

Toda gráfica exige ariaLabel descriptivo; el SVG usa role="img" con \<title\>.
Cada forma lleva \<title\> nativo (tooltip sin JS) y data-chart-tip para el portal rico.
Sin datos se renderiza estado vacío homogéneo (ChartEmpty), nunca SVG roto.
Detalle del contrato en /docs/accesibilidad.

Recursos#

Fuente del componente: tree-view.tsx
Guías: SSR-first · Tema · Tooltip