Action Sheet là một slide-up pane, có thể sử dụng action sheets để nhắc nhở người dùng xác nhận sẽ thực hiện một hành động quan trọng/ nguy hiểm. Action sheet bao gồm tiêu đề và các Buttons, ngoài ra có thể tự tùy chỉnh.
Action Sheet Components
Nhóm các component liên quan:
- Actions - action sheet element
- ActionsGroup - action sheet buttons group
- ActionsButton - action sheet button
- ActionsLabel - action sheet label
Action Sheet Properties
<Actions/> properties
| Prop | Type | Default | Description |
|---|
| opened | boolean | false | Giúp mở/đóng Action sheet |
| backdrop | boolean | true | Kích hoạt lớp overlay backdrop phía sau action sheet |
| backdropEl | string | object | | HTML element hoặc CSS selector của backdrop tùy chỉnh |
| closeByBackdropClick | boolean | true | Khi kích hoạt, người dùng có thể đóng action sheet bằng cách click và backdrop |
| closeByOutsideClick | boolean | false | Nếu bật, người dùng có thể đóng action sheet bằng cách click vào ngoài action sheet (trường hợp tắt backdrop) |
| animate | boolean | true | Bật/tắt hiệu ứng khi đóng/ mở action sheet modal |
| containerEl | HTMLElement | string | | Element chứa action sheet modal, mặc định sẽ là app root element |
<ActionsLabel/> properties
| Prop | Type | Default | Description |
|---|
| bold | boolean | false | Đặt font weight cho label thành bold |
| Prop | Type | Default | Description |
|---|
| bold | boolean | false | Đặt font weight cho button thành bold |
| close | boolean | true | Quyết định khi click button sẽ đóng action sheet hay không |
Action Sheet Events
| Event | Prop | Description |
|---|
| actionsOpen | onActionsOpen | Event sẽ khích hoạt khi Action Sheet bắt đầu mở |
| actionsOpened | onActionsOpened | Event sẽ khích hoạt khi sau khi Action Sheet đã mở |
| actionsClose | onActionsClose | Event sẽ khích hoạt khi Action Sheet bắt đầu đóng |
| actionsClosed | onActionsClosed | Event sẽ khích hoạt khi sau khi Action Sheet đã đóng |
Ví dụ
Code demo fallback when rendering server side!