MotionSheet

גיליון תחתון, גיליון עליון או מגירה צדדית עם נקודות עצירה, הנפות והעברת גלילה.

אינטרנט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>;

מה הוא עושה בשבילכם

עוקב אחרי גרירות, מתנגד מעבר לנקודת העצירה הגדולה ביותר ומתייצב לפי מהירות השחרור; הנפה מזיזה נקודת עצירה אחת או סוגרת.
גרירות מגע עוברות לתוכן הנגלל: משיכה למטה גוללת קודם את התוכן לראשו ורק אז הגיליון זז.
נקודות עצירה כשברים של המסך, בפיקסלים, או 'content' לגודל הטבעי של התוכן.
גיליון מודאלי שומר את הפוקוס בפנים, הופך את העמוד ללא פעיל ונסגר עם Escape או ברקע.

מתאים ל־

לוח מסננים.
תפריט שיתוף.
מגירת ניווט עם side="start".

Props

Prop	טיפוס	ברירת מחדל	תיאור
`open`	`boolean`	`false`	האם הגיליון מוצג.
`onOpenChange`	`(open) => void`		רץ עם `false` כשהגיליון נסגר בגרירה, בהקשה או ב־Escape.
`detents`	`(number \| 'content')[]`	`['content']`	גדלי מנוחה: שבר מהמסך, פיקסלים, או `'content'`.
`detent`	`number`		אינדקס נקודת עצירה מבוקר.
`defaultDetent`	`number`	`0`	אינדקס נקודת העצירה שבשימוש בפתיחה בלי `detent`.
`onDetentChange`	`(index) => void`		רץ עם האינדקס של נקודת העצירה שבה הגיליון מתייצב.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	הקצה שממנו הגיליון מגיע.
`modal`	`boolean`	`true`	מוסיף רקע, שומר את הפוקוס בפנים והופך את העמוד ללא פעיל.
`dismissible`	`boolean`	`true`	גרירה מעבר לנקודת העצירה הקטנה ביותר, הרקע ו־Escape סוגרים אותו.
`backdropClassName`	`string`		class לרקע; `backdropStyle` מגדיר את הסגנון המוטבע שלו.
`transition`	`Transition`	`spring`	עקומת timing `{ duration, easing }` או קפיץ `{ tempo: 'spring', spring }`. קפיצים שומרים על התנופה שלהם כשמפריעים להם.

props אחרים עוברים לאלמנט המרונדר, כך ש־className, style ומטפלי אירועים עובדים כרגיל.

אינטרנט ו־React Native

באינטרנט גיליון מודאלי הוא dialog נייטיב; הלוח הוא עמודת flex שאתם מעצבים עם className.

ב־React Native הוא מרונדר ב־Modal שקוף וכפתור החזרה סוגר אותו. רכיבי ScrollView פנימיים שומרים על המחוות שלהם, אז גוררים את הגיליון מהידית, מהכותרת ומאזורים סטטיים אחרים.

בשימוש בדוגמאות האלה

פיד תמונותהחליקו בין תמונות, קפצו בעזרת תמונות ממוזערות, פתחו כל תמונה במסך מלא ומשכו למעלה את הפרטים שלה.MotionPagerMotionHighlightMotionZoomMotionSheet