Floating Action Button

FAB Components

Bao gồm các components:

• Fab - main FAB element
• FabButtons - wrapper chứa nhiều FAB buttons (Speed dial buttons)
• FabButton - Speed dial button bên trong FabButtons contianer
• FabBackdrop - FAB backdrop element (lớp overlay bên phía trên nội dung trang và phía dưới FAB)

FAB Properties

<Fab/> properties

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
morphTo	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
tooltipTrigger	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/> properties

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

<FabButton\> properties

Prop	Type	Default	Description
fabClose	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
tooltipTrigger	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

FAB Events

<Fab/> events

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

<FabButton/> events

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

FAB Slots

Có thể custom FAB React component (<Fab/>) thông qua slots property:

• default - child 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 - child element sẽ được chèn vào trong main FAB link <a/> element
• root - child element sẽ được chèn vào vị trí cuối cùng của main FAB element
• text - child 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 <Page/> container và đặt property slot="fixed"

Ví dụ

Code demo fallback when rendering server side!