MotionSheet

Spodný alebo horný sheet či bočná zásuvka so zarážkami, švihnutím a odovzdaním posúvania.

WebReact NativePrekrytia

Vyskúšajte

Príprava príkladu…

JavaScript je vypnutý. Kód nižšie je celý prí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;
}

Najkratšie použitie

Filters.jsx

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

Čo za vás vyrieši

Sleduje ťahanie, za najväčšou zarážkou kladie odpor a usadí sa podľa rýchlosti pustenia; švihnutie posunie o jednu zarážku alebo zavrie.
Dotykové ťahania sa odovzdávajú posúvateľnému obsahu: ťah nadol najprv posunie obsah späť nahor, až potom sa pohne sheet.
Zarážky ako zlomky obrazovky, pixely alebo 'content' pre prirodzenú veľkosť obsahu.
Modálny sheet drží fokus vnútri, urobí stránku neaktívnou a zavrie sa klávesom Escape alebo pozadím.

Použite na

Panel filtrov.
Ponuka zdieľania.
Navigačná zásuvka so side="start".

Props

Prop	Typ	Predvolené	Popis
`open`	`boolean`	`false`	Či je sheet zobrazený.
`onOpenChange`	`(open) => void`		Spustí sa s `false`, keď sa sheet zavrie ťahaním, ťuknutím alebo klávesom Escape.
`detents`	`(number \| 'content')[]`	`['content']`	Pokojové veľkosti: zlomok obrazovky, pixely alebo `'content'`.
`detent`	`number`		Riadený index zarážky.
`defaultDetent`	`number`	`0`	Index zarážky pri otvorení bez `detent`.
`onDetentChange`	`(index) => void`		Spustí sa s indexom zarážky, na ktorej sheet dosadne.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Okraj, z ktorého sheet prichádza.
`modal`	`boolean`	`true`	Pridá pozadie, drží fokus vnútri a urobí stránku neaktívnou.
`dismissible`	`boolean`	`true`	Zavrie ho ťahanie za najmenšiu zarážku, pozadie aj Escape.
`backdropClassName`	`string`		Trieda pre pozadie; `backdropStyle` nastaví jeho inline štýl.
`transition`	`Transition`	`spring`	Krivka timing `{ duration, easing }` alebo pružina `{ tempo: 'spring', spring }`. Pružiny si pri prerušení zachovávajú hybnosť.

Ostatné props idú do renderovaného prvku, takže className, style a obsluhy udalostí fungujú ako obvykle.

Web a React Native

Na webe je modálny sheet natívny dialog; panel je flex stĺpec, ktorý štýlujete cez className.

V React Native sa renderuje v priehľadnom Modal a zavrie ho tlačidlo späť. Vnútorné ScrollView si zachovávajú vlastné gestá, takže sa sheet ťahá za úchyt, hlavičku a ďalšie pevné oblasti.

Použité v týchto príkladoch

Feed fotiekListujte fotkami potiahnutím, preskakujte náhľady, otvorte ľubovoľnú fotku na celú obrazovku a vytiahnite jej podrobnosti.MotionPagerMotionHighlightMotionZoomMotionSheet