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'.
मोडल शीट फोकस आत ठेवते, पान निष्क्रिय करते आणि 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 style सेट करते.
`transition`	`Transition`	`spring`	टायमिंग वक्र `{ duration, easing }` किंवा spring `{ tempo: 'spring', spring }`. spring व्यत्यय आल्यावर त्यांची गती राखतात.

इतर props रेंडर होणाऱ्या एलिमेंटकडे जातात, त्यामुळे className, style आणि इव्हेंट हँडलर नेहमीप्रमाणे चालतात.

वेब आणि React Native

वेबवर मोडल शीट नेटिव्ह dialog आहे; पॅनेल हा तुम्ही className ने शैली देता असा flex स्तंभ आहे.

React Native वर ते पारदर्शक Modal मध्ये रेंडर होते आणि मागे बटण ते बंद करते. आतील ScrollView त्यांचे स्वतःचे हावभाव राखतात, त्यामुळे शीट तिच्या हँडल, हेडर आणि इतर स्थिर भागांतून ओढली जाते.

या उदाहरणांमध्ये वापरलेले

फोटो फीडफोटोंमधून स्वाइप करा, थंबनेलने उडी घ्या, कोणताही फोटो पूर्ण स्क्रीनवर उघडा आणि त्याचे तपशील वर ओढा.MotionPagerMotionHighlightMotionZoomMotionSheet