Saltar al contenido principal
NeuralUIv1.14.3Nuevo
GitHub
Componente

Code Block

Bloque de código con resaltado de sintaxis, indicador de lenguaje y botón de copia al portapapeles. Todos los textos visibles son configurables para la internacionalización.

TypeScript
import { NeuCodeBlockComponent } from '@neural-ui/core/code-block';

TypeScript

TypeScript
import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>{{ title() }}</h1>`
})
export class AppComponent {
  title = signal('NeuralUI');
}

HTML

HTML
<neu-stats-card
  title="Revenue"
  value="$48,295"
  change="+12.5%"
  trend="up"
  [sparkData]="data"
/>

SCSS

SCSS
.my-component {
  display: flex;
  gap: var(--neu-space-4);
  padding: var(--neu-space-6);
  background: var(--neu-surface);
  border-radius: var(--neu-radius-lg);
}
TypeScript
import { NeuCodeBlockComponent } from '@neural-ui/core/code-block';

@Component({
  imports: [NeuCodeBlockComponent],
  template: `
    <neu-code-block [code]="snippet" lang="TypeScript" />
  `
})
export class MyComponent {
  snippet = `const x = 1;`;
}