MotionSheet

Un bottom sheet, un top sheet o un cassetto laterale con detent, colpi rapidi e passaggio dello scroll.

WebReact NativeOverlay

Provalo

Preparazione dell’esempio…

JavaScript è disattivato. Il codice qui sotto è l’esempio completo.

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

L’uso più breve

Filters.jsx

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

Di che cosa si occupa al posto tuo

Segue i trascinamenti, fa resistenza oltre il detent più grande e si assesta con la velocità del tuo rilascio; un colpo rapido sposta di un detent o lo chiude.
I trascinamenti touch passano al contenuto scorrevole: tirando giù, il contenuto torna in cima prima che lo sheet si muova.
Detent come frazioni dello schermo, pixel, oppure 'content' per la dimensione naturale del contenuto.
Uno sheet modale tiene il focus al suo interno, rende inerte la pagina e si chiude con Esc o lo sfondo.

Usalo per

Un pannello di filtri.
Un menu di condivisione.
Un cassetto di navigazione con side="start".

Props

Prop	Tipo	Predefinito	Descrizione
`open`	`boolean`	`false`	Se lo sheet è visibile.
`onOpenChange`	`(open) => void`		Viene eseguito con `false` quando lo sheet viene chiuso trascinandolo, toccando fuori o con Esc.
`detents`	`(number \| 'content')[]`	`['content']`	Dimensioni di riposo: una frazione dello schermo, pixel, oppure `'content'`.
`detent`	`number`		Indice del detent controllato.
`defaultDetent`	`number`	`0`	Indice del detent usato all’apertura senza `detent`.
`onDetentChange`	`(index) => void`		Viene eseguito con l’indice del detent su cui lo sheet si assesta.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Il bordo da cui arriva lo sheet.
`modal`	`boolean`	`true`	Aggiunge uno sfondo, tiene il focus all’interno e rende inerte la pagina.
`dismissible`	`boolean`	`true`	Trascinare oltre il detent più piccolo, lo sfondo ed Esc lo chiudono.
`backdropClassName`	`string`		Classe per lo sfondo; `backdropStyle` imposta il suo stile inline.
`transition`	`Transition`	`spring`	Una curva di timing `{ duration, easing }` o una molla `{ tempo: 'spring', spring }`. Le molle conservano lo slancio quando vengono interrotte.

Le altre props vanno all’elemento renderizzato, quindi className, style e gli event handler funzionano come sempre.

Web e React Native

Sul web uno sheet modale è un dialog nativo; il pannello è una colonna flex che stilizzi con className.

Su React Native viene renderizzato in un Modal trasparente e il tasto Indietro lo chiude. Gli ScrollView interni mantengono i propri gesti, quindi lo sheet si trascina dalla maniglia, dall’intestazione e dalle altre aree fisse.

Usato in questi esempi

Feed di fotoScorri tra le foto, salta con le miniature, apri qualsiasi foto a schermo intero e tira su i suoi dettagli.MotionPagerMotionHighlightMotionZoomMotionSheet