MotionSheet

Sheet inferior, sheet superior sau sertar lateral, cu opriri, mișcări bruște și predarea derulării.

WebReact NativeSuprapuneri

Încercați

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul complet.

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

Cea mai scurtă utilizare

Filters.jsx

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

Ce rezolvă în locul dumneavoastră

Urmează tragerile, opune rezistență după cea mai mare oprire și se așază cu viteza eliberării; o mișcare bruscă îl mută cu o oprire sau îl închide.
Tragerile tactile se predau conținutului derulabil: tragerea în jos derulează conținutul înapoi sus înainte să se miște sheet-ul.
Opririle ca fracțiuni din ecran, pixeli sau 'content' pentru mărimea naturală a conținutului.
Un sheet modal păstrează focusul înăuntru, face pagina inertă și se închide cu Escape sau cu fundalul.

Folosiți-o pentru

Un panou de filtre.
Un meniu de partajare.
Un sertar de navigare cu side="start".

Props

Prop	Tip	Implicit	Descriere
`open`	`boolean`	`false`	Dacă sheet-ul este afișat.
`onOpenChange`	`(open) => void`		Rulează cu `false` când sheet-ul e închis prin tragere, atingere sau Escape.
`detents`	`(number \| 'content')[]`	`['content']`	Mărimi de repaus: o fracțiune din ecran, pixeli sau `'content'`.
`detent`	`number`		Indexul de oprire controlat.
`defaultDetent`	`number`	`0`	Indexul de oprire folosit la deschiderea fără `detent`.
`onDetentChange`	`(index) => void`		Rulează cu indexul opririi pe care se așază sheet-ul.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Marginea de pe care vine sheet-ul.
`modal`	`boolean`	`true`	Adaugă un fundal, păstrează focusul înăuntru și face pagina inertă.
`dismissible`	`boolean`	`true`	Tragerea dincolo de cea mai mică oprire, fundalul și Escape îl închid.
`backdropClassName`	`string`		Clasă pentru fundal; `backdropStyle` îi setează stilul inline.
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.

Celelalte props merg la elementul randat, așa că className, style și handlerele de evenimente funcționează ca de obicei.

Web și React Native

Pe web, un sheet modal este un dialog nativ; panoul este o coloană flex pe care o stilizați cu className.

În React Native se randează într-un Modal transparent, iar butonul înapoi îl închide. ScrollView-urile interioare își păstrează gesturile, așa că sheet-ul se trage de mâner, de antet și de alte zone statice.

Folosită în aceste exemple

Flux de fotografiiGlisați printre fotografii, săriți cu miniaturi, deschideți orice fotografie pe tot ecranul și trageți în sus detaliile.MotionPagerMotionHighlightMotionZoomMotionSheet