@alga-psa/ ii- kit

用于 Alga 扩展的零依赖性 React 组件库 。 所有组件都使用CSS自定义属性用于主题,并在扩展iframes内部无缝工作.

见 显示扩展名 (单位:千美元)ee/extensions/showcase用于每个组件的交互式演示.

安装

在您的应用程序根部导入主题样式表 :

import '@alga-psa/ui-kit/theme.css';

主题键

Tokens作为CSS变量被曝光. 在扩展框内运行时,主机将自动注入 :root。 。 。 .

您也可以在程序上访问符号 :

import { tokens } from '@alga-psa/ui-kit';

tokens.primary   // 'var(--alga-primary)'
tokens.bg        // 'var(--alga-bg)'

构成部分

核心

Button

有多个变体和大小的Themed按钮.

<Button variant="secondary" size="sm">Save</Button>

Text

有大小、音调和重量预置的打字组件.

<Text as="p" size="lg" tone="muted" weight={600}>Hello</Text>

Card

相接的容器有背景,阴影和圆角. 扩展标准 <div> 属性.

<Card style={{ padding: 24 }}>Content here</Card>

Badge

小丸形标签,用于状态指标.

<Badge tone="success">Active</Badge>

Alert, (中文(简体) ), AlertTitle, (中文(简体) ), AlertDescription

带有可选图标的上下文提醒旗.

<Alert tone="warning">
  <AlertTitle>Heads up</AlertTitle>
  <AlertDescription>This action cannot be undone.</AlertDescription>
</Alert>

Separator

区分内容的细分线 .

表单

Input

带有错误状态支持的文本输入 .

<Input placeholder="Email" error={!!err} errorMessage={err} />

TextArea

多行文字输入. 扩展 <textarea> 属性.

CustomSelect

随搜索过滤而下降 .

SearchInput

输入内置搜索图标和可选调出.

Checkbox

带有标签的Themed复选框.

RadioGroup

一组相互排斥的无线电按钮.

RadioOption数字 : { value: string; label: string; disabled?: boolean }

<RadioGroup
  options={[{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]}
  value={selected}
  onChange={setSelected}
/>

Switch

切换布尔值切换 .

Label

样式 <label> 键.

数据显示

DataTable

配有排序、搜索和自定义单元格渲染的平面表.

Column<Row>数字 : { key: string; header: string; width?: number; sortable?: boolean; render?: (row) => ReactNode }

<DataTable
  data={items}
  columns={[
    { key: 'name', header: 'Name', sortable: true },
    { key: 'status', header: 'Status', render: (row) => <Badge>{row.status}</Badge> },
  ]}
/>

导航

Tabs

水平标签栏 .

TabItem数字 : { id: string; label: string; icon?: ComponentType; disabled?: boolean }

<Tabs
  tabs={[{ id: 'one', label: 'Tab 1' }, { id: 'two', label: 'Tab 2' }]}
  activeTab={tab}
  onChange={setTab}
/>

ViewSwitcher

在视图间切换的分块按钮组 .

ViewSwitcherOption<T>数字 : { value: T; label: string; icon?: ComponentType }

<ViewSwitcher
  currentView={view}
  onChange={setView}
  options={[{ value: 'list', label: 'List' }, { value: 'grid', label: 'Grid' }]}
/>

Breadcrumbs

水平面包屑导航道.

BreadcrumbItem数字 : { label: ReactNode; href?: string; onClick?: () => void }

<Breadcrumbs items={[
  { label: 'Home', href: '/' },
  { label: 'Settings', onClick: goSettings },
  { label: 'Profile' },
]} />

DropdownMenu

由按钮触发的弹出式菜单 .

DropdownMenuItem数字 : { label: string; onClick?: () => void; icon?: ComponentType; danger?: boolean; disabled?: boolean; separator?: boolean }

版式

Stack

Flexbox 排版帮助器,用于堆放具有一致间隔的孩子.

<Stack direction="row" gap={12} align="center">
  <Text>Left</Text>
  <Button>Right</Button>
</Stack>

Drawer

滑入面板从右边缘取出,并带有焦点陷阱和覆盖.

Dialog 编号 : ConfirmDialog

模块对话框 .

对话框 所有权和儿童的基本模式.

确认拨号 - 确认/取消模式.

<ConfirmDialog
  isOpen={open}
  title="Delete Item"
  message="Are you sure?"
  variant="danger"
  onConfirm={handleDelete}
  onCancel={() => setOpen(false)}
/>

Popover

定位内容弹出到触发元素中 .

反馈

Spinner 编号 : LoadingIndicator

旋转器 ——动画循环装入指标.

装入指标 带有任择文本的旋转器.

<Spinner size="sm" />
<LoadingIndicator text="Loading..." layout="stacked" />

Tooltip

寄托在孩子们身上.

<Tooltip content="More info">
  <Button variant="ghost">?</Button>
</Tooltip>

Progress

水平进度栏 .

<Progress value={75} tone="success" />

Skeleton 编号 : SkeletonText 编号 : SkeletonCircle 编号 : SkeletonRectangle

占位符加载形状 .

<SkeletonText lines={3} />
<SkeletonCircle width={40} height={40} />

钩子

useTheme()

回返 { setMode, getMode } 用于读取和设置当前主题模式( e)'light' | 'dark') (中文(简体) ).

import { useTheme } from '@alga-psa/ui-kit';

const { setMode, getMode } = useTheme();
setMode('dark');

applyThemeVars(vars)

应用 a Record<string, string> cSS 自定义属性值到文档根.

import { applyThemeVars } from '@alga-psa/ui-kit';

applyThemeVars({ 'alga-primary': '#ff6600' });

扩展主题桥

对于在 iframes 中运行的扩展,请使用内置主题桥接收主机主题变量 :

import { applyThemeVars } from '@alga-psa/ui-kit';

window.addEventListener('message', (ev) => {
  const data = ev.data;
  if (data?.alga === true && data?.version === '1' && data?.type === 'theme') {
    applyThemeVars(data.payload || {});
  }
});

// Signal readiness to the host
window.parent.postMessage({ alga: true, version: '1', type: 'ready' }, '*');