MotionSheet

Alasheet, yläsheet tai sivulaatikko pysähdyskohdilla, näpäytyksillä ja vierityksen luovutuksella.

WebReact NativePeitot

Kokeile

Valmistellaan esimerkkiä…

JavaScript on pois päältä. Alla oleva koodi on koko esimerkki.

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

Lyhin käyttö

Filters.jsx

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

Mitä se hoitaa puolestasi

Seuraa vetoja, vastustaa suurimman pysähdyskohdan yli ja asettuu irrotusnopeutesi mukaan; näpäytys siirtää sitä yhden pysähdyskohdan tai sulkee sen.
Kosketusvedot luovutetaan vieritettävälle sisällölle: alas vetäminen vierittää sisällön ensin takaisin ylös ennen kuin sheet liikkuu.
Pysähdyskohdat näytön osuuksina, pikseleinä tai 'content'-arvona sisällön luonnolliselle koolle.
Modaalinen sheet pitää kohdistuksen sisällään, tekee sivusta passiivisen ja sulkeutuu Escillä tai taustasta.

Käytä sitä

Suodatinpaneeli.
Jakovalikko.
Navigointilaatikko side="start"-asetuksella.

Props

Prop	Tyyppi	Oletus	Kuvaus
`open`	`boolean`	`false`	Näytetäänkö sheet.
`onOpenChange`	`(open) => void`		Suoritetaan `false`-arvolla, kun sheet suljetaan vetämällä, napauttamalla tai Escillä.
`detents`	`(number \| 'content')[]`	`['content']`	Lepokoot: näytön osuus, pikselit tai `'content'`.
`detent`	`number`		Ohjattu pysähdyskohdan indeksi.
`defaultDetent`	`number`	`0`	Pysähdyskohdan indeksi, jota käytetään avattaessa ilman `detent`-arvoa.
`onDetentChange`	`(index) => void`		Suoritetaan sen pysähdyskohdan indeksillä, johon sheet asettuu.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Reuna, jolta sheet tulee.
`modal`	`boolean`	`true`	Lisää taustan, pitää kohdistuksen sisällä ja tekee sivusta passiivisen.
`dismissible`	`boolean`	`true`	Vetäminen pienimmän pysähdyskohdan ohi, tausta ja Esc sulkevat sen.
`backdropClassName`	`string`		Luokka taustalle; `backdropStyle` asettaa sen inline-tyylin.
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.

Muut props-arvot menevät renderöidylle elementille, joten className, style ja tapahtumankäsittelijät toimivat tavalliseen tapaan.

Web ja React Native

Webissä modaalinen sheet on natiivi dialog; paneeli on flex-sarake, jota muotoilet className-arvolla.

React Nativessa se renderöidään läpinäkyvään Modal-elementtiin, ja takaisin-painike sulkee sen. Sisemmät ScrollView-elementit säilyttävät omat eleensä, joten sheetiä vedetään kahvasta, otsakkeesta ja muista staattisista alueista.

Käytetty näissä esimerkeissä

KuvasyötePyyhkäise kuvien läpi, hyppää pikkukuvilla, avaa mikä tahansa kuva koko näytölle ja vedä sen tiedot ylös.MotionPagerMotionHighlightMotionZoomMotionSheet