UI 组件

概述

Linch Desktop Core 内置了一套基于 shadcn/ui 封装的 UI 组件，可以直接导入使用。

导入方式

import {
  Button,
  Badge,
  Dialog,
  DropdownMenu,
  ScrollArea,
  Separator,
  Switch,
  Tabs,
  Tooltip,
} from '@linch-tech/desktop-core';

Button

按钮组件，支持多种变体和尺寸。

import { Button, buttonVariants } from '@linch-tech/desktop-core';

// 基本用法
<Button>默认按钮</Button>
<Button variant="secondary">次要按钮</Button>
<Button variant="destructive">危险按钮</Button>
<Button variant="outline">轮廓按钮</Button>
<Button variant="ghost">幽灵按钮</Button>
<Button variant="link">链接按钮</Button>

// 尺寸
<Button size="sm">小按钮</Button>
<Button size="default">默认</Button>
<Button size="lg">大按钮</Button>
<Button size="icon">图标</Button>

// 禁用状态
<Button disabled>禁用</Button>

Badge

徽标组件，用于状态标识。

import { Badge, badgeVariants } from '@linch-tech/desktop-core';

<Badge>默认</Badge>
<Badge variant="secondary">次要</Badge>
<Badge variant="destructive">危险</Badge>
<Badge variant="outline">轮廓</Badge>

Dialog

对话框组件。

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from '@linch-tech/desktop-core';

<Dialog>
  <DialogTrigger asChild>
    <Button>打开对话框</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>标题</DialogTitle>
      <DialogDescription>描述文本</DialogDescription>
    </DialogHeader>
    <div>对话框内容</div>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">取消</Button>
      </DialogClose>
      <Button>确认</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

DropdownMenu

下拉菜单组件。

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
} from '@linch-tech/desktop-core';

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">打开菜单</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>我的账户</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>个人资料</DropdownMenuItem>
    <DropdownMenuItem>设置</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>退出登录</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

ScrollArea

滚动区域组件，自定义滚动条样式。

import { ScrollArea, ScrollBar } from '@linch-tech/desktop-core';

<ScrollArea className="h-72 w-48 rounded-md border">
  <div className="p-4">
    {/* 大量内容 */}
  </div>
</ScrollArea>

// 水平滚动
<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
  <div className="flex w-max space-x-4 p-4">
    {/* 横向内容 */}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

Separator

分隔线组件。

import { Separator } from '@linch-tech/desktop-core';

<Separator />
<Separator orientation="vertical" className="h-4" />

Switch

开关组件。

import { Switch } from '@linch-tech/desktop-core';

const [enabled, setEnabled] = useState(false);

<Switch checked={enabled} onCheckedChange={setEnabled} />
<Switch disabled />

Tabs

标签页组件。

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@linch-tech/desktop-core';

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">标签 1</TabsTrigger>
    <TabsTrigger value="tab2">标签 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">标签 1 内容</TabsContent>
  <TabsContent value="tab2">标签 2 内容</TabsContent>
</Tabs>

工具提示组件。

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
} from '@linch-tech/desktop-core';

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">悬停查看</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>提示内容</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

样式定制

所有组件都支持 className prop 进行样式定制：

<Button className="bg-gradient-to-r from-pink-500 to-yellow-500">
  渐变按钮
</Button>

使用 cn 工具函数合并类名：

import { cn } from '@linch-tech/desktop-core';

<Button className={cn("custom-class", isActive && "active")} />

目录