chrome:seo.title.page

chrome:demo.preview

styles.css

@import '@xngui/styles';
@import '@xngui/styles/tailwind';
@import '@xngui/icons/fontawesome';

demo-preview:hints.category.navigation:

Tab

demo-preview:hints.category.focus:

Focus

demo-preview:hints.category.shortcuts:

Enter / Space

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

import { XCode } from '@xngui/components/code';

@Component({

selector: 'app-example',

imports: [XCode],

templateUrl: './code.component.html',

})

export class ExampleComponent {}

chrome:demo.events.empty

chrome:demo.api.title

chrome:demo.api.col.property

chrome:demo.api.col.type

chrome:demo.api.col.default

chrome:demo.api.col.description

size

XSize

—

Visual size tier — falls back to XConfigService when unset.

density

XDensity

—

Body and chrome padding offsets — orthogonal to `size`; falls back to XConfigService when unset.

filename

string

—

Editor chrome filename shown in the title bar.

title

string

—

Panel chrome title when not using editor filename chrome.

code

string

''

Plain source text when `lines` is unset.

lines

readonly XCodeLine[]

—

Structured lines with per-line syntax highlighting kinds.

copyable

boolean

true

Shows the copy button and enables clipboard copy.

chromeDots

boolean

true

Shows traffic-light dots in editor chrome.

lineCount

number

4

Placeholder line count for skeleton state when `code` and `lines` are empty.

ariaLabel

string

—

Accessible name when filename and title are unset.

generated:catalog.entry.code.title

chrome:demo.preview

chrome:demo.events.title

chrome:demo.api.title

x-code

chrome:demo.section

chrome:demo.preview

chrome:demo.events.title

chrome:demo.api.title