MotionSheet

Ein Bottom Sheet, Top Sheet oder seitliche Schublade mit Rastpunkten, Flicks und Übergabe ans Scrollen.

WebReact NativeOverlays

Ausprobieren

Beispiel wird vorbereitet…

JavaScript ist aus. Der Code unten ist das vollständige Beispiel.

App.jsx

import { useState } from 'react';
import { MotionHighlight, MotionSheet } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const sorts = ['Newest', 'Popular', 'Price'];
const sizes = ['XS', 'S', 'M', 'L', 'XL'];
const colors = ['Any', 'Green', 'Sand', 'Ink'];

export default function App({ side = 'bottom', detents = 'two', modal = true }) {
  const [open, setOpen] = useState(false);
  const [sort, setSort] = useState('Popular');
  const [size, setSize] = useState('M');
  const [color, setColor] = useState('Any');

  return (
    <div className="page">
      <header>
        <strong>Shop</strong>
        <button className="open" onClick={() => setOpen(true)}>
          Filters · {sort} · {size}
        </button>
      </header>
      <div className="grid">
        {Array.from({ length: 6 }, (_, index) => (
          <span key={index} className="product" />
        ))}
      </div>
      <MotionSheet
        open={open}
        onOpenChange={setOpen}
        side={side}
        modal={modal}
        detents={detents === 'two' ? [0.55, 0.92] : ['content']}
        className={`sheet ${side}`}
      >
        <span className="handle" />
        {/* The action sits beside the title, so it is in reach at every detent. */}
        <div className="sheet-head">
          <h2>Filters</h2>
          <button className="apply" onClick={() => setOpen(false)}>
            Show results
          </button>
        </div>
        <p className="label">Sort by</p>
        <MotionHighlight
          items={sorts}
          value={sort}
          onValueChange={setSort}
          className="choices"
          itemClassName="choice"
          highlightClassName="choice-on"
        />
        <p className="label">Size</p>
        <MotionHighlight
          items={sizes}
          value={size}
          onValueChange={setSize}
          className="choices"
          itemClassName="choice"
          highlightClassName="choice-on"
        />
        <p className="label">Color</p>
        <MotionHighlight
          items={colors}
          value={color}
          onValueChange={setColor}
          className="choices"
          itemClassName="choice"
          highlightClassName="choice-on"
        />
      </MotionSheet>
    </div>
  );
}

styles.css

.page {
  display: grid;
  gap: 16px;
  min-height: 440px;
  padding: 20px;
  align-content: start;
}

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

header strong {
  font-size: 20px;
  color: #0e2e24;
}

.open {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #176b52;
  color: #fff;
  font:
    650 15px system-ui,
    sans-serif;
  cursor: pointer;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.product {
  aspect-ratio: 1;
  border-radius: 14px;
  background: #eaf6f0;
}

.product:nth-child(3n + 2) {
  background: #cfe8dc;
}

.sheet {
  gap: 10px;
  padding: 12px 22px 22px;
  background: #fff;
  box-shadow: 0 -8px 30px rgba(14, 46, 36, 0.18);
}

.sheet.bottom {
  border-radius: 22px 22px 0 0;
}

.sheet.top {
  border-radius: 0 0 22px 22px;
}

/* A top sheet is pulled from its bottom edge. */
.sheet.top .handle {
  order: 1;
  margin-top: 6px;
}

.sheet.end {
  width: min(340px, 86vw);
  border-radius: 22px 0 0 22px;
}

.handle {
  justify-self: center;
  align-self: center;
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: #cfe8dc;
}

.sheet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.sheet h2 {
  margin: 4px 0 0;
  font:
    750 22px system-ui,
    sans-serif;
  color: #0e2e24;
}

.label {
  margin: 8px 0 0;
  color: #5b616b;
  font-size: 14px;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: #eaf6f0;
}

.choice {
  min-width: 52px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  background: none;
  font:
    600 14px system-ui,
    sans-serif;
  color: #0e2e24;
  cursor: pointer;
}

.choice-on {
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 1px #cfe8dc;
}

.apply {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #176b52;
  color: #fff;
  font:
    650 15px system-ui,
    sans-serif;
  cursor: pointer;
}

Kürzeste Nutzung

Filters.jsx

<MotionSheet open={open} onOpenChange={setOpen} detents={[0.45, 0.92]}>
  <FilterList />
</MotionSheet>;

Was sie dir abnimmt

Folgt dem Ziehen, bietet hinter dem größten Rastpunkt Widerstand und kommt mit deinem Loslass-Tempo zur Ruhe; ein Flick bewegt es um einen Rastpunkt oder schließt es.
Touch-Ziehen geht an scrollbaren Inhalt über: Runterziehen scrollt den Inhalt erst nach oben, bevor sich das Sheet bewegt.
Rastpunkte als Bruchteil des Bildschirms, in Pixeln oder 'content' für die natürliche Größe des Inhalts.
Ein modales Sheet hält den Fokus innen, macht die Seite inaktiv und schließt mit Escape oder dem Hintergrund.

Gut für

Ein Filter-Panel.
Ein Teilen-Menü.
Eine Navigationsschublade mit side="start".

props

Prop	Typ	Standard	Beschreibung
`open`	`boolean`	`false`	Ob das Sheet angezeigt wird.
`onOpenChange`	`(open) => void`		Läuft mit `false`, wenn das Sheet per Ziehen, Tippen oder Escape geschlossen wird.
`detents`	`(number \| 'content')[]`	`['content']`	Ruhegrößen: ein Bruchteil des Bildschirms, Pixel oder `'content'`.
`detent`	`number`		Kontrollierter Rastpunkt-Index.
`defaultDetent`	`number`	`0`	Rastpunkt-Index beim Öffnen ohne `detent`.
`onDetentChange`	`(index) => void`		Läuft mit dem Index des Rastpunkts, an dem das Sheet zur Ruhe kommt.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Die Kante, von der das Sheet kommt.
`modal`	`boolean`	`true`	Fügt einen Hintergrund hinzu, hält den Fokus innen und macht die Seite inaktiv.
`dismissible`	`boolean`	`true`	Ziehen über den kleinsten Rastpunkt hinaus, der Hintergrund und Escape schließen es.
`backdropClassName`	`string`		Klasse für den Hintergrund; `backdropStyle` setzt seinen Inline-Style.
`transition`	`Transition`	`spring`	Eine Timing-Kurve `{ duration, easing }` oder eine Feder `{ tempo: 'spring', spring }`. Federn behalten bei Unterbrechung ihren Schwung.

Weitere props gehen an das gerenderte Element, also funktionieren className, style und Event-Handler wie gewohnt.

Web und React Native

Im Web ist ein modales Sheet ein natives dialog; das Panel ist eine Flex-Spalte, die du mit className gestaltest.

Unter React Native rendert es in einem transparenten Modal, und die Zurück-Taste schließt es. Innere ScrollViews behalten ihre eigenen Gesten, daher wird das Sheet an Griff, Kopfzeile und anderen festen Bereichen gezogen.

Verwendet in diesen Beispielen

Foto-FeedDurch Fotos wischen, mit Vorschaubildern springen, jedes Foto im Vollbild öffnen und seine Details hochziehen.MotionPagerMotionHighlightMotionZoomMotionSheet