Gestalten Sie Ihre App

Sie können eine Stripe-App mit en von uns bereitgestellten Design-Token gestalten. So können Sie das Dashboard optisch anpassen, für Konsistenz sorgen und eine qualitativ hochwertige Leiste beibehalten.

• Die Komponenten Box und Inline unterstützen individuelle Stile.
• Andere Komponenten haben voreingestellte Stile, die Sie manchmal anpassen können.

Nutzerdefinierte Stile

Die Komponenten Box und Inline unterstützen individuelle Stile. Box und Inline sind gestaltbare Container wie HTML div und span. Um sie zu gestalten, verwenden Sie ihre css-Eigenschaft. Sie verwenden CSS-Syntax, mit einigen Unterschieden zu Vanilla CSS.

<Box
  css={{
    padding: 'xxlarge',
    color: 'secondary',
    backgroundColor: 'container',
    borderRadius: 'small',
  }}
>
  This is a box.
</Box>

Anders als bei Vanilla CSS können Sie nicht beliebige Schriftarten und -stile auswählen. Verwenden Sie die Eigenschaften font und fontWeight. Für weitere Informationen, siehe Typographie.

<Inline css={{font: 'body', color: 'primary', fontWeight: 'semibold'}}>
  This text is emphasized
</Inline>

Auch das Layout funktioniert anders als in Vanilla CSS. Stattdessen verwenden Stripe Apps das gleiche Layout-System, das Stripe intern verwendet. Für weitere Informationen, siehe Layout.

<Box
  css={{
    stack: 'x',
    gap: 'medium',
  }}
>
  <Box css={{width: '1/4', padding: 'medium', keyline: 'neutral'}} />
  <Box css={{width: '3/4', padding: 'medium', keyline: 'neutral'}} />
</Box>

Alle Designtoken werden über TypeScript verfügbar gemacht. Das heißt, Sie erhalten ein Dropdown-Menü im Editor für die automatische Vervollständigung aus den verfügbaren Werten.

Farbe

Legen Sie Farben in Ihren nutzerdefinierten Stilen mit den folgenden Werten fest.

Hintergründe

Um die Hintergrundfarbe einer Box oder Inline-Komponente einzustellen, verwenden Sie die CSS-Eigenschaft backgroundColor:

<Box css={{ backgroundColor: 'container' }}>
  Box with a darker background.
</Box>

Verwenden Sie die folgenden Token als Werte für backgroundColor:

Ränder

Um einer Box oder Inline Komponente einen Rand hinzuzufügen, verwenden Sie die CSS-Eigenschaft keyline:

<Box css={{ keyline: 'neutral' }}>
  Box with a neutral border.
</Box>

Verwenden Sie die folgenden Token als Werte für keyline:

Text und Symbole

Um eine Farbe für alle Texte oder Symbole in einer Box oder Inline Komponente festzulegen, verwenden Sie die CSS-Eigenschaft color:

<Box css={{ color: 'success' }}>
  Box with green text.
</Box>

Für ein Symbol, das sich von den anderen untergeordneten Elementen seines Containers abhebt, verwenden Sie fill. Andernfalls passen die Symbole zu dem sie umgebenden Text.

<Box css={{ color: 'primary' }}>
  <Icon css={{ fill: 'success' }}/>
  Box with normal text and a green icon.
</Box>

Verwenden Sie die folgenden Token als Werte für color und fill:

Typografie

Um den Stil von Text in einer Box oder Inline Komponente zu ändern, verwenden Sie die benutzerdefinierte Eigenschaft font:

<Inline css={{font: 'heading'}}>Heading</Inline>

Folgende Stile sind verfügbar:

Textüberlauf und -umbruch

Um zu ändern, wie Überlauftext in einer Box Komponente behandelt wird, verwenden Sie die Eigenschaften textOverflow, overflow, whiteSpace und overflowWrap:

<Box css={{textOverflow: 'ellipsis', overflow: 'hidden', overflowWrap: 'normal'}}>
  Box where long text is cut off with an ellipsis
</Box>

Weitere Szenarien für Überlauf und Textumbruch finden Sie unter Textumbruch und -umbruch.

Textumwandlung

Sie können Text in einer Box oder Inline Komponente mit der Eigenschaft textTransform umwandeln:

<Box css={{textTransform: 'uppercase'}}>
  Box where all text appears uppercase
</Box>

Hier sind einige übliche Werte, die für die Eigenschaft textTransform verwendet werden können:

Die vollständige Liste finden Sie unter text-transform.

Textausrichtung

Sie können die Ausrichtung von Text in einer Box-Komponente mit der Eigenschaft textAlign ändern:

<Box css={{textAlign: 'center'}}>
  Box where text is centered
</Box>

Verwenden Sie die folgenden Token als Werte für textAlign:

Layout

Mit den APIs von Stripe Apps zur Gestaltung des Layouts können Sie Stile schreiben, die unsere Designtoken nutzen können. Außerdem sind sie gegenüber Vanilla-CSS weiter optimiert. Verwenden Sie diese Token in einer Box-Komponente, um das Layout für ihre untergeordneten Elemente zu steuern. Andere Container, wie List, handhaben das Layout automatisch.

Wir konzeptualisieren Layouts als „Stacks“.

Horizontale Stacks

Elemente horizontal stapeln und Breiten anpassen:

<Box
  css={{
    stack: 'x',
    gap: 'medium',
    alignX: 'stretch', // This is the default and can be omitted
  }}
>

So stapeln Sie Elemente horizontal mit gebrochenen Breiten:

<Box
  css={{
    stack: 'x',
    gap: 'medium',
  }}
>
  <Box css={{width: '1/4', padding: 'medium', keyline: 'neutral'}} />
  <Box css={{width: '3/4', padding: 'medium', keyline: 'neutral'}} />
</Box>

So stapeln Sie Elemente horizontal mit einer gebrochenen Breite für ein Element bei Streckung der verbleibenden Elemente:

<Box
  css={{
    stack: 'x',
    gap: 'medium',
  }}
>
  <Box css={{padding: 'medium', keyline: 'neutral'}} />
  <Box css={{width: '1/4', padding: 'medium', keyline: 'neutral'}} />
  <Box css={{padding: 'medium', keyline: 'neutral'}} />
</Box>

So richten Sie Elemente so ein, dass sie mit einem Abstand beginnen:

<Box
  css={{
    stack: 'x',
    gap: 'medium',
    alignX: 'start',
  }}
>

So verteilen Sie Elemente:

<Box
  css={{
    stack: 'x',
    distribute: 'space-between',
  }}
>

So richten Sie Elemente so ein, dass sie mit einem Abstand enden:

<Box
  css={{
    stack: 'x',
    gap: 'medium',
    alignX: 'end',
  }}
>

So richten Sie Elemente vertikal nach unten aus:

<Box
  css={{
    stack: 'x',
    gap: 'medium',
    alignX: 'start',
    alignY: 'bottom',
  }}
>

So fügen Sie Trennlinien zwischen den Elementen ein:

<Box
  css={{
    stack: 'x',
    gap: 'small',
    alignX: 'start',
  }}
>
  <Box css={{padding: 'medium', keyline: 'neutral'}} />
  <Divider />
  <Box css={{padding: 'medium', keyline: 'neutral'}} />
  <Divider />
  <Box css={{padding: 'medium', keyline: 'neutral'}} />
</Box>

So brechen Sie Elemente in Zeilen um:

<Box
  css={{
    stack: 'x',
    gap: 'medium',
    wrap: 'wrap',
    alignX: 'start',
  }}
>

So richten Sie unterschiedliche horizontale und vertikale Abstände ein:

<Box
  css={{
    stack: 'x',
    gapX: 'small',
    gapY: 'large',
    wrap: 'wrap',
    alignX: 'start',
  }}
>

So zentrieren Sie Elemente beim Umbruch horizontal:

<Box
  css={{
    stack: 'x',
    gap: 'medium',
    wrap: 'wrap',
    alignX: 'center',
  }}
>

So zentrieren Sie Elemente beim Umbruch vertikal:

<Box
  css={{
    stack: 'x',
    gap: 'medium',
    wrap: 'wrap',
    alignX: 'start',
    alignY: 'center',
  }}
>

Vertikale Stacks

Elemente vertikal stapeln und Breiten anpassen:

<Box
  css={{
    stack: 'y',
    gap: 'medium',
  }}
>

So stapeln Sie Elemente vertikal und zentrieren sie horizontal:

<Box
  css={{
    stack: 'y',
    gap: 'medium',
    alignX: 'center',
  }}
>
  <Box css={{width: '1/4', padding: 'medium', keyline: 'neutral'}} />
  <Box css={{width: '2/3', padding: 'medium', keyline: 'neutral'}} />
  <Box css={{width: '1/3', padding: 'medium', keyline: 'neutral'}} />
</Box>

Geschichtete Stacks

So zeigen Sie Elemente übereinander an:

<Box
  css={{
    stack: 'z',
    alignX: 'center',
    alignY: 'center',
  }}
>
  <Box css={{padding: 'xxlarge', keyline: 'neutral'}} />
  <Box css={{padding: 'large', keyline: 'neutral'}} />
  <Box css={{padding: 'small', keyline: 'neutral'}} />
</Box>

Layouteigenschaften

Abstände

Sie können Ränder, Füllzeichen und Layoutabstände mithilfe der unten aufgeführten Werte angeben.

<Box css={{margin: 'small'}} />

Größenbestimmung

Sie können die Breite und Höhe mithilfe von Brüchen oder inhaltsbasierten Größentoken angeben.

<Box css={{width: '1/2'}} />

Fraktionale Größenbestimmung

Die verfügbaren Brüche umfassen Hälften, Drittel, Viertel, Fünftel, Sechstel und Zwölftel. Das fill-Token ermöglicht es einer Komponente, die Größe ihres Containers anzupassen.

Inhaltsbasierte Größenbestimmung

Sie können die Größe einer Box relativ zu ihrem Inhalt bestimmen.

Voreingestellte Stile

Andere Komponenten als Box und Inline haben voreingestellte Stile, wodurch die Konsistenz erhalten bleibt. Manchmal können Sie die Voreinstellungen auf eine bestimmte Weise steuern oder außer Kraft setzen.

Automatisches Design

Einige Komponenten gestalten sich automatisch. Zum Beispiel ändern Chips automatisch ihr Aussehen, je nachdem, welche Callbacks sie implementieren. Dies hilft Nutzer/innen, ihr Verhalten zu verstehen. Um Verwirrung zu vermeiden, können Sie diese Details nicht überschreiben.

<Box
  css={{
    backgroundColor: 'surface',
    padding: 'medium',
    borderRadius: 'medium',
  }}
>
  <ChipList>
    <Chip
      label="Currency"
      value="USD"
      onDropdown={() => {
        console.log('Dropdown function triggered');
      }}
      onClose={() => {
        console.log('Close function triggered');
      }}
    />
    <Chip
      label="Status"
      value="Succeeded"
      onDropdown={() => {
        console.log('Dropdown function triggered');
      }}
      onClose={() => {
        console.log('Close function triggered');
      }}
    />
    <Chip
      label="Amount"
      onAddSuggestion={() => {
        console.log('Add Amount suggestion');
      }}
    />
    <Chip
      label="Date"
      onAddSuggestion={() => {
        console.log('Add Date suggestion');
      }}
    />
  </ChipList>
</Box>

Mehrere Voreinstellungen

Einige Komponenten, wie z. B. Schaltflächen, verfügen über einige Stile, die Sie über eine Eigenschaft auswählen können. Einzelheiten finden Sie in der Dokumentation der jeweiligen Komponente.

<Button type="primary">Primary</Button>
<Button>Secondary</Button>
<Button type="destructive">Destructive</Button>

Beschränktes CSS

Einige Komponenten unterstützen bestimmte CSS-Eigenschaften. Zum Beispiel unterstützen Symbole die Farbe mit der Eigenschaft fill. Einzelheiten finden Sie in der Dokumentation der jeweiligen Komponente.

<Icon name="cancelCircle" css={{fill: 'critical'}} />