Zum Hauptinhalt springen

Layouts

Jutro enthält vordefinierte Layouts, die Sie direkt auf eine Seite oder einen Teil der Seite anwenden können. Sie erfordern lediglich eine minimale Konfiguration.

Sie können sie wie folgt importieren:

import {
  OneToOneColumnLayout,
  SingleColumnLayout,
  TwoToOneColumnLayout,
} from '@jutro/components/lab-preview';

1:1-Layout​

Note: Für diese Komponente sind genau zwei untergeordnete Komponenten erforderlich.

1:1-Layout

Die Spalten sind gleich breit.

Einspaltiges Layout​

Einspaltiges Layout

Die Komponente kann beliebig viele untergeordnete Komponenten enthalten. Sie werden übereinander gestapelt.

2:1-Layout​

Note: Für diese Komponente sind genau zwei untergeordnete Komponenten erforderlich.

2:1-Layout

Die erste Spalte ist doppelt so breit wie die zweite Spalte.

Breite​

Sie können die Eigenschaft maxWidth auf einen der folgenden Werte festlegen:

  • default: Erwartungsgemäß ist dies der Standardwert, der automatisch angewendet wird, auch wenn Sie keine Einstellungen vornehmen.
  • narrow
  • expanded
  • Eine benutzerdefinierte Breite in Pixel, die als Zeichenfolge mit dem Suffix px angegeben wird, z. B. 1024px.

Messpunkt-Eigenschaften​

Die Layouts sind responsiv, d. h., die Spalten werden gestapelt, wenn nicht genügend Platz vorhanden ist, um sie nebeneinander anzuzeigen. Sie können dieses Verhalten überschreiben, indem Sie Eigenschaften für einen bestimmten Messpunkt übergeben. Zum Beispiel:

<OneToOneColumnLayout phone={{ useCard: false }}>
  <MyElement />
  <MyElement />
</OneToOneColumnLayout>

Mehr über Messpunkte und Reaktionsfähigkeit erfahren Sie hier.

Ohne Karten​

Standardmäßig werden die Spalten innerhalb von Karten gerendert. Zum Rendern ohne Karten legen Sie useCard auf false fest.

On this page