MotionSheet

Apatinis sheet, viršutinis sheet ar šoninis stalčius su sustojimo taškais, brūkštelėjimais ir slinkimo perdavimu.

ŽiniatinklisReact NativePerdangos

Išbandykite

Ruošiamas pavyzdys…

JavaScript išjungtas. Žemiau esantis kodas yra visas pavyzdys.

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

Trumpiausias naudojimas

Filters.jsx

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

Ką jis sutvarko už jus

Seka vilkimą, priešinasi už didžiausio sustojimo taško ir nusistovi pagal jūsų paleidimo greitį; brūkštelėjimas perkelia per vieną sustojimo tašką arba uždaro.
Lietimo vilkimai perduodami slenkamam turiniui: traukiant žemyn turinys pirmiausia paslenkamas į viršų, tik tada juda sheet.
Sustojimo taškai kaip ekrano dalys, pikseliai arba 'content' natūraliam turinio dydžiui.
Modalinis sheet laiko fokusą viduje, padaro puslapį neaktyvų ir užsidaro su Escape arba fonu.

Naudokite jį

Filtrų skydelis.
Bendrinimo meniu.
Naršymo stalčius su side="start".

Props

Prop	Tipas	Numatytoji	Aprašymas
`open`	`boolean`	`false`	Ar sheet rodomas.
`onOpenChange`	`(open) => void`		Vykdomas su `false`, kai sheet uždaromas vilkimu, bakstelėjimu ar Escape.
`detents`	`(number \| 'content')[]`	`['content']`	Ramybės dydžiai: ekrano dalis, pikseliai arba `'content'`.
`detent`	`number`		Valdomas sustojimo taško indeksas.
`defaultDetent`	`number`	`0`	Sustojimo taško indeksas, naudojamas atidarant be `detent`.
`onDetentChange`	`(index) => void`		Vykdomas su sustojimo taško, kuriame nusistovi sheet, indeksu.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Kraštas, iš kurio ateina sheet.
`modal`	`boolean`	`true`	Prideda foną, laiko fokusą viduje ir padaro puslapį neaktyvų.
`dismissible`	`boolean`	`true`	Vilkimas už mažiausio sustojimo taško, fonas ir Escape jį uždaro.
`backdropClassName`	`string`		Fono klasė; `backdropStyle` nustato jo vidinį stilių.
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.

Kiti props perduodami atvaizduojamam elementui, todėl className, style ir įvykių apdorojimo funkcijos veikia kaip įprastai.

Žiniatinklis ir React Native

Žiniatinklyje modalinis sheet yra vietinis dialog; skydelis yra flex stulpelis, kurio stilių nustatote su className.

React Native jis atvaizduojamas permatomame Modal, o jį uždaro mygtukas atgal. Vidiniai ScrollView išlaiko savo gestus, todėl sheet velkamas už rankenos, antraštės ir kitų statinių sričių.

Naudojama šiuose pavyzdžiuose

Nuotraukų srautasBraukite per nuotraukas, šokinėkite miniatiūromis, atidarykite bet kurią nuotrauką per visą ekraną ir ištraukite jos informaciją.MotionPagerMotionHighlightMotionZoomMotionSheet