MotionSheet

En bottom sheet, top sheet eller sideskuff med stoppunkter, snert og overlevering av rulling.

WebReact NativeOverlegg

Prøv det

Forbereder eksempelet …

JavaScript er slått av. Koden nedenfor er hele eksempelet.

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

Korteste bruk

Filters.jsx

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

Dette tar den seg av

Følger drag, gjør motstand forbi det største stoppunktet og lander med slipphastigheten din; et snert flytter ett stoppunkt eller lukker.
Berøringsdrag overleveres til rullbart innhold: å dra nedover ruller innholdet tilbake til toppen før sheeten beveger seg.
Stoppunkter som brøkdeler av skjermen, piksler eller 'content' for innholdets naturlige størrelse.
En modal sheet holder fokus inni, gjør siden inert og lukkes med Escape eller bakgrunnen.

Bruk den til

Et filterpanel.
En delingsmeny.
En navigasjonsskuff med side="start".

Props

Prop	Type	Standard	Beskrivelse
`open`	`boolean`	`false`	Om sheeten vises.
`onOpenChange`	`(open) => void`		Kjører med `false` når sheeten dras, trykkes eller lukkes med Escape.
`detents`	`(number \| 'content')[]`	`['content']`	Hvilestørrelser: en brøkdel av skjermen, piksler eller `'content'`.
`detent`	`number`		Kontrollert indeks for stoppunkt.
`defaultDetent`	`number`	`0`	Indeks for stoppunkt ved åpning uten `detent`.
`onDetentChange`	`(index) => void`		Kjører med indeksen for stoppunktet sheeten lander på.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Kanten sheeten kommer fra.
`modal`	`boolean`	`true`	Legger til en bakgrunn, holder fokus inni og gjør siden inert.
`dismissible`	`boolean`	`true`	Dra forbi det minste stoppunktet, bakgrunnen og Escape lukker den.
`backdropClassName`	`string`		Klasse for bakgrunnen; `backdropStyle` setter inline-stilen.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.

Andre props går til det renderte elementet, så className, style og hendelseshåndterere fungerer som vanlig.

Web og React Native

På nettet er en modal sheet en native dialog; panelet er en flex-kolonne som du stiler med className.

I React Native renderes den i en gjennomsiktig Modal, og tilbakeknappen lukker den. Indre ScrollView-er beholder egne bevegelser, så sheeten dras i håndtaket, toppteksten og andre faste områder.

Brukt i disse eksemplene

BildefeedSveip gjennom bilder, hopp med miniatyrer, åpne et hvilket som helst bilde i fullskjerm og dra opp detaljene.MotionPagerMotionHighlightMotionZoomMotionSheet