MotionSheet

Spodní nebo horní sheet či boční zásuvka se zarážkami, švihnutím a předáním posouvání.

WebReact NativePřekryvy

Vyzkoušejte

Příprava příkladu…

JavaScript je vypnutý. Kód níže je celý příklad.

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;
}

Nejkratší použití

Filters.jsx

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

Co za vás vyřeší

Sleduje tažení, za největší zarážkou klade odpor a usadí se podle rychlosti puštění; švihnutí posune o jednu zarážku nebo zavře.
Dotyková tažení se předávají posouvatelnému obsahu: tah dolů nejprve posune obsah zpět nahoru, teprve pak se pohne sheet.
Zarážky jako zlomky obrazovky, pixely nebo 'content' pro přirozenou velikost obsahu.
Modální sheet drží fokus uvnitř, učiní stránku neaktivní a zavře se klávesou Escape nebo pozadím.

Použijte pro

Panel filtrů.
Nabídka sdílení.
Navigační zásuvka s side="start".

Props

Prop	Typ	Výchozí	Popis
`open`	`boolean`	`false`	Zda je sheet zobrazený.
`onOpenChange`	`(open) => void`		Spustí se s `false`, když se sheet zavře tažením, klepnutím nebo klávesou Escape.
`detents`	`(number \| 'content')[]`	`['content']`	Klidové velikosti: zlomek obrazovky, pixely nebo `'content'`.
`detent`	`number`		Řízený index zarážky.
`defaultDetent`	`number`	`0`	Index zarážky při otevření bez `detent`.
`onDetentChange`	`(index) => void`		Spustí se s indexem zarážky, na které sheet dosedne.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Okraj, ze kterého sheet přichází.
`modal`	`boolean`	`true`	Přidá pozadí, drží fokus uvnitř a učiní stránku neaktivní.
`dismissible`	`boolean`	`true`	Zavře ho tažení za nejmenší zarážku, pozadí i Escape.
`backdropClassName`	`string`		Třída pro pozadí; `backdropStyle` nastaví jeho inline styl.
`transition`	`Transition`	`spring`	Křivka timing `{ duration, easing }` nebo pružina `{ tempo: 'spring', spring }`. Pružiny si při přerušení zachovávají hybnost.

Ostatní props jdou do renderovaného prvku, takže className, style a obsluhy událostí fungují jako obvykle.

Web a React Native

Na webu je modální sheet nativní dialog; panel je flex sloupec, který stylujete přes className.

V React Native se renderuje v průhledném Modal a zavře ho tlačítko zpět. Vnitřní ScrollView si zachovávají vlastní gesta, takže se sheet táhne za úchyt, záhlaví a další pevné oblasti.

Použito v těchto příkladech

Feed fotekListujte fotkami přejetím, přeskakujte náhledy, otevřete libovolnou fotku na celou obrazovku a vytáhněte její podrobnosti.MotionPagerMotionHighlightMotionZoomMotionSheet