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