Dialog
Dialog giúp hiển thị các hộp thoại để thông báo với người dùng về các thông tin, yêu cầu, hoặc để người dùng chọn một tùy chọn.
Khác với các component khác, để tạo và đóng mở các dialog ta sẽ sử dụng script API, chứ không phải Vue component.
Dialog Methods
Các methods để làm việc với Dialog:
Tạo Dialog instance
zmp.dialog.create(parameters);
- parameters: Object chứa các dialog parameters
- Method trả về instance của dialog đã tạo
Lấy Dialog instance có sẵn
zmp.dialog.get(el);
- el: HTMLElement hoặc string (CSS Selector) của Dialog element.
- Trả về instance của Dialog
Huỷ Dialog instance
zmp.dialog.destroy(el);
- el: HTMLElement hoặc string (CSS Selector) hoặc object. Dialog element hoặc Dialog instance cần hủy.
Mở Dialog
zmp.dialog.open(el, animate);
- el: HTMLElement hoặc string (CSS Selector). Dialog element cần mở.
- animate: boolean. Mở dialog với animation hoặc không.
- Trả về instance của Dialog
Đóng Dialog
zmp.dialog.close(el, animate);
- el: HTMLElement hoặc string (with CSS Selector). Dialog element cần đóng.
- animate: boolean. Đóng dialog với animation hoặc không.
- Trả về instance của dialog
Dialog Parameters
Các parameters khả dụng khi tạo một Dialog instance:
| Parameter | Type | Default | Description |
|---|---|---|---|
| el | HTMLElement | Dialog element. Trường hợp đã có một dialog element bằng HTML và muốn tạo mới một Dialog instance sử dụng lại HTML element | |
| containerEl | HTMLElement | string | Cho phép mount dialog trên một element cụ thể thay vì app root element | |
| backdrop | boolean | true | Enables lớp overlay phía sau dialog |
| closeByBackdropClick | boolean | false | Cho phép đóng dialog khi người dùng click/ chạm vào vùng backdrop hay không |
| animate | boolean | true | Đóng/Mở dialog với animation hoặc không. Có thể overide trong .open() và .close() methods |
| title | string | Dialog title (Bắt buộc) | |
| text | string | Dialog inner text | |
| content | string | Custom Dialog content. Cho phép sử dụng HTML content | |
| buttons | array | [] | Mảng các dialog buttons, Mỗi button là một object với các Button Parameters |
| verticalButtons | boolean | false | Các dialog buttons sẽ chuyển sang dạng layout dọc |
| destroyOnClose | boolean | false | Khi bật sẽ tự động destroy dialog instance khi đóng dialog |
| onClick | function(dialog, index) | Callback function thực thi sau khi user click vào dialog button. Với arguments là dialog instance và index của button đã click | |
| cssClass | string | Them class cho dialog | |
| on | object | Object chứa các Events Handlers |
Mỗi dialog cần được tạo với title parameters
Button Parameters
Mỗi object trong parameter buttons của Dialog chứa các thuộc tính của các nút bên trong Dialog đó. Cụ thể:
| Parameter | Type | Default | Description |
|---|---|---|---|
| text | string | Button text, có thể là HTML string | |
| bold | boolean | false | Đặt font weight của button thành bold |
| color | string | Button color, xem thêm tại default colors | |
| close | boolean | true | Close button, đóng dialog khi click |
| cssClass | string | Thêm class cho button element | |
| onClick | function(dialog, e) | Callback function that thực thi sau khi button được click |
Dialog Methods & Properties
Tạo một Dialog bằng cách:
var dialog = zmp.dialog.create({
/* parameters */
});
Sau đó ta sẽ có dialog instance với các methods và properties:
| Properties | Description |
|---|---|
| dialog.el | Dialog HTML element |
| dialog.$el | ZMP instance với dialog HTML element |
| dialog.backdropEl | Backdrop HTML element |
| dialog.$backdropEl | ZMP instance với backdrop HTML element |
| dialog.params | Dialog parameters |
| dialog.opened | Xác định dialog đang mở hay đóng |
| Methods | Description |
|---|---|
| dialog.open(animate) | Mở dialog * animate - boolean (mặc định true) - dialog mở lên với animation hoặc không |
| dialog.close(animate) | Đóng dialog. * animate - boolean (mặc định true) - Xác định đóng dialog với animation hoặc không |
| dialog.setProgress(progress, duration) | Chỉnh progress khi sử dụng Dialog Progress * progress - number - progressbar progress (từ 0 đén 100) * duration - number (ms) - thời gian thay đổi progressbar progress |
| dialog.setTitle(title) | Chỉnh tiêu đề của dialog * title - string - dialog title |
| dialog.setText(text) | Chỉnh nội dung bên trong dialog * text - string - dialog text |
| dialog.destroy() | Destroy dialog |
| dialog.on(event, handler) | Thêm event handler |
| dialog.once(event, handler) | Thêm event handler và xóa đi sau khi event kích hoạt |
| dialog.off(event, handler) | Xóa event handler |
| dialog.off(event) | Xóa tất cả handlers cho event cụ thể |
| dialog.emit(event, ...args) | Kích hoạt event |
Dialog Events
Dialog instance bắn các events trên cả dialog instance (được tạo ra từ zmp.dialog.create) và zmp instance. ZMP instance events sẽ cùng tên với dialog instance event và thêm prefix dialog.
| Event | Arguments | Target | Description |
|---|---|---|---|
| open | dialog | dialog | Event sẽ được kích hoạt khi dialog bắt đầu mở. Argument nhận vào dialog instance |
| dialogOpen | dialog | zmp | |
| opened | dialog | dialog | Event sẽ được kích hoạt sau khi dialog mở xong. Argument nhận vào dialog instance |
| dialogOpened | dialog | zmp | |
| close | dialog | dialog | Event sẽ được kích hoạt sau khi dialog bắt đầu đóng. Argument nhận vào dialog instance |
| dialogClose | dialog | zmp | |
| closed | dialog | dialog | Event sẽ được kích hoạt sau khi dialog đã đóng. Argument nhận vào dialog instance |
| dialogClosed | dialog | zmp | |
| beforeDestroy | dialog | dialog | Event sẽ được kích hoạt trước khi dialog instance bị hủy. Argument nhận vào dialog instance |
| dialogBeforeDestroy | dialog | zmp |
Ví dụ
Code demo fallback when rendering server side!