為什麼捐款
API 瀏覽器
浮動操作按鈕

浮動操作按鈕 (FAB) 代表頁面中的主要操作。但它不限於單一操作。它也可以包含任意數量的子操作。更重要的是,它也可以在您的頁面或版面配置中內嵌使用。

請注意,您不需要 QLayout 即可使用 FAB。

載入 QFab API...
載入 QFabAction API...

用法

FAB 有兩種型別:可展開型(具有子操作)和不可展開型。

提示

如需詳盡的選項列表,請閱讀本頁頂端的 API 卡片。

不可展開

如果您想要不可展開的 FAB,您只需要一個圓形按鈕 – 如果在 QLayout 上使用,則需包裝在 QPageSticky 中。

不可展開



可展開

可展開



內部標籤

內部標籤



切換內部標籤



當標籤是內部標籤且您的 QFab 垂直(向上或向下)打開時,您還可以選擇如何垂直對齊子操作

垂直操作對齊



外部標籤

預設情況下,當主 QFab(而非子操作)上的標籤是外部標籤時,它只會在 QFab 開啟時顯示。但是,您可以透過為 hide-label 屬性設定布林值來覆寫此行為。

外部標籤



自訂樣式外部標籤



切換外部標籤



隱藏圖示

如果我們隱藏圖示(透過特定屬性),我們至少應該使用內部標籤

隱藏圖示



邊距

QFab 的預設邊距為 “md”,而 QFabAction 的預設邊距為 “sm”。但是,您可以使用 padding 屬性來自訂它(也接受 CSS 單位)

調整邊距



方形樣式

方形樣式



插槽
v2.4+

請注意下方 QFab 和 QFabAction 的插槽

插槽:icon、active-icon 和 label



搭配 QPageSticky

搭配 QPageSticky



可拖曳

以下是使用 TouchPan 使 QFab 可以在螢幕上拖曳的範例。

可拖曳