Demo

Floating action button ထည့်သွင်းခြင်း

@quan-erp/shared-ui မှ FloatingActionButton / FloatingButton / FloatingContainer ဖြင့် mobile-only primary action ကို ထည့်သွင်းရပါသည်။ isMobile ဖြင့် ပြသမှုကို ထိန်းချုပ်ပြီး၊ bottom nav ရှိပါက နေရာချထားမှုကို ပြောင်းလဲရပါမည်။

ပန်းတိုင်

Mobile list တွင် primary action (create / quick add / multi-action) ကို ရှင်းလင်းစေရန် ဖြစ်ပါသည် — desktop တွင် PageTitle / toolbar တွင် ဆက်လက် ထားရှိရပါမည်။

  • FAB — mobile only; desktop တွင် မပြရပါ
  • FloatingActionButton၊ FloatingButton၊ FloatingContainer — @quan-erp/shared-ui
  • useIsContainInBottomNavBar — bottom-25 vs bottom-5
  • Responsive card list နှင့် တွဲဖက် အသုံးပြုပါ

1. လိုအပ်ချက်များ

isMobile ဖြင့် ခွဲခြားထားသော (သို့မဟုတ် ခွဲခြားမည့်) page နှင့် bottom-nav စစ်ဆေးရန် route path လိုအပ်ပါသည်။

  • @quan-erp/shared-ui နှင့် @quan-erp/base-frontend
  • Path — /${metadata.name}/… (route.add)
  • Mobile card layout ရှိရပါမည်
How to: Mobile responsive →Floating action button (reference) →

2. isMobile + bottom nav gate

FAB မပြသမီ isMobile နှင့် bottom nav ပါ/မပါ ကို တွက်ချက်ရပါမည်။

  • isMobile — desktop တွင် FAB မပြရပါ
  • isContainInBottomNav — path က bottom nav တွင် ရှိပါက true
  • className — absolute + bottom-25 သို့မဟုတ် bottom-5
  • adaptivePosition={true} — အကြံပြုပါသည်
TSXhooks
1import { 2 FloatingActionButton, 3 FloatingButton, 4 FloatingContainer, 5 Button, 6 SCREENS, 7 useMediaQuery, 8 cn, 9} from "@quan-erp/shared-ui"; 10import { useIsContainInBottomNavBar } from "@quan-erp/base-frontend"; 11import { Plus } from "@icon-park/react"; 12import metadata from "../../module.metadata.json" with { type: "json" }; 13 14const isMobile = useMediaQuery(SCREENS.md); 15const isContainInBottomNav = useIsContainInBottomNavBar( 16 `/${metadata.name}/my-page`, 17);
Bottom nav visibility →

3. ခလုတ် တစ်ခု

Primary action တစ်ခု (အများအားဖြင့် create) အတွက် expandable={false} နှင့် FloatingButton အတွင်း Button ထားရှိရပါသည်။

  • {isMobile && (…)} အတွင်းသာ render လုပ်ရပါမည်
  • onClick — desktop PageTitle နှင့် တူညီသော create dialog/sheet
  • Button size="icon-lg" — shared-ui ပုံစံ
JSONsingle FAB
1{isMobile && ( 2 <FloatingActionButton 3 className={cn( 4 "absolute", 5 isContainInBottomNav ? "bottom-25" : "bottom-5", 6 )} 7 adaptivePosition={true} 8 expandable={false} 9 > 10 <FloatingButton> 11 <Button size="icon-lg" onClick={() => handleCreate()}> 12 <Plus /> 13 </Button> 14 </FloatingButton> 15 </FloatingActionButton> 16)}

4. Expandable multi-button

Action အများအပြားကို တစ်ခုတည်းသော FAB တွင် ထားရှိရန် — rowSpan / expandClassName သတ်မှတ်ပြီး FloatingButton + FloatingContainer ကို အသုံးပြုရပါသည်။

  • rowSpan — expanded panel အတွင်း row အရေအတွက်
  • expandClassName — expanded width
  • Label ကို တိုအောင် ထားရှိပါ; desktop handler များနှင့် တူညီရပါမည်
JSONexpandable
1{isMobile && ( 2 <FloatingActionButton 3 rowSpan={2} 4 expandClassName="w-[15rem]" 5 adaptivePosition={true} 6 className={cn( 7 "absolute", 8 isContainInBottomNav ? "bottom-25" : "bottom-5", 9 )} 10 > 11 <FloatingButton> 12 <Plus /> 13 </FloatingButton> 14 <FloatingContainer> 15 <Button className="w-full h-full" onClick={() => actionOne()}> 16 Action One 17 </Button> 18 <Button className="w-full h-full" onClick={() => actionTwo()}> 19 Action Two 20 </Button> 21 </FloatingContainer> 22 </FloatingActionButton> 23)}

5. စစ်ဆေးခြင်း

Mobile / desktop၊ bottom nav ပါ/မပါတို့ကို စစ်ဆေးရပါမည်။

  • Desktop — FAB မမြင်ရပါ; PageTitle တွင် create ရှိရပါမည်
  • Mobile, bottom nav မပါ — bottom-5; tap → create
  • Mobile, bottom nav ပါ — bottom-25; bar ရှင်းလင်းရပါမည်
  • Expandable — expand + action နှစ်ခု အလုပ်လုပ်ရပါမည်
  • SCREENS.md ဖြတ်၍ resize — isMobile အလိုက် FAB ပေါ်/ verd ရပါမည်

အဖြစ်များသော အမှားများ

  • Desktop တွင် FAB ပြသခြင်း
  • အမြဲ bottom-5 — bottom nav အောက် ရောက်ရှိခြင်း
  • useIsContainInBottomNavBar path မှားခြင်း — နေရာချထားမှု မပြောင်းလဲခြင်း
  • Card list မရှိဘဲ dense table ပေါ်တွင် FAB ထားရှိခြင်း
  • FAB နှင့် desktop create handler ကွဲပြားခြင်း