演示

布局与导航

通过 @quan-erp/shared-ui 使用 Shadcn 的布局与导航组件:Tabs、Accordion、Breadcrumb、Sidebar、分隔线等。

用法

用于页面内结构。应用壳层(侧边菜单、主页快捷方式)请参阅 UI Components 下的 Quan ERP Doc。

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";