Zum Hauptinhalt springen

Karten

Karten in Storybook

Beispiele​

Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design einer Karte und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Einfaches Beispiel​

Eine einfache Karte ist ein Container, in dem untergeordnete Komponenten in einem Feld angezeigt werden.

<Card>
  <span>Card text</span>
</Card>

Beispiel für eine Kopfzeile​

Mit den Eigenschaften title und subtitles können Sie einen entsprechend formatierten Kopfzeilentext in der Karte hinzufügen.

<Card
  title={'Card title'}
  subTitle={'Card subtitle'}>
  <span>Card text</span>
</Card>

Beispiel für eine Kopfzeilen-QuickInfo​

Sie können die Eigenschaft tooltips verwenden, um in der Karte eine verschachtelte QuickInfo hinzuzufügen. Diese QuickInfo wird an ein Symbol in der Kopfzeile der Karte angefügt und beim Klicken auf das Symbol gerendert.

const cardTooltip = {
    title: "Tooltip title",
    text: "Tooltip text"
}

<Card
title={"Card title"}
subTitle={"Card subtitle"}
tooltip={cardTooltip}>
    <span>Card content</span>
</Card>

Beispiel für ein Panel​

Sie können die Eigenschaft isPanel verwenden, um die Karte stattdessen wie ein älteres Panel zu formatieren.

<Card
  title={'Card title'}
  subTitle={'Card subtitle'}
  isPanel>
  <span>Card content</span>
</Card>