-
-
Notifications
You must be signed in to change notification settings - Fork 522
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into i18n-ref-ove
- Loading branch information
Showing
30 changed files
with
3,303 additions
and
561 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,150 @@ | ||
--- | ||
title: Abzeichen | ||
description: Lerne, wie du in Starlight Abzeichen verwenden kannst, um zusätzliche Informationen anzuzeigen. | ||
--- | ||
|
||
import { Badge } from '@astrojs/starlight/components'; | ||
|
||
Um wenige Informationen, wie z.B. einen Status oder eine Kategorie, anzuzeigen, verwende die Komponente `<Badge>`. | ||
|
||
import Preview from '~/components/component-preview.astro'; | ||
|
||
<Preview> | ||
|
||
<Badge slot="preview" text="Neu" /> | ||
|
||
</Preview> | ||
|
||
## Import | ||
|
||
```tsx | ||
import { Badge } from '@astrojs/starlight/components'; | ||
``` | ||
|
||
## Verwendung | ||
|
||
Zeige ein Abzeichen mit der Komponente `<Badge>` an und übergib den Inhalt, den du anzeigen möchtest, an das Attribut [`text`](#text) der Komponente `<Badge>`. | ||
|
||
Standardmäßig wird für das Abzeichen die Akzentfarbe des Aussehens deiner Website verwendet. | ||
Um eine eingebaute Abzeichen-Farbe zu verwenden, setze das Attribut [`variant`](#variant) auf einen der unterstützten Werte. | ||
|
||
<Preview> | ||
|
||
```mdx | ||
import { Badge } from '@astrojs/starlight/components'; | ||
|
||
<Badge text="Hinweis" variant="note" /> | ||
<Badge text="Erfolg" variant="success" /> | ||
<Badge text="Tipp" variant="tip" /> | ||
<Badge text="Warnung" variant="caution" /> | ||
<Badge text="Gefahr" variant="danger" /> | ||
``` | ||
|
||
<Fragment slot="markdoc"> | ||
|
||
```markdoc | ||
{% badge text="Hinweis" variant="note" /%} | ||
{% badge text="Erfolg" variant="success" /%} | ||
{% badge text="Tipp" variant="tip" /%} | ||
{% badge text="Warnung" variant="caution" /%} | ||
{% badge text="Gefahr" variant="danger" /%} | ||
``` | ||
|
||
</Fragment> | ||
|
||
<Fragment slot="preview"> | ||
<Badge text="Hinweis" variant="note" /> | ||
<Badge text="Erfolg" variant="success" /> | ||
<Badge text="Tipp" variant="tip" /> | ||
<Badge text="Warnung" variant="caution" /> | ||
<Badge text="Gefahr" variant="danger" /> | ||
</Fragment> | ||
|
||
</Preview> | ||
|
||
### Verschiedene Größen verwenden | ||
|
||
Verwende das Attribut [`size`](#size), um die Größe des Abzeichentextes zu steuern. | ||
|
||
<Preview> | ||
|
||
```mdx /size="\w+"/ | ||
import { Badge } from '@astrojs/starlight/components'; | ||
|
||
<Badge text="Neu" size="small" /> | ||
<Badge text="Neu und verbessert" size="medium" /> | ||
<Badge text="Neu, verbessert und größer" size="large" /> | ||
``` | ||
|
||
<Fragment slot="markdoc"> | ||
|
||
```markdoc /size="\w+"/ | ||
{% badge text="Neu" size="small" /%} | ||
{% badge text="Neu und verbessert" size="medium" /%} | ||
{% badge text="Neu, verbessert und größer" size="large" /%} | ||
``` | ||
|
||
</Fragment> | ||
|
||
<Fragment slot="preview"> | ||
<Badge text="Neu" size="small" /> | ||
<Badge text="Neu und verbessert" size="medium" /> | ||
<Badge text="Neu, verbessert und größer" size="large" /> | ||
</Fragment> | ||
|
||
</Preview> | ||
|
||
### Abzeichen anpassen | ||
|
||
Passe Abzeichen an, indem du andere `<span>`-Attribute wie `class` oder `style` mit benutzerdefiniertem CSS verwendest. | ||
|
||
<Preview> | ||
|
||
```mdx "style={{ fontStyle: 'italic' }}" | ||
import { Badge } from '@astrojs/starlight/components'; | ||
|
||
<Badge text="Individuell" variant="success" style={{ fontStyle: 'italic' }} /> | ||
``` | ||
|
||
<Fragment slot="markdoc"> | ||
|
||
```markdoc 'style="font-style: italic;"' | ||
{% badge text="Individuell" variant="success" style="font-style: italic;" /%} | ||
``` | ||
|
||
</Fragment> | ||
|
||
<Badge | ||
slot="preview" | ||
text="Individuell" | ||
variant="success" | ||
style={{ fontStyle: 'italic' }} | ||
/> | ||
|
||
</Preview> | ||
|
||
## `<Badge>`-Eigenschaften | ||
|
||
**Implementation:** [`Badge.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Badge.astro) | ||
|
||
Die `<Badge>`-Komponente akzeptiert die folgenden Eigenschaften und auch alle [anderen `<span>`-Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes): | ||
|
||
### `text` | ||
|
||
**Erforderlich** | ||
**Typ:** `string` | ||
|
||
Der Textinhalt, der in dem Abzeichen angezeigt werden soll. | ||
|
||
### `variant` | ||
|
||
**Typ:** `'note' | 'danger' | 'success' | 'caution' | 'tip' | 'default'` | ||
**Voreinstellung:** `'default'` | ||
|
||
Die zu verwendende Farbvariante des Abzeichens: `note` (blau), `tip` (lila), `danger` (rot), `caution` (orange), `success` (grün) oder `default` (Akzentfarbe des Aussehens). | ||
|
||
### `size` | ||
|
||
**Typ:** `'small' | 'medium' | 'large'` | ||
|
||
Bestimmt die Größe des anzuzeigenden Abzeichens. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,110 @@ | ||
--- | ||
title: Karten | ||
description: Lerne, wie du in Starlight Karten verwenden kannst, um Inhalte in einer Box anzuzeigen. | ||
sidebar: | ||
order: 2 | ||
--- | ||
|
||
import { Card } from '@astrojs/starlight/components'; | ||
|
||
Um Inhalte in einer Box anzuzeigen, die den Stilen von Starlight entspricht, verwende die Komponente `<Card>`. | ||
|
||
import Preview from '~/components/component-preview.astro'; | ||
|
||
<Preview> | ||
|
||
<Card slot="preview" title="Monde" icon="moon"> | ||
Io, Europa, Ganymed | ||
</Card> | ||
|
||
</Preview> | ||
|
||
## Import | ||
|
||
```tsx | ||
import { Card } from '@astrojs/starlight/components'; | ||
``` | ||
|
||
## Verwendung | ||
|
||
Zeige eine Karte an, indem du die Komponente `<Card>` verwendest und einen [`title`](#title) für die Karte angibst. | ||
|
||
<Preview> | ||
|
||
```mdx | ||
import { Card } from '@astrojs/starlight/components'; | ||
|
||
<Card title="Schau dir das an"> | ||
Interessante Inhalte, die du hervorheben möchtest. | ||
</Card> | ||
``` | ||
|
||
<Fragment slot="markdoc"> | ||
|
||
```markdoc | ||
{% card title="Schau dir das an" %} | ||
Interessante Inhalte, die du hervorheben möchtest. | ||
{% /card %} | ||
``` | ||
|
||
</Fragment> | ||
|
||
<Card slot="preview" title="Schau dir das an"> | ||
Interessante Inhalte, die du hervorheben möchtest. | ||
</Card> | ||
|
||
</Preview> | ||
|
||
### Hinzufügen von Symbolen zu Karten | ||
|
||
Füge ein Symbol in eine Karte ein, indem du das Attribut [`icon`](#icon) auf den Namen [eines von Starlights eingebauten Symbolen](/de/reference/icons/#alle-symbole) setzt. | ||
|
||
<Preview> | ||
|
||
```mdx 'icon="star"' | ||
import { Card } from '@astrojs/starlight/components'; | ||
|
||
<Card title="Sterne" icon="star"> | ||
Sirius, Wega, Betelgeuse | ||
</Card> | ||
``` | ||
|
||
<Fragment slot="markdoc"> | ||
|
||
```markdoc 'icon="star"' | ||
{% card title="Sterne" icon="star" %} | ||
Sirius, Wega, Betelgeuse | ||
{% /card %} | ||
``` | ||
|
||
</Fragment> | ||
|
||
<Card slot="preview" title="Sterne" icon="star"> | ||
Sirius, Wega, Betelgeuse | ||
</Card> | ||
|
||
</Preview> | ||
|
||
### Karten gruppieren | ||
|
||
Zeige mehrere Karten nebeneinander an, wenn genügend Platz vorhanden ist, indem du sie mit der Komponente [`<CardGrid>`](/de/components/card-grids/) gruppierst. | ||
Siehe die Anleitung [„Karten gruppieren“](/de/components/card-grids/#karten-gruppieren) für ein Beispiel. | ||
|
||
## `<Card>`-Eigenschaften | ||
|
||
**Implementation:** [`Card.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Card.astro) | ||
|
||
Die Komponente `<Card>` akzeptiert die folgenden Eigenschaften: | ||
|
||
### `title` | ||
|
||
**erforderlich** | ||
**Typ:** `string` | ||
|
||
Der Titel der anzuzeigenden Karte. | ||
|
||
### `icon` | ||
|
||
**Typ:** `string` | ||
|
||
Eine Karte kann ein `icon`-Attribut enthalten, das auf den Namen [eines von Starlights eingebauten Icons](/de/reference/icons/#alle-symbole) gesetzt ist. |
Oops, something went wrong.