@fohte/ui (英语)
用于fohte应用的共享设计符和React组件.
安装
pnpm add @fohte/ui
使用量
@import 'tailwindcss';
@import '@fohte/ui/tokens.css';
该软件包在下列地点提供光标: :root 和暗号 .dark,加上字体堆栈、半径值和 a 2xs 文本大小。 颜色作为 Tailwind 公用设施, 例如 bg-background 财务报告和审定财务报表 text-foreground。 。 。 .
软件包没有遵循 prefers-color-scheme; 消耗性应用程序控制, 当 .dark 将适用。 处理时需要尾风 CSS v4 @theme 指令。 。 。 字体堆放参考 JetBrains Mono Variable 和 IBM Plex Mono, 此软件包没有捆绑; 需要时在应用程序中加载字体文件 .
反应组件
从它们的子路径导入组件 :
import { BottomNavigation } from '@fohte/ui/bottom-navigation'
import { Button } from '@fohte/ui/button'
import { ButtonGroup } from '@fohte/ui/button-group'
import { Checkbox } from '@fohte/ui/checkbox'
import { Chip } from '@fohte/ui/chip'
import { CommandPalette } from '@fohte/ui/command-palette'
import { Dialog, DialogContent, DialogTitle } from '@fohte/ui/dialog'
import { FieldTrigger } from '@fohte/ui/field-trigger'
import { Input } from '@fohte/ui/input'
import { Kbd } from '@fohte/ui/kbd'
import { List, ListItem } from '@fohte/ui/list'
import { Panel } from '@fohte/ui/panel'
import { Popover, PopoverContent, PopoverTrigger } from '@fohte/ui/popover'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@fohte/ui/select'
import { SegmentedControl } from '@fohte/ui/segmented-control'
import { Tabs, TabsList, TabsPanel, TabsTab } from '@fohte/ui/tabs'
import { Textarea } from '@fohte/ui/textarea'
import { Tooltip, TooltipContent, TooltipTrigger } from '@fohte/ui/tooltip'
BottomNavigation 接受水平行中的链接和动作按钮。 每个项目都有 id 可见 label,也可以包括 icon, (中文(简体) ), selected 状态,以及 className。链接项目使用 renderLink 用耗用应用程序的路由器组件来包裹内容。 渲染槽接收链接内容,样式类,以及当前页面状态. 替换 openComposer 中的示例.
import {
BottomNavigation,
type BottomNavigationItem,
} from '@fohte/ui/bottom-navigation'
const items = [
{
id: 'overview',
type: 'link' as const,
label: 'Overview',
selected: true,
renderLink: ({ children, ...props }) => (
<a href="/overview" {...props}>
{children}
</a>
),
},
{
id: 'compose',
type: 'button' as const,
label: 'Compose',
onClick: openComposer,
},
] satisfies ReadonlyArray<BottomNavigationItem>
<BottomNavigation aria-label="Primary navigation" items={items} />
组件提供语义符号颜色,单行标签,当项目不合适时提供水平滚动. 过 className 以样式或定位应用程序布局的导航,并设置项目 className 来定制它的外观. fixed 或者说 sticky 律师事务所的安置和空间仍然是申请人的责任.
反应,反应DOM, @base-ui/react,以及 lucide-react 是同伴的依赖关系。 确保在消耗性申请中提供。 其支持的版本范围在 package.json。 。 。 .
组件子路径发布 TSX 源,所以消耗的捆绑器必须从依赖性中转换 TSX.
这些组件还需要Tailwind CSS v4, tw-animate-css,以及 shadcn 在消耗性应用。 如果它们已经存在, 将它们安装为发展依赖:
pnpm add -D tailwindcss@^4 tw-animate-css@^1 shadcn@^4
例如,一个选择可以从其触发器、值、内容和项目组成:
<Select defaultValue="first">
<SelectTrigger aria-label="Choose an option">
<SelectValue placeholder="Choose an option" />
</SelectTrigger>
<SelectContent>
<SelectItem value="first">First option</SelectItem>
<SelectItem value="second">Second option</SelectItem>
</SelectContent>
</Select>
耗用应用程序的 CSS 必须装入 Tailwind CSS v4, tw-animate-css, (中文(简体) ), shadcn/tailwind.css,这个包裹的标志。 Tailwind v4 默认忽略依赖文件, 因此明确使用软件包源注册 @source。调整相对于样式表的路径 :
@import 'tailwindcss';
@import 'tw-animate-css';
@import 'shadcn/tailwind.css';
@import '@fohte/ui/tokens.css';
@source '../node_modules/@fohte/ui/src';
许可证
麻省理工学院