အနှစ်ချုပ်
FAB သည် mobile UI ပုံစံသာ ဖြစ်ပါသည် — desktop တွင် ဖျောက်ထားရပြီး၊ လုပ်ဆောင်ချက်များကို PageTitle သို့မဟုတ် toolbar တွင် ထားရှိရပါသည်။ FloatingActionButton၊ FloatingButton နှင့် FloatingContainer ကို @quan-erp/shared-ui မှ import လုပ်ရပါသည်။
- isMobile = useMediaQuery(SCREENS.md)
- isContainInBottomNav = useIsContainInBottomNavBar(`/${metadata.name}/…`)
- Bottom nav မြင်ရလျှင် bottom-25၊ မမြင်ရလျှင် bottom-5 အသုံးပြုရပါသည်
- Page bottomNav / back-button တွဲသုံးပုံအတွက် Bottom nav visibility ကို ကြည့်ရပါသည်
1. Button တစ်ခု
လုပ်ဆောင်ချက် တစ်ခုတည်းအတွက် 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. Expandable အများ
ဆက်စပ် လုပ်ဆောင်ချက် အများအပြားကို FAB တစ်ခုတွင် မျှဝေသုံးမည်ဆိုပါက 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)}