Toolbar

Uso

Proyecta contenido en las zonas start, center, end y secondary. Usa wrap="wrap" cuando las acciones necesiten pasar a otras líneas en pantallas estrechas. size controla las dimensiones, density ajusta el espaciado y tone junto con variant elige la superficie. Toolbar no proporciona eventos de acción ni navegación mediante flechas.

Ejemplos

Prueba el comportamiento y consulta el código ejecutable en Código.

Prueba y configura

Cambia las opciones, prueba el resultado y consulta su template generado. Abre Código para ver la implementación completa.

<neu-toolbar
  size="md"
  density="normal"
  tone="neutral"
  variant="soft"
  wrap="wrap"
  [shadow]="false"
  [bordered]="false"
>
  <strong neu-toolbar-start>Pedidos</strong>
  <span neu-toolbar-center>Listos para procesar</span>
  <div neu-toolbar-end>
    <button
      neu-button
      size="sm"
      variant="solid"
      tone="brand"
      (neuClick)="count.update(increment)"
    >
      Exportar
    </button>
  </div>
</neu-toolbar>

Datos y contenido

Sus siete Inputs configuran el layout y la apariencia. Toolbar no tiene Outputs; los controles proyectados gestionan sus eventos. density utiliza compact, normal o relaxed, no los valores de data-neu-density global.

Accesibilidad y teclado

Usa botones nativos con etiquetas significativas para las acciones. El contenido sigue el orden normal de Tab. Este layout no implementa el patrón ARIA de toolbar con foco móvil; no añadas ese rol sin implementar su comportamiento de teclado.

API

Los Inputs y Outputs corresponden al paquete Core fijado. Los tipos con nombre enlazan a sus definiciones. Templates incluye ejemplos ejecutables de cada zona disponible.

Inputs

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

Public Types

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

import type { NeuDensity } from '@neural-ui/core';

// Declaración pública (solo referencia)
type NeuDensity = 'compact' | 'normal' | 'relaxed';

import type { NeuToolbarSize } from '@neural-ui/core/toolbar';

// Declaración pública (solo referencia)
export type NeuToolbarSize = 'sm' | 'md' | 'lg';

import type { NeuToolbarTone } from '@neural-ui/core/toolbar';

// Declaración pública (solo referencia)
export type NeuToolbarTone = 'neutral' | 'brand' | 'success' | 'info' | 'warning' | 'danger';

import type { NeuToolbarVariant } from '@neural-ui/core/toolbar';

// Declaración pública (solo referencia)
export type NeuToolbarVariant = 'solid' | 'soft' | 'ghost';

import type { NeuToolbarWrap } from '@neural-ui/core/toolbar';

// Declaración pública (solo referencia)
export type NeuToolbarWrap = 'nowrap' | 'wrap';

Estilos y tokens

Utiliza los tokens públicos de superficie, texto, espaciado y foco. Comprueba el contenido en ambos temas y con anchos reducidos.

Componentes relacionados

Combina estos componentes para construir la interfaz del entorno.

• Tabs
• Panel