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