Sheet Modal
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 |
| subTitle | string | Thêm sub title cho sheet modal |
| closeButton | boolean | Hiển thị button đóng modal hoặc không |
| backdrop | boolean | Bật lớp overlay phía dưới sheet modal |
| backdropEl | 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 |
| closeByBackdropClick | 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 |
| closeByOutsideClick | 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 |
| closeOnEscape | boolean | Nếu bật, người dùng có thể đóng modal sheet bằng cách nhấn nút esc |
| swipeToClose | boolean | Cho phép vuốt để đóng sheet modal |
| swipeToStep | 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 |
| swipeHandler | 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 |
| containerEl | HTMLElement | string | Element mà modal được gắn vào (mặc định sẽ là app root element) |
Sheet Modal Events
| Event | Prop | Description |
|---|---|---|
| sheetOpen | onSheetOpen | Event sẽ được triggered khi Sheet Modal bắt đầu opening animation |
| sheetOpened | onSheetOpened | Event sẽ được triggered sau khi Sheet Modal mở và hoàn thành opening animation |
| sheetClose | onSeetClose | Event sẽ được triggered khi Sheet Modal bắt đầu closing animation |
| sheetClosed | onSheetClosed | Event sẽ được triggered sau khi Sheet Modal đóng và hoàn thành closing animation |
| sheetStepOpen | onSheetStepOpen | Event sẽ được triggered khi phần Sheet swipe step được mở |
| sheetStepClose | onSheetStepClose | Event sẽ được triggered khi phần Sheet swipe step đóng |
| sheetStepProgress | onSheetStepProgress | 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
<Sheet/> component có các slots để tùy chỉnh elements:
- 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
<Sheet>
<span slot='fixed'>Fixed slot</span>
<span slot='static'>Static slot</span>
<span>Default slot</span>
</Sheet>
Renders to
<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 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!