Beispiele

Mit Code-Beispiel

Invisible Docs

Ein UI-Framework für alles, was tricoma zeigt

Zentral definierte Bausteine, über Tokens umgestaltbar — konsumiert von Code und Dokumenten.

beispiel.php

echo invisible_render_id('ui.button', [
    'label' => 'Speichern',
]);

Nur Text

Die zwei Türen

PHP-Bibliothek für Anwendungen, Surface-JSON für redaktionelle Seiten.

Eigenschaften

Prop	Typ	Default	Builder-Label
eyebrow	string	""	Eyebrow (Zeile ueber dem Titel)
title *	string	—	Titel
lead	string	""	Leadtext
actions	array	[]	Aktionen
code	string	""	Code-Beispiel (optional, rechts)
filename	string	""	Dateiname des Beispiels

* Pflicht-Prop

Events & Slots

Events: ⚡ navigate — im Surface per on: {<event>: {action, params}} verdrahtbar.

Stellschrauben (Komponenten-Tokens)

Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.

Token	Default
`--docshero-code-muted`	`var(--color-code-muted)`
`--docshero-code-property`	`var(--color-code-property)`
`--docshero-code-surface`	`var(--color-code-surface)`
`--docshero-code-surface-raised`	`var(--color-code-surface-raised)`
`--docshero-code-text`	`var(--color-code-text)`
`--docshero-code-variable`	`var(--color-code-variable)`
`--docshero-radius-full`	`var(--radius-full)`

Genutzte Design-Tokens

border.hairlinecolor.code.mutedcolor.code.propertycolor.code.surfacecolor.code.surface-raisedcolor.code.textcolor.code.variableduration.fasteasing.standardfont.family.defaultleading.baseleading.tightradius.fullsize.10size.12size.2size.3size.4size.5size.6size.8text.lgtext.mdtext.smweight.boldweight.semibold