Sheet Modal
Cú pháp
<zmp-sheet>
Sheet Modal Properties
| Prop | Type | Description |
|---|---|---|
| position | string | Vị trí mà sheet modal xuất hiện, có thể là top hoặc bottom. Mặc định position sẽ có giá trị là bottom |
| top | boolean | Cách khác để set position="top" |
| bottom | boolean | Cách khác để set position="bottom" |
| title | string | Thêm title cho sheet modal |
| sub-title | string | Thêm sub title cho sheet modal |
| close-button | boolean | Hiển thị button đóng modal hoặc không |
| backdrop | boolean | Bật lớp overlay phía dưới sheet modal |
| backdrop-el | string | object | HTML element hoặc CSS selector của backdrop element tùy chỉnh |
| opened | boolean | Cho phép đóng/mở modal sheet |
| close-by-backdrop-click | boolean | Nếu bật, sẽ đóng modal sheet khi người dùng click vào backdrop. Mặc định sẽ kế thừa giá trị được thiết lập tại app parameter |
| close-by-outside-click | boolean | Nếu bật, sẽ đóng modal sheet khi người dùng click ngoài nó. Mặc định sẽ kế thừa giá trị được thiết lập tại app parameter |
| close-on-escape | boolean | Nếu bật, người dùng có thể đóng modal sheet bằng cách nhấn nút esc |
| swipe-to-close | boolean | Cho phép vuốt để đóng sheet modal |
| swipe-to-step | boolean | Khi bật, có thể chia sheet đã mở thành 2 trạng thái: đã mở một phần và mở hoàn toàn (Dùng trong trường hợp chia sheet modal thành các bước). Lưu ý: Thêm class: sheet-modal-swipe-step vào container element của step 1 |
| swipe-handler | HTMLElement | string | Có thể truyền HTML element hoặc CSS selector của một element tùy chỉnh dùng làm vị trí vuốt. (cần bật swipeToClose or swipeToStep) |
| animate | boolean | Cho phép modal mở/đóng với animation hay không |
| container-el | HTMLElement | string | Element mà modal được gắn vào (mặc định sẽ là app root element) |
Sheet Modal Events
| Event | Description |
|---|---|
| @sheet:open | Event sẽ được triggered khi Sheet Modal bắt đầu opening animation |
| @sheet:opened | Event sẽ được triggered sau khi Sheet Modal mở và hoàn thành opening animation |
| @sheet:close | Event sẽ được triggered khi Sheet Modal bắt đầu closing animation |
| @sheet:closed | Event sẽ được triggered sau khi Sheet Modal đóng và hoàn thành closing animation |
| @sheet:stepopen | Event sẽ được triggered khi phần Sheet swipe step được mở |
| @sheet:stepclose | Event sẽ được triggered khi phần Sheet swipe step đóng |
| @sheet:stepprogress | Event sẽ được triggered khi trạng thái của Sheet swipe step ở giữa các trạn thái đã mở và đã đóng. Đối số event với event.detail là number biểu thị sheet step đang mở(từ 0 đến 1) |
Sheet Modal Slots
| Slot | Description |
|---|---|
| default | Element sẽ được chèn dưới dạng con của scrollable <div className="sheet-modal-inner"/> element |
| static | Giống default |
| fixed | Element sẽ được chèn phía trước scrollable <div className="sheet-modal-inner"/> element |
<zmp-sheet>
<template #fixed>Fixed slot</template>
<template #static>Static slot</template>
<span>Default slot</span>
</zmp-sheet>
Renders thành
<div className="sheet-modal">
<span>Fixed slot</span>
<div className="sheet-modal-inner">
<span>Default slot</span>
<span>Static slot</span>
</div>
</div>
Đóng và mở Sheet Modal
Có thể điều khiển trạng thái đóng, mở Sheet Modal:
- Sử dụng Sheet Modal API
- Bằng các xác định giá trị true hoặc false cho
openedprop - Bằng cách click lên Link hoặc Button đã xác dịnh sheetOpen property (để mở) và sheetClose property để đóng
Sheet Modal Instance Methods
| Method | Description |
|---|---|
| sheet.open(animate) | Mở sheet. Với animate - boolean (mặc định true): Xác định mở sheet modal với animation hoặc không |
| sheet.close(animate) | Đóng sheet. Với animate - boolean (mặc định true): Xác định đóng sheet modal với animation hoặc không |
| sheet.stepOpen() | Mở rộng sheet swipe step |
| sheet.stepClose() | Thu hẹp sheet swipe step |
| sheet.stepToggle() | Toggle (Đóng hoặc mở) sheet swipe step |
| sheet.setSwipeSet() | Cập nhật vị trí step. Bắt buộc gọi hàm này sau khi nội dung của sheet modal bị thay đổi trực tiếp khi nó vẫn còn đang mở |
| sheet.destroy() | Hủy instance sheet |
| sheet.on(event, handler) | Thêm event handler |
| sheet.once(event, handler) | Thêm event handler và sẽ được hủy sau khi event fired |
| sheet.off(event, handler) | Xóa event handler |
| sheet.off(event) | Xóa tất cả các handlers cho một event xác định |
| sheet.emit(event, ...args) | Tự phát sinh event theo ý muốn |
Ví dụ
Code demo fallback when rendering server side!