Floating Action Button

Cú pháp

• <zmp-fab>: Component FAB chính
• <zmp-fab-buttons>: Wrapper chứa nhiều FAB buttons (Speed dial buttons)
• <zmp-fab-button>: Speed dial button bên trong FabButtons contianer
• <zmp-fab-backdrop>: Lớp overlay bên phía trên nội dung trang và phía dưới FAB

Properties

Fab

Prop	Type	Default	Description
href	string | boolean		Đường dẫn đến page cụ thể. Đặt :href="false" FAB sẽ không thêm thẻ href
target	string		Giá trị thuộc tính target của link: _blank, _self, _parent, _top, framename.
position	string	right-bottom	Vị trí render FAB. Các vị trí hợp lệ: right-bottom center-bottom cleft-bottom right-center center-center cleft-center cright-top center-top cleft-top
morph-to	string		CSS selector của element đích thực hiện hiệu ứng chuyển Morph Transition từ FAB
text	string		Thêm text label cho FAB
tooltip	string		Nội dung của tooltip sẽ hiển thị khi click/press FAB
tooltip-trigger	string	hover	Xác định điều kiện xuất hiện tooltip, với các giá trị: hover, click hoặc manual
slot	string		Để vị trí FAB fixed trên Page, cần đặt FAB bên trong <Page/> container và đặt property slot="fixed"
large	boolean		FAB kích thước lớn
small	boolean		FAB kích thước nhỏ
disabled	boolean	false	Vô hiệu hóa FAB

FabButtons

Prop	Type	Default	Description
position	string	top	Vị trí render các Speed dial buttons: top - Các buttons sẽ render phía trên FAB right - Các buttons sẽ render phía phải FAB bottom - Các buttons sẽ render phía dưới FAB left - Các buttons sẽ render phía bên trái FAB center - Các buttons sẽ render xung quanh FAB

FAB Button

Prop	Type	Default	Description
fab-close	boolean	false	Đóng FAB khi click vào button
target	string		Giá trị thuộc tính target của link: _blank, _self, _parent, _top, framename.
label	string		Button text label
tooltip	string		Nội dung của tooltip sẽ hiển thị khi click/press FAB
tooltip-trigger	string	hover	Xác định điều kiện xuất hiện tooltip, với các giá trị: hover, click hoặc manual

Events

Fab

Event	Description
@click	Event được kích hoạt khi người dùng click/press lên FAB

FAB Button

Event	Description
@click	Event được kích hoạt khi người dùng click/press lên FabButton (Speed Dial Button)

Slots

Fab

Slot	Vị trí được chèn vào
default	Element được chèn vào main FAB link <a/> element. Trường hợp children là FabButtons, sẽ được chèn vào vị trí cuối cùng của main FAB element
link	Element sẽ được chèn vào trong main FAB link <a/> element
root	Element sẽ được chèn vào vị trí cuối cùng của main FAB element
text	Element sẽ đực chèn vào text element của FAB

Để vị trí FAB fixed trên Page, cần đặt FAB bên trong <zmp-page/> container và đặt property slot="fixed"

Ví dụ

Code demo fallback when rendering server side!