MotionSheet

detent, झटकों और स्क्रॉल हस्तांतरण वाली नीचे की शीट, ऊपर की शीट या साइड ड्रॉअर।

वेबReact Nativeओवरले

आज़माएँ

उदाहरण तैयार हो रहा है…

JavaScript बंद है। नीचे का कोड पूरा उदाहरण है।

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

सबसे छोटा इस्तेमाल

Filters.jsx

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

यह आपके लिए क्या संभालता है

खिंचाव के साथ चलती है, सबसे बड़े detent के पार प्रतिरोध करती है और आपके छोड़ने की गति से ठहरती है; झटका उसे एक detent आगे ले जाता है या बंद कर देता है।
टच ड्रैग स्क्रॉल होने वाली सामग्री को सौंपा जाता है: नीचे खींचने पर शीट हिलने से पहले सामग्री ऊपर तक स्क्रॉल होती है।
detent स्क्रीन के अंश, पिक्सेल, या सामग्री के स्वाभाविक आकार के लिए 'content' के रूप में।
modal शीट फ़ोकस को भीतर रखती है, पेज को निष्क्रिय करती है और Escape या बैकड्रॉप से बंद होती है।

इसके लिए इस्तेमाल करें

फ़िल्टर पैनल।
शेयर मेनू।
side="start" के साथ नेविगेशन ड्रॉअर।

Props

Prop	टाइप	डिफ़ॉल्ट	विवरण
`open`	`boolean`	`false`	शीट दिख रही है या नहीं।
`onOpenChange`	`(open) => void`		शीट खींचकर, टैप करके या Escape से बंद होने पर `false` के साथ चलता है।
`detents`	`(number \| 'content')[]`	`['content']`	विश्राम के आकार: स्क्रीन का अंश, पिक्सेल, या `'content'`।
`detent`	`number`		नियंत्रित detent index।
`defaultDetent`	`number`	`0`	`detent` के बिना खोलने पर इस्तेमाल होने वाला detent index।
`onDetentChange`	`(index) => void`		जिस detent पर शीट ठहरती है, उसके index के साथ चलता है।
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	वह किनारा जहाँ से शीट आती है।
`modal`	`boolean`	`true`	बैकड्रॉप जोड़ता है, फ़ोकस भीतर रखता है और पेज को निष्क्रिय करता है।
`dismissible`	`boolean`	`true`	सबसे छोटे detent के पार खींचना, बैकड्रॉप और Escape उसे बंद करते हैं।
`backdropClassName`	`string`		बैकड्रॉप की class; `backdropStyle` उसकी inline स्टाइल तय करता है।
`transition`	`Transition`	`spring`	timing वक्र `{ duration, easing }` या स्प्रिंग `{ tempo: 'spring', spring }`। रुकने पर स्प्रिंग अपनी गति बनाए रखते हैं।

बाक़ी props रेंडर होने वाले एलिमेंट को जाते हैं, इसलिए className, style और इवेंट हैंडलर सामान्य रूप से काम करते हैं।

वेब और React Native

वेब पर modal शीट नेटिव dialog है; पैनल flex कॉलम है जिसे आप className से स्टाइल करते हैं।

React Native में यह पारदर्शी Modal में रेंडर होती है और बैक बटन उसे बंद करता है। भीतरी ScrollView अपने जेस्चर रखते हैं, इसलिए शीट अपने हैंडल, हेडर और दूसरे स्थिर हिस्सों से खींची जाती है।

इन उदाहरणों में इस्तेमाल

फ़ोटो फ़ीडफ़ोटो स्वाइप करें, थंबनेल से कूदें, किसी भी फ़ोटो को पूरी स्क्रीन पर खोलें और उसका विवरण ऊपर खींचें।MotionPagerMotionHighlightMotionZoomMotionSheet