Demo

Layout & Navigation

Tabs၊ accordion၊ breadcrumb၊ sidebar နှင့် divider စသည့် layout နှင့် navigation primitives များကို @quan-erp/shared-ui မှတဆင့် Shadcn အဖြစ် ရယူအသုံးပြုရပါသည်။

အသုံးပြုပုံ

ဤ component များကို စာမျက်နှာအတွင်း ဖွဲ့စည်းမှုအတွက် အသုံးပြုရပါသည်။ App chrome (side menu၊ home shortcuts) အတွက် UI Components အောက်ရှိ Quan ERP docs ကို သီးခြား ကြည့်ရပါသည်။

Accordion

Collapsible sections for FAQs and dense settings.

TSXAccordion
1import { 2 Accordion, 3 AccordionItem, 4 AccordionTrigger, 5 AccordionContent, 6} from "@quan-erp/shared-ui";

Tabs

Tabbed panels for switching related views.

TSXTabs
1import { 2 Tabs, 3 TabsList, 4 TabsTrigger, 5 TabsContent, 6} from "@quan-erp/shared-ui"; 7 8<Tabs defaultValue="general"> 9 <TabsList> 10 <TabsTrigger value="general">General</TabsTrigger> 11 <TabsTrigger value="advanced">Advanced</TabsTrigger> 12 </TabsList> 13 <TabsContent value="general">{/* … */}</TabsContent> 14</Tabs>

Separator

Horizontal or vertical visual divider.

TSXSeparator
import { Separator } from "@quan-erp/shared-ui"; <Separator />

Scroll Area

Custom scrollable region with styled scrollbars.

TSXScroll Area
import { ScrollArea } from "@quan-erp/shared-ui"; <ScrollArea className="h-72 w-full">{/* … */}</ScrollArea>

Resizable

Resizable split panels.

TSXResizable
1import { 2 ResizablePanelGroup, 3 ResizablePanel, 4 ResizableHandle, 5} from "@quan-erp/shared-ui";