# Gestalten Sie Ihre App

Finden Sie heraus, wie Sie UI-Komponenten in Ihrer App formatieren.

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](https://docs.stripe.com/stripe-apps/style.md#custom-styles).
- Andere Komponenten haben [voreingestellte Stile](https://docs.stripe.com/stripe-apps/style.md#preset-styles), die Sie manchmal anpassen können.

## Nutzerdefinierte Stile

Die Komponenten [Box](https://docs.stripe.com/stripe-apps/components/box.md) und [Inline](https://docs.stripe.com/stripe-apps/components/inline.md) 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.

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](https://docs.stripe.com/stripe-apps/style.md#typograpphy).

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](https://docs.stripe.com/stripe-apps/style.md#layout).

```jsx
<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](https://docs.stripe.com/stripe-apps/components/box.md) oder [Inline](https://docs.stripe.com/stripe-apps/components/inline.md)-Komponente einzustellen, verwenden Sie die CSS-Eigenschaft `backgroundColor`:

```jsx
<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](https://docs.stripe.com/stripe-apps/components/box.md) oder [Inline](https://docs.stripe.com/stripe-apps/components/inline.md) Komponente einen Rand hinzuzufügen, verwenden Sie die CSS-Eigenschaft `keyline`:

```jsx
<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](https://docs.stripe.com/stripe-apps/components/box.md) oder [Inline](https://docs.stripe.com/stripe-apps/components/inline.md) Komponente festzulegen, verwenden Sie die CSS-Eigenschaft `color`:

```jsx
<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.

```jsx
<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](https://docs.stripe.com/stripe-apps/components/box.md) oder [Inline](https://docs.stripe.com/stripe-apps/components/inline.md) Komponente zu ändern, verwenden Sie die benutzerdefinierte Eigenschaft `font`:

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

Folgende Stile sind verfügbar:

### Textüberlauf und -umbruch

Um zu ändern, wie Überlauftext in einer [Box](https://docs.stripe.com/stripe-apps/components/box.md) Komponente behandelt wird, verwenden Sie die Eigenschaften `textOverflow`, `overflow`, `whiteSpace` und `overflowWrap`:

```jsx
<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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text).

### Textumwandlung

Sie können Text in einer [Box](https://docs.stripe.com/stripe-apps/components/box.md) oder [Inline](https://docs.stripe.com/stripe-apps/components/inline.md) Komponente mit der Eigenschaft `textTransform` umwandeln:

```jsx
<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](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform).

### Textausrichtung

Sie können die Ausrichtung von Text in einer [Box](https://docs.stripe.com/stripe-apps/components/box.md)-Komponente mit der Eigenschaft `textAlign` ändern:

```jsx
<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](https://docs.stripe.com/stripe-apps/components/box.md)-Komponente, um das Layout für ihre untergeordneten Elemente zu steuern. Andere Container, wie [List](https://docs.stripe.com/stripe-apps/components/list.md), handhaben das Layout automatisch.

Wir konzeptualisieren Layouts als „Stacks“.

### Horizontale Stacks

Elemente horizontal stapeln und Breiten anpassen:

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

So stapeln Sie Elemente horizontal mit gebrochenen Breiten:

```jsx
<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:

```jsx
<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:

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

So verteilen Sie Elemente:

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

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

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

So richten Sie Elemente vertikal nach unten aus:

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

So fügen Sie Trennlinien zwischen den Elementen ein:

```jsx
<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:

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

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

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

So zentrieren Sie Elemente beim Umbruch horizontal:

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

So zentrieren Sie Elemente beim Umbruch vertikal:

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

### Vertikale Stacks

Elemente vertikal stapeln und Breiten anpassen:

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

So stapeln Sie Elemente vertikal und zentrieren sie horizontal:

```jsx
<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:

```jsx
<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

| Eigenschaft             | Werte                                                                 |
| ----------------------- | --------------------------------------------------------------------- |
| `alignX`                | `'start' | 'center' | 'end' | 'stretch'`                              |
| `alignY`                | `'top' | 'center' | 'baseline' | 'bottom' | 'stretch'`                |
| `distribute`            | `'space-between' | 'packed'`                                          |
| `gap`                   | Siehe [Abstand](https://docs.stripe.com/stripe-apps/style.md#spacing) |
| `overflowX | overflowY` | `'visible' | 'hidden' | 'scroll' | 'auto'`                            |
| `stack`                 | `'x' | 'y' | 'z'`                                                     |
| `wrap`                  | `'wrap'`                                                              |

## Abstände

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

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

| Token     | Wert     |
| --------- | -------- |
| `0`       | 0 Pixel  |
| `xxsmall` | 2 Pixel  |
| `xsmall`  | 4 Pixel  |
| `small`   | 8 Pixel  |
| `medium`  | 16 Pixel |
| `large`   | 24 Pixel |
| `xlarge`  | 32 Pixel |
| `xxlarge` | 48 Pixel |

## Größenbestimmung

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

```jsx
<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.

| Token                                                                                    | Wert                                                                                                                    |
| ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| `0`                                                                                      | 0 Pixel                                                                                                                 |
| `1/2`                                                                                    | 50&nbsp;%                                                                                                               |
| `1/3`, `2/3`                                                                             | 33,333333 %, 66,666667 %                                                                                                |
| `1/4`, `2/4`, `3/4`,                                                                     | 25 %, 50 %, 75 %                                                                                                        |
| `1/5`, `2/5`, `3/5`, `4/5`                                                               | 20 %, 40 %, 60 %, 80 %                                                                                                  |
| `1/6`, `2/6`, `3/6`, `4/6`, `5/6`                                                        | 16,666667 %, 33,333333 %, 50 %, 66,666667 %, 83,333333 %                                                                |
| `1/12`, `2/12`, `3/12`, `4/12`, `5/12`, `6/12`, `7/12`, `8/12`, `9/12`, `10/12`, `11/12` | 8,333333 %, 16.,666667 %, 25 %, 33,333333 %, 41,666667 %, 50%, 58,333333 %, 66,666667 %, 75 %, 83,333333 %, 91,666667 % |
| `fill`                                                                                   | 100 %                                                                                                                   |

### Inhaltsbasierte Größenbestimmung

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

| Token | Nutzung                                                                                                                                                                                 |
| ----- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `min` | Der Inhalt innerhalb der Komponente nutzt alle Umbruchmöglichkeiten und wird so klein wie die längsten Inhalte.                                                                         |
| `max` | Stellt die maximal mögliche Breite des Inhalts dar. Bei Anwendung auf Text findet kein Zeilenumbruch statt, selbst wenn der Text dadurch über die Grenzen seines Containers hinausgeht. |
| `fit` | Füllt den verfügbaren Platz aus, aber nur bis zur maximalen Größe des Inhalts.                                                                                                          |

## 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](https://docs.stripe.com/stripe-apps/components/chip.md) 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.

### Mehrere Voreinstellungen

Einige Komponenten, wie z.&nbsp;B. [Schaltflächen](https://docs.stripe.com/stripe-apps/components/button.md), verfügen über einige Stile, die Sie über eine Eigenschaft auswählen können. Einzelheiten finden Sie in der Dokumentation der jeweiligen Komponente.

### Beschränktes CSS

Einige Komponenten unterstützen bestimmte CSS-Eigenschaften. Zum Beispiel unterstützen [Symbole](https://docs.stripe.com/stripe-apps/components/icon.md) die Farbe mit der Eigenschaft `fill`. Einzelheiten finden Sie in der Dokumentation der jeweiligen Komponente.

## See also

- [Dokumentation zur Extension SDK API](https://docs.stripe.com/stripe-apps/reference/extensions-sdk-api.md)
- [Bestandteile der Stripe-Apps-Nutzeroberfläche](https://docs.stripe.com/stripe-apps/components.md)
- [Nutzeroberfläche erstellen](https://docs.stripe.com/stripe-apps/build-ui.md)