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`		index ของจุดหยุดแบบควบคุม
`defaultDetent`	`number`	`0`	index ของจุดหยุดที่ใช้เมื่อเปิดโดยไม่มี `detent`
`onDetentChange`	`(index) => void`		ทำงานพร้อม index ของจุดหยุดที่ชีตหยุดนิ่ง
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	ขอบที่ชีตเข้ามา
`modal`	`boolean`	`true`	เพิ่มฉากหลัง เก็บโฟกัสไว้ข้างใน และทำให้หน้าไม่ตอบสนอง
`dismissible`	`boolean`	`true`	การลากเลยจุดหยุดที่เล็กที่สุด ฉากหลัง และ Escape จะปิดมัน
`backdropClassName`	`string`		คลาสของฉากหลัง `backdropStyle` กำหนดสไตล์ inline ของมัน
`transition`	`Transition`	`spring`	เส้นโค้ง timing `{ duration, easing }` หรือสปริง `{ tempo: 'spring', spring }` สปริงรักษาโมเมนตัมไว้เมื่อถูกขัดจังหวะ

props อื่นจะส่งต่อไปยังองค์ประกอบที่เรนเดอร์ className, style และตัวจัดการเหตุการณ์จึงทำงานตามปกติ

เว็บและ React Native

บนเว็บ ชีตแบบโมดัลคือ dialog แบบเนทีฟ แผงเป็นคอลัมน์ flex ที่คุณปรับสไตล์ด้วย className

บน React Native มันเรนเดอร์ใน Modal โปร่งใส และปุ่มย้อนกลับปิดได้ ScrollView ภายในรักษาท่าทางของตัวเอง ชีตจึงลากได้จากที่จับ ส่วนหัว และพื้นที่คงที่อื่น

ใช้ในตัวอย่างเหล่านี้

ฟีดรูปภาพปัดผ่านรูปภาพ กระโดดด้วยภาพย่อ เปิดรูปใดก็ได้แบบเต็มจอ และดึงรายละเอียดขึ้นมาMotionPagerMotionHighlightMotionZoomMotionSheet