MotionSheet

Sheet bawah, sheet atas, atau laci samping dengan detent, jentikan, dan serah terima gulir.

WebReact NativeOverlay

Coba

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

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

Penggunaan terpendek

Filters.jsx

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

Yang ditanganinya untuk Anda

Mengikuti seretan, menahan di luar detent terbesarnya, dan berhenti sesuai kecepatan lepasan Anda; jentikan memindahkan satu detent atau menutupnya.
Seretan sentuh diserahkan ke konten yang bisa digulir: menarik ke bawah menggulir konten kembali ke atas sebelum sheet bergerak.
Detent sebagai pecahan layar, piksel, atau 'content' untuk ukuran alami konten.
Sheet modal menjaga fokus di dalamnya, membuat halaman inert, dan tertutup dengan Escape atau backdrop.

Gunakan untuk

Panel filter.
Menu berbagi.
Laci navigasi dengan side="start".

Props

Prop	Tipe	Bawaan	Deskripsi
`open`	`boolean`	`false`	Apakah sheet ditampilkan.
`onOpenChange`	`(open) => void`		Berjalan dengan `false` saat sheet ditutup dengan seretan, ketukan, atau Escape.
`detents`	`(number \| 'content')[]`	`['content']`	Ukuran saat diam: pecahan layar, piksel, atau `'content'`.
`detent`	`number`		Index detent yang dikendalikan.
`defaultDetent`	`number`	`0`	Index detent yang dipakai saat membuka tanpa `detent`.
`onDetentChange`	`(index) => void`		Berjalan dengan index detent tempat sheet berhenti.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Tepi asal sheet.
`modal`	`boolean`	`true`	Menambahkan backdrop, menjaga fokus di dalam, dan membuat halaman inert.
`dismissible`	`boolean`	`true`	Menyeret melewati detent terkecil, backdrop, dan Escape menutupnya.
`backdropClassName`	`string`		Class untuk backdrop; `backdropStyle` mengatur gaya inline-nya.
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.

Semua props lain diteruskan ke elemen yang dirender, jadi className, style, dan event handler bekerja seperti biasa.

Web dan React Native

Di web, sheet modal adalah dialog native; panelnya kolom flex yang Anda beri gaya dengan className.

Di React Native, ia dirender dalam Modal transparan dan tombol kembali menutupnya. ScrollView di dalamnya mempertahankan gesturnya sendiri, jadi sheet diseret dari pegangan, header, dan area statis lainnya.

Dipakai di contoh-contoh ini

Feed fotoGeser foto, lompat dengan thumbnail, buka foto mana pun di layar penuh, dan tarik detailnya ke atas.MotionPagerMotionHighlightMotionZoomMotionSheet