概述
FAB 仅用于移动端；桌面端动作留在 PageTitle / 工具栏。
- useMediaQuery(SCREENS.md)
- useIsContainInBottomNavBar
- bottom-25 与 bottom-5
1. 单按钮
expandable={false}。
TSXsingle FAB
1import {
2 FloatingActionButton,
3 FloatingButton,
4 Button,
5 SCREENS,
6 useMediaQuery,
7 cn,
8} from "@quan-erp/shared-ui";
9import { useIsContainInBottomNavBar } from "@quan-erp/base-frontend";
10import { Plus } from "@icon-park/react";
11import metadata from "../../module.metadata.json" with { type: "json" };
12
13const isMobile = useMediaQuery(SCREENS.md);
14const isContainInBottomNav = useIsContainInBottomNavBar(
15 `/${metadata.name}/my-page`,
16);
17
18{isMobile && (
19 <FloatingActionButton
20 className={cn(
21 "absolute",
22 isContainInBottomNav ? "bottom-25" : "bottom-5",
23 )}
24 adaptivePosition={true}
25 expandable={false}
26 >
27 <FloatingButton>
28 <Button size="icon-lg" onClick={() => handleCreate()}>
29 <Plus />
30 </Button>
31 </FloatingButton>
32 </FloatingActionButton>
33)}2. 可展开多按钮
设置 rowSpan 与 expandClassName。
JSONexpandable
1{isMobile && (
2 <FloatingActionButton
3 rowSpan={2}
4 expandClassName="w-[15rem]"
5 adaptivePosition={true}
6 className={cn("absolute", isContainInBottomNav ? "bottom-25" : "bottom-5")}
7 >
8 <FloatingButton>
9 <Plus />
10 </FloatingButton>
11 <FloatingContainer>
12 <Button className="w-full h-full" onClick={() => actionOne()}>
13 Action One
14 </Button>
15 <Button className="w-full h-full" onClick={() => actionTwo()}>
16 Action Two
17 </Button>
18 </FloatingContainer>
19 </FloatingActionButton>
20)}