Demo

Pages

မျက်နှာပြင်တိုင်းတွင် shared Page shell ကို အသုံးပြုခြင်းဖြင့် navigation၊ title နှင့် mobile bottom nav တို့ကို တူညီစေပါသည်။

Page shell

မျက်နှာပြင်များကို Page၊ PageTitle နှင့် PageContent ဖြင့် wrap လုပ်ရပါသည်။ Dialog နှင့် Sheet များကို PageContent အတွင်းသာ ထည့်ရပါသည် — Page အောက် sibling အဖြစ် မထားရပါ။

TSXpage
1import { 2 Page, 3 PageContent, 4 PageNavTitle, 5 PageTitle, 6} from "@quan-erp/shared-ui"; 7import metadata from "../../module.metadata.json" with { type: "json" }; 8 9export default function ExamplePage() { 10 return ( 11 <Page 12 pluginName={metadata.name} 13 navMenu={{ menuTitle: <PageNavTitle>Title</PageNavTitle>, leadingBackButton: true }} 14 bottomNav={{ visible: true }} 15 > 16 <PageTitle>{/* title + actions */}</PageTitle> 17 <PageContent> 18 {/* tables, forms, Dialogs */} 19 </PageContent> 20 </Page> 21 ); 22}

Route မှတ်ပုံတင်ခြင်း

Path များကို /${metadata.name} ဖြင့် prefix လုပ်ရပါသည်။ စံ layout စာမျက်နှာများအတွက် AppRegistry.route.add ကို အသုံးပြုပြီး၊ blank သို့မဟုတ် public layout အတွက် AppRegistry.rootRoute.add ကို အသုံးပြုရပါသည်။

Shared UI

Button၊ Form၊ Input၊ EmptyState၊ LoadingState စသည့် @quan-erp/shared-ui primitives များကို ဦးစားပေးအသုံးပြုပါ။ Form များတွင် react-hook-form + zod + FormField / FormMessage ကို အသုံးပြုရပါသည်။