Benutzerdefinierte Komponenten

Jeder Funktionsaufruf in Tiramisu, der keiner eingebauten Funktion entspricht, wird automatisch zu einer benutzerdefinierten Svelte-Komponente. So können Sie Ihre Dokumentation mit interaktiven Widgets, benutzerdefinierten Layouts oder jeder beliebigen UI erweitern, die Sie mit Svelte erstellen können.

So funktioniert es

Wenn der Tiramisu-Compiler auf einen unbekannten Funktionsnamen trifft, generiert er nach Konvention einen Import für eine Svelte-Komponente:

• myWidget { } importiert src/lib/components/tiramisu/MyWidget.svelte
• apiPlayground { } importiert src/lib/components/tiramisu/ApiPlayground.svelte
• videoPlayer { } importiert src/lib/components/tiramisu/VideoPlayer.svelte

Der Funktionsname wird für den Komponentendateinamen in PascalCase umgewandelt.

Parameter werden zu Props

Benannte Parameter im Funktionsaufruf werden zu Komponenten-Props. Positionaler Inhalt wird zum Standard-Slot (children):

myCard {
  title = My Feature,
  icon = rocket,
  This is the card body content with bold { bold text } and other formatting.
}

Dies entspricht:

<MyCard title="My Feature" icon="rocket">
  <p>This is the card body content with <strong>bold text</strong> and other formatting.</p>
</MyCard>

Eine Komponente erstellen

Definieren Sie Ihre Komponente mit den erwarteten Props:

<script>
  let { title, icon, children } = $props()
</script>

<div class="my-card">
  <h3>{title}</h3>
  {@render children()}
</div>

<style>
  .my-card {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
  }
</style>

Verwenden Sie sie dann in jeder .tiramisu-Datei:

myCard {
  title = Hello World,
  This content will be rendered as children.
}

Eingebaute Komponenten überschreiben

Alle Komponenten — Layout und eingebaute — werden über eine Barrel-Datei unter src/lib/components/index.ts importiert. Diese Datei re-exportiert die Kit-Standardwerte:

// src/lib/components/index.ts
export { default as DocsLayout } from "@tiramisu-docs/kit/components/DocsLayout.svelte"
export { default as CodeBlock } from "@tiramisu-docs/kit/components/tiramisu/CodeBlock.svelte"
export { default as Callout } from "@tiramisu-docs/kit/components/tiramisu/Callout.svelte"
// ... other components

Um eine beliebige Komponente zu überschreiben, erstellen Sie Ihre eigene Version und ändern Sie den Export:

// Before
export { default as Callout } from "@tiramisu-docs/kit/components/tiramisu/Callout.svelte"

// After
export { default as Callout } from "./MyCallout.svelte"

Ihre benutzerdefinierte Komponente erhält die gleichen Props wie die eingebaute Version. Dies funktioniert für jede Komponente — Layout-Komponenten wie DocsLayout und DocPage oder eingebaute Inhaltskomponenten wie CodeBlock, Tabs und NavCard.