MotionSheet

Un panneau inférieur, un panneau supérieur ou un tiroir latéral à crans, avec gestes vifs et relais vers le défilement.

WebReact NativeSuperpositions

Essayer

Préparation de l’exemple…

JavaScript est désactivé. Le code ci-dessous est l’exemple 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;
}

Usage minimal

Filters.jsx

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

Ce qu’il gère pour vous

Suit les glisser, résiste au-delà de son plus grand cran et se pose selon la vitesse de relâchement ; un geste vif le déplace d’un cran ou le ferme.
Les glisser tactiles passent le relais au contenu défilant : tirer vers le bas fait remonter le contenu en haut avant que le panneau ne bouge.
Des crans en fractions de l’écran, en pixels, ou 'content' pour la taille naturelle du contenu.
Un panneau modal garde le focus à l’intérieur, rend la page inerte et se ferme avec Échap ou le fond.

À utiliser pour

Un panneau de filtres.
Un menu de partage.
Un tiroir de navigation avec side="start".

Props

Prop	Type	Défaut	Description
`open`	`boolean`	`false`	Indique si le panneau est affiché.
`onOpenChange`	`(open) => void`		S’exécute avec `false` quand le panneau est fermé par un glisser, un appui ou Échap.
`detents`	`(number \| 'content')[]`	`['content']`	Tailles de repos : une fraction de l’écran, des pixels ou `'content'`.
`detent`	`number`		Index de cran contrôlé.
`defaultDetent`	`number`	`0`	Index de cran utilisé à l’ouverture sans `detent`.
`onDetentChange`	`(index) => void`		S’exécute avec l’index du cran où le panneau se pose.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Le bord d’où vient le panneau.
`modal`	`boolean`	`true`	Ajoute un fond, garde le focus à l’intérieur et rend la page inerte.
`dismissible`	`boolean`	`true`	Un glisser au-delà du plus petit cran, le fond et Échap le ferment.
`backdropClassName`	`string`		Classe du fond ; `backdropStyle` définit son style en ligne.
`transition`	`Transition`	`spring`	Une courbe de temps `{ duration, easing }` ou un ressort `{ tempo: 'spring', spring }`. Les ressorts gardent leur élan quand ils sont interrompus.

Les autres props vont à l’élément rendu : className, style et les gestionnaires d’événements fonctionnent comme d’habitude.

Web et React Native

Sur le web, un panneau modal est un dialog natif ; le panneau est une colonne flex que vous stylez avec className.

Sur React Native, il est rendu dans un Modal transparent et le bouton retour le ferme. Les ScrollView internes gardent leurs propres gestes : le panneau se fait glisser depuis sa poignée, son en-tête et ses autres zones fixes.

Utilisé dans ces exemples

Fil de photosFaites défiler les photos, sautez de l’une à l’autre avec les vignettes, ouvrez n’importe quelle photo en plein écran et remontez ses détails.MotionPagerMotionHighlightMotionZoomMotionSheet