MotionSheet

Durma noktaları, fiskeler ve kaydırma devriyle alt sheet, üst sheet ya da yan çekmece.

WebReact NativeKatmanlar

Deneyin

Örnek hazırlanıyor…

JavaScript kapalı. Aşağıdaki kod örneğin tamamıdır.

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

En kısa kullanım

Filters.jsx

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

Sizin yerinize hallettikleri

Sürüklemeleri izler, en büyük durma noktasının ötesinde direnir ve bırakma hızınızla yerleşir; bir fiske onu bir durma noktası kaydırır ya da kapatır.
Dokunmatik sürüklemeler kaydırılabilir içeriğe devredilir: aşağı çekmek sheet hareket etmeden önce içeriği en üste kaydırır.
Durma noktaları ekranın kesirleri, piksel ya da içeriğin doğal boyutu için 'content' olarak.
Modal bir sheet odağı içinde tutar, sayfayı etkisiz kılar ve Escape ya da arka plan ile kapanır.

Şunlar için kullanın

Bir filtre paneli.
Bir paylaşım menüsü.
side="start" ile bir gezinme çekmecesi.

Props

Prop	Tip	Varsayılan	Açıklama
`open`	`boolean`	`false`	Sheet'in gösterilip gösterilmediği.
`onOpenChange`	`(open) => void`		Sheet sürüklenerek, dokunularak ya da Escape ile kapatıldığında `false` ile çalışır.
`detents`	`(number \| 'content')[]`	`['content']`	Durgun boyutlar: ekranın bir kesri, piksel ya da `'content'`.
`detent`	`number`		Denetimli durma noktası index'i.
`defaultDetent`	`number`	`0`	`detent` olmadan açarken kullanılan durma noktası index'i.
`onDetentChange`	`(index) => void`		Sheet'in yerleştiği durma noktasının index'iyle çalışır.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Sheet'in geldiği kenar.
`modal`	`boolean`	`true`	Bir arka plan ekler, odağı içinde tutar ve sayfayı etkisiz kılar.
`dismissible`	`boolean`	`true`	En küçük durma noktasının ötesine sürüklemek, arka plan ve Escape onu kapatır.
`backdropClassName`	`string`		Arka plan için class; `backdropStyle` satır içi stilini ayarlar.
`transition`	`Transition`	`spring`	Bir timing eğrisi `{ duration, easing }` ya da bir yay `{ tempo: 'spring', spring }`. Yaylar kesildiğinde momentumlarını korur.

Diğer props render edilen öğeye gider; böylece className, style ve olay işleyiciler her zamanki gibi çalışır.

Web ve React Native

Web'de modal bir sheet native bir dialog'dur; panel className ile biçimlendirdiğiniz bir flex sütunudur.

React Native'de şeffaf bir Modal içinde render edilir ve geri düğmesi onu kapatır. İçerideki ScrollView'lar kendi hareketlerini korur; sheet tutamacından, başlığından ve diğer sabit alanlarından sürüklenir.

Bu örneklerde kullanıldı

Fotoğraf akışıFotoğraflar arasında kaydırın, küçük resimlerle atlayın, herhangi bir fotoğrafı tam ekran açın ve ayrıntılarını yukarı çekin.MotionPagerMotionHighlightMotionZoomMotionSheet