MotionSheet

Sheet đáy, sheet đỉnh hoặc ngăn kéo bên với các điểm dừng, cú hất và chuyển giao cuộn.

WebReact NativeLớp phủ

Thử ngay

Đang chuẩn bị ví dụ…

JavaScript đang tắt. Đoạn mã bên dưới là ví dụ đầy đủ.

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;
}

Cách dùng ngắn nhất

Filters.jsx

<MotionSheet open={open} onOpenChange={setOpen} detents={[0.45, 0.92]}>
  <FilterList />
</MotionSheet>;

Những gì nó xử lý giúp bạn

Bám theo thao tác kéo, có lực cản khi vượt điểm dừng lớn nhất và dừng theo tốc độ bạn thả; một cú hất chuyển một điểm dừng hoặc đóng lại.
Thao tác kéo cảm ứng được chuyển cho nội dung cuộn: kéo xuống sẽ cuộn nội dung về đầu trước khi sheet di chuyển.
Điểm dừng dưới dạng tỉ lệ màn hình, pixel hoặc 'content' theo kích thước tự nhiên của nội dung.
Sheet dạng modal giữ focus bên trong, làm trang vô hiệu và đóng bằng Escape hoặc lớp nền.

Dùng cho

Bảng bộ lọc.
Menu chia sẻ.
Ngăn kéo điều hướng với side="start".

Props

Prop	Kiểu	Mặc định	Mô tả
`open`	`boolean`	`false`	Sheet có đang hiển thị hay không.
`onOpenChange`	`(open) => void`		Chạy với `false` khi sheet bị đóng bằng kéo, chạm hoặc Escape.
`detents`	`(number \| 'content')[]`	`['content']`	Kích thước khi nghỉ: tỉ lệ màn hình, pixel hoặc `'content'`.
`detent`	`number`		Index điểm dừng được kiểm soát.
`defaultDetent`	`number`	`0`	Index điểm dừng dùng khi mở mà không có `detent`.
`onDetentChange`	`(index) => void`		Chạy với index của điểm dừng nơi sheet dừng lại.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Cạnh mà sheet xuất hiện từ đó.
`modal`	`boolean`	`true`	Thêm lớp nền, giữ focus bên trong và làm trang vô hiệu.
`dismissible`	`boolean`	`true`	Kéo quá điểm dừng nhỏ nhất, lớp nền và Escape sẽ đóng nó.
`backdropClassName`	`string`		Class cho lớp nền; `backdropStyle` đặt style nội tuyến của nó.
`transition`	`Transition`	`spring`	Đường cong timing `{ duration, easing }` hoặc lò xo `{ tempo: 'spring', spring }`. Lò xo giữ đà khi bị ngắt.

Các props khác được chuyển tới phần tử được render, nên className, style và trình xử lý sự kiện hoạt động như bình thường.

Web và React Native

Trên web, sheet dạng modal là một dialog native; bảng là một cột flex mà bạn tạo kiểu bằng className.

Trên React Native, nó render trong một Modal trong suốt và nút quay lại sẽ đóng nó. Các ScrollView bên trong giữ cử chỉ riêng, nên sheet được kéo từ tay cầm, phần đầu và các vùng tĩnh khác.

Được dùng trong các ví dụ này

Bảng tin ảnhVuốt qua ảnh, nhảy bằng ảnh thu nhỏ, mở bất kỳ ảnh nào ra toàn màn hình và kéo lên xem chi tiết.MotionPagerMotionHighlightMotionZoomMotionSheet