CodeBlock

Uso

Proporciona texto de código a code. language genera una etiqueta reconocible; lang permite cambiar esa etiqueta, no el idioma del documento. wrap permite ajustar líneas largas; sin él, el cuerpo se desplaza horizontalmente. density cambia el espaciado. El código es texto escapado: este componente no lo ejecuta ni aplica resaltado de sintaxis.

Ejemplos

Prueba la interacción y abre Código para ver la implementación completa.

const saludo = 'Hola, Neural UI';
console.log(saludo);

Prueba y configura

Cambia las opciones, prueba el resultado y consulta el template actualizado. Código contiene el ejemplo ejecutable completo.

const saludo = 'Hola, Neural UI';
console.log(saludo);

<neu-code-block
  [code]="code()"
  language="typescript"
  density="normal"
  [wrap]="true"
  [copiedAriaLabel]="'Código del ejemplo copiado'"
  [copiedLabel]="'Copiado'"
  [copyAriaLabel]="'Copiar código del ejemplo'"
  [copyLabel]="'Copiar código'"
/>

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

export const code = signal("const saludo = 'Hola, Neural UI';\nconsole.log(saludo);");

Datos y contenido

El botón copia la cadena code exacta al portapapeles y confirma solo las copias correctas. Las etiquetas se pueden traducir. CodeBlock no tiene Outputs ni Templates; proporciona code y utiliza sus tokens públicos para personalizarlo.

Accesibilidad y teclado

Accede al botón de copia con Tab y actívalo con Intro o Espacio. Define copyAriaLabel y copiedAriaLabel de forma clara, especialmente con etiquetas visibles breves. El ajuste de línea facilita la lectura en pantallas estrechas; el código sin ajuste conserva un desplazamiento horizontal local.

API

Inputs y Outputs corresponden al paquete instalado. Los tipos con nombre enlazan a sus definiciones. Cada Template disponible tiene un ejemplo con Demo y Código.

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';

Estilos y tokens

Personaliza los tokens públicos disponibles y comprueba ambos temas. Las ilustraciones y el estado de los ejemplos no son Inputs de Core.

Componentes relacionados

Utiliza los componentes relacionados para completar tu interfaz.

• Panel
• Card