MotionSheet

En bottom sheet, top sheet eller sidolåda med stopplägen, snärtar och överlämning av scrollning.

WebbReact NativeÖverlägg

Prova

Förbereder exemplet…

JavaScript är avstängt. Koden nedan är hela exemplet.

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

Kortaste användning

Filters.jsx

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

Det här sköter den åt dig

Följer dragningar, gör motstånd förbi sitt största stoppläge och landar med din släpphastighet; en snärt flyttar ett stoppläge eller stänger.
Pekdragningar lämnas över till scrollbart innehåll: att dra nedåt scrollar innehållet tillbaka till toppen innan sheeten rör sig.
Stopplägen som bråkdelar av skärmen, pixlar eller 'content' för innehållets naturliga storlek.
En modal sheet håller fokus inuti, gör sidan inert och stängs med Escape eller bakgrunden.

Använd den för

En filterpanel.
En delningsmeny.
En navigationslåda med side="start".

Props

Prop	Typ	Standard	Beskrivning
`open`	`boolean`	`false`	Om sheeten visas.
`onOpenChange`	`(open) => void`		Körs med `false` när sheeten dras, trycks eller Escape-stängs.
`detents`	`(number \| 'content')[]`	`['content']`	Vilostorlekar: en bråkdel av skärmen, pixlar eller `'content'`.
`detent`	`number`		Kontrollerat index för stoppläge.
`defaultDetent`	`number`	`0`	Index för stoppläge vid öppning utan `detent`.
`onDetentChange`	`(index) => void`		Körs med index för stoppläget som sheeten landar på.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Kanten som sheeten kommer från.
`modal`	`boolean`	`true`	Lägger till en bakgrund, håller fokus inuti och gör sidan inert.
`dismissible`	`boolean`	`true`	Dragning förbi det minsta stoppläget, bakgrunden och Escape stänger den.
`backdropClassName`	`string`		Klass för bakgrunden; `backdropStyle` sätter dess inline-style.
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.

Andra props går till det renderade elementet, så className, style och händelsehanterare fungerar som vanligt.

Webb och React Native

På webben är en modal sheet en native dialog; panelen är en flex-kolumn som du stylar med className.

I React Native renderas den i en genomskinlig Modal och bakåtknappen stänger den. Inre ScrollViews behåller sina egna gester, så sheeten dras i sitt handtag, sitt sidhuvud och andra fasta ytor.

Används i de här exemplen

FotoflödeSvep mellan foton, hoppa med miniatyrer, öppna valfritt foto i helskärm och dra upp dess detaljer.MotionPagerMotionHighlightMotionZoomMotionSheet