DashboardGrid

Uso

Asigna un id estable a cada tarjeta y proyecta un elemento renderizado con data-tile-id coincidente. No uses un ng-template sin instanciar como contenido de tarjeta. cols y rows definen la extensión; columns define la cuadrícula. Acepta orderChange sustituyendo tiles. Arrastre y flechas proponen el mismo orden sin modificar tu array.

Ejemplos

Prueba esta interacción gestionada por la aplicación. Código incluye los eventos y los datos iniciales.

Prueba y configura

Cambia las opciones públicas, prueba el resultado y consulta el template actualizado. Código contiene la implementación ejecutable completa.

<neu-dashboard-grid
  [tiles]="localizedTiles()"
  [columns]="2"
  (orderChange)="tiles.set($event); record('orderChange', $event)"
  ><div data-tile-id="sales">
    <strong>24.800 €</strong>
    <p>{{ t("Monthly sales", "Ventas mensuales") }}</p>
  </div>
  <div data-tile-id="orders">
    <strong>128</strong>
    <p>{{ t("Open orders", "Pedidos abiertos") }}</p>
  </div>
  <div data-tile-id="customers">
    <strong>86</strong>
    <p>{{ t("Active customers", "Clientes activos") }}</p>
  </div></neu-dashboard-grid
>

import { signal } from '@angular/core';

export const localizedTiles = signal([
  {
    "id": "sales",
    "title": "Ventas",
    "cols": undefined
  },
  {
    "id": "orders",
    "title": "Pedidos",
    "cols": undefined
  },
  {
    "id": "customers",
    "title": "Clientes",
    "cols": undefined
  }
]);

Estado y eventos

Asigna un id estable a cada tarjeta y proyecta un elemento renderizado con data-tile-id coincidente. No uses un ng-template sin instanciar como contenido de tarjeta. cols y rows definen la extensión; columns define la cuadrícula. Acepta orderChange sustituyendo tiles. Arrastre y flechas proponen el mismo orden sin modificar tu array.

Accesibilidad y teclado

Tab alcanza los controles de las tarjetas. Las flechas reordenan la tarjeta enfocada; Escape cancela un arrastre activo.

API

Inputs, modelos y Outputs se extraen del paquete Core instalado. Los tipos públicos enlazan a sus definiciones. Los Templates incluyen ejemplos ejecutables.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

import type { NeuDashboardTileConfig } from '@neural-ui/core/dashboard-grid';

// Declaración pública (solo referencia)
export interface NeuDashboardTileConfig {
  cols?: number;
  id: string;
  rows?: number;
  title?: string;
}

Estilos y tokens

Usa los tokens públicos de la referencia. El diseño del contenedor pertenece a tu aplicación; comprueba el resultado en modo claro y oscuro y en espacios estrechos.

Componentes relacionados

Consulta los componentes relacionados cuando necesites otra interacción o un control compuesto.

• Compare
• CompareHandle
• CompareIndicator