Action Sheet

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:

• <zmp-actions> - Component chính để tạo ra một action sheet và xử lý các logic bật tắt.
• <zmp-actions-group> - Group các action có liên quan với nhau lại và render ra các sperator giữa các group.
• <zmp-actions-button> - Component để tạo ra một button trong action sheet
• <zmp-actions-label> - Component để tạo ra một label trong action sheet

Properties

Actions

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
backdrop-el	string | object		HTML element hoặc CSS selector của backdrop tùy chỉnh
close-by-backdrop-click	boolean	true	Khi kích hoạt, người dùng có thể đóng action sheet bằng cách click và backdrop
close-by-outside-click	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
container-el	HTMLElement | string		Element chứa action sheet modal, mặc định sẽ là app root element

Actions Label

Prop	Type	Default	Description
bold	boolean	false	Đặt font weight cho label thành bold

Actions Button

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

Events

Action Sheet

Event	Description
@actions:open	Event sẽ khích hoạt khi Action Sheet bắt đầu mở
@actions:opened	Event sẽ khích hoạt khi sau khi Action Sheet đã mở
@actions:close	Event sẽ khích hoạt khi Action Sheet bắt đầu đóng
@actions:closed	Event sẽ khích hoạt khi sau khi Action Sheet đã đóng

Ví dụ

Code demo fallback when rendering server side!