Layout

Split panes

Zwei Bereiche, die durch einen Griff getrennt sind, der ihre Größe durch Ziehen oder Pfeiltasten ändert, auf beiden Seiten eine Mindestgröße beibehält und bei Doppelklick wieder einrastet.

Editor46%

// components/ShiftCard.tsx

export function ShiftCard({ shift }) {

const open = shift.slots - shift.claimed

return (

{open} open

</Pill>

<h3>{shift.name}</h3>

</article>

)

}

Preview54%

420 x 260Saved 12s ago

Saturday close

Bakery floor, 18:00 to 23:30

2 open

Claimed7 of 9

Front counter2/2
Oven3/4
Pack out2/3

Drag the divider, or focus it and use the arrow keys. Double-click sets it back to 46%.

Split panes verwenden

Zwei Bereiche, die durch einen Griff getrennt sind, der ihre Größe durch Ziehen oder Pfeiltasten ändert, auf beiden Seiten eine Mindestgröße beibehält und bei Doppelklick wieder einrastet.

Teste die Vorschau mit Maus und Tastatur. Prüfe den sichtbaren Fokus und das Layout auf schmalen Bildschirmen in deiner eigenen Seite. Nenne deinem Agenten die Nummer oder den Bezeichner, um diese Komponente abzurufen.

Eigenschaften: initialSplit, direction

Welche Frameworks sind verfügbar?

Der Katalog enthält diese Versionen: react, vue, svelte, astro, html. Die Vorschau auf dieser Seite verwendet React.

Wie greife ich auf die Implementierung zu?

Vorschau und Beschreibung sind öffentlich. Melde dich mit einem berechtigten Konto an, um Code, Framework-Versionen und Installation zu öffnen.

Verbinde deinen Agenten

Ähnliche Komponenten

2342Drag split panelsLayoutDurch dünne ziehbare Griffe unterteilte Bereiche, die die Größe der angrenzenden Bereiche in Echtzeit ändern, in einer Reihe angeordnet oder gestapelt.

2330Curved Scroll WallLayoutEine horizontal scrollende Wand aus Fotos, die auf einer sanft gekrümmten, gebogenen Ebene gerendert wird und endlos in beide Richtungen scrollt.

2351Expanding panel galleryLayoutEine Reihe von Abdeckfeldern, bei denen durch Bewegen des Mauszeigers, Klicken oder Drücken der Pfeiltaste auf eines dieses auf die volle Breite erweitert wird, während der Rest in Splitter komprimiert wird.

2357Focus scroll listLayoutEine scrollbare Warteschlange, deren Zeilen in voller Größe und opacity erscheinen, wenn sie die Mitte der Ansicht erreichen, mit Hover und Tastaturauswahl.

2381Locked ratio frameLayoutEin Container, dessen Inhalt unabhängig von der Ausdehnung in einem gewählten Verhältnis von Breite zu Höhe bleibt.

1532Masonry flowLayoutEine Mauerwerkswand, die Kacheln unterschiedlicher Höhe in Säulen packt, jede einzelne anhebt, während sie ins Blickfeld gescrollt wird, und das gesamte Raster neu positioniert, wenn sich die Anzahl der Säulen ändert.