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