Chuyển tới nội dung chính
ZZalo Platforms

Sheet

Cập nhật lần cuối:
import { Sheet } from "zmp-ui";

Dùng để hiển thị thông tin bổ sung hoặc để người dùng thực hiện một số hành động phụ liên quan đến nội dung chính trên màn hình, tiếp tục sử dụng tiếp một tính năng của ứng dụng

Ví dụ​

Bảng thuộc tính​

SheetProps​

PropertyTypeRequiredDescription
maskbooleanNoMask là một lớp overlay màu xám được phủ lên các thành phần bên dưới hộp thoại của picker, ngăn không cho người dùng tương tác với các nội dung đó và tập trung vào hộp thoại được mở. (default: true)
afterClose() => voidNoCallback được gọi sau khi sheet được đóng.
onClose(e: React.SyntheticEvent) => voidNoCallback được gọi khi người dùng yêu cầu đóng sheet. Cần phải cập nhật lại giá trị của `visible` nếu có truyền vào trong callback này.
maskClosablebooleanNoCho phép tự động đóng sheet khi click vào mask. (default: true)
visiblebooleanNoTrạng thái mở hay đóng của sheet. Cần phải sử dụng cùng với `onClose` để cập nhật lại giá trị của `visible` khi người dùng yêu cầu đóng sheet, nếu không sheet sẽ không đóng được. (default: false)
titlestringNoTiêu đề của sheet, hiển thị ở phía trên cùng.
modalStyleReact.CSSPropertiesNoInline style của sheet.
maskStyleReact.CSSPropertiesNoInline style của mask.
modalClassNamestringNoCSS class của sheet.
maskClassNamestringNoCSS class của mask.
widthstring | numberNoChiều rộng của sheet. Nếu không thiết lập, sheet sẽ có chiều rộng mặc định là toàn màn hình.
heightstring | numberNoChiều cao của sheet. Nếu không thiết lập, sheet sẽ có chiều cao mặc định theo nội dung.
childrenReact.ReactNodeNoNội dung cần được hiển thị bên trong bottom sheet.
zIndexnumberNoĐộ sâu của sheet, dùng để xác định thứ tự hiển thị của sheet đối với các phần tử lơ lửng khác nếu có.
handlerbooleanNoSheet handler là một thanh màu đen nằm ngang ở phía trên cùng của sheet, dùng để kéo sheet lên hoặc xuống. (default: true)
autoHeightbooleanNoTự động điều chỉnh chiều cao của sheet theo nội dung. (default: false)
contentRefReact.MutableRefObjectNoTham chiếu đến phần tử chứa nội dung của sheet trên cây DOM.
swipeToClosebooleanNoCho phép người dùng đóng sheet bằng thao tác vuốt xuống trên nội dung của sheet. (default: true)
snapPointsnumber[] | ((props: { sheetModalHeight: number }) => number[])NoKhai báo các snap points của sheet. Snap points là các điểm mà tại đó sheet sẽ dừng lại khi người dùng kéo lên hoặc xuống. Số lượng snap points là không giới hạn. Mỗi snap point có giá trị từ 0 với 1 với 0 là khi sheet hoàn toàn mở và 1 là khi sheet hoàn toàn đóng. Bên cạnh truyền snap point dưới dạng một số cố định, các hàm để tính toán các snap points dựa trên chiều cao của sheet cũng có thể được truyền vào. Không giới hạn số lượng snap points.
defaultSnapPointnumberNoSnap point mặc định khi mở sheet. Giá trị được truyền vào dưới dạng index trong mảng `snapPoints`.
onSnap(snapPoint: number) => voidNoCallback được gọi khi sheet được snap đến một snap point mới.
unmountOnClosebooleanNoMặc định khi người dùng đóng sheet, giao diện của nó vẫn còn được render trong DOM và chỉ bị ẩn đi. Thiết lập này cho phép gỡ sheet ra khỏi cây DOM hoàn toàn sau khi đóng. Thiết lập này có thể giúp giảm bộ nhớ được sử dụng trong trường hợp sheet có nội dung lớn. Tuy nhiên, khi sheet được mở lại, tất cả nội dung sẽ phải render lại từ đầu. (default: false)

SheetContentProps​

PropertyTypeRequiredDescription
titlestringNoTiêu đề của sheet, hiển thị ở phía trên cùng.
childrenReact.ReactNodeNoNội dung cần được hiển thị bên trong bottom sheet.
ariaIdstringNo
onVisibleChanged(visible: boolean) => voidNoCallback được gọi khi trạng thái hiển thị của sheet thay đổi.
onMouseDownReact.MouseEventHandlerNo
onMouseUpReact.MouseEventHandlerNo
modalRefReact.MutableRefObjectNoTham chiếu đến phần tử chứa nội dung của sheet trên cây DOM.

SheetRef​

PropertyTypeRequiredDescription
snapTo(snapPoint: number) => voidNoHàm dùng để snap đến một snap point đã khai báo. Xem thêm về snapPoints của `Sheet`.
sheetHTMLDivElementNoTrỏ đến phần tử của sheet trên cây DOM