# @als-tp/als-react-ts-ui 中文文档

规范地址：https://npmcn.com/package/%40als-tp/als-react-ts-ui/

版本：0\.20\.6
npm 元数据更新时间：2026-11-03T15:39:44.989Z
中文译文更新时间：2026-11-07T00:17:17.778Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40als-tp/als-react-ts-ui
原文对照：https://npmcn.com/package/%40als-tp/als-react-ts-ui/?lang=original
项目主页：https://www.alsinnovation.com/

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：3 MB，638 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：15 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0，@base-ui/react 1\.6\.0
- 首次发布：2025-12-01T15:53:00.528Z
- 最新版本发布：2026-11-03T15:39:44.790Z
- 近 30 天下载量：2118（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：55（近 12 个月 55 个）

## 中文简介

ALS Innovation公司用 Base UI 构建的综合性反应 TypeScript UI 组件库

## 安装

```sh
npm install @als-tp/als-react-ts-ui
```

也可以使用：`pnpm add @als-tp/als-react-ts-ui`、`yarn add @als-tp/als-react-ts-ui`、`bun add @als-tp/als-react-ts-ui`

## README

# @als-tp/als- react-ts-ui (英语)

一个全面的反光 TypeScript UI 组件库建在顶端 [基础UI](https://base-ui.com/),提供50+可访问,自定义的组件,并配有完整的TypeScript支持,包括AI和布局原始.

## 特征

-   🎨 **50+ 组件**: UI, AI, Strapi, 和布局组件
-   💪 **类型脚本第一**: 完全类型安全和IntelliSense支持
-   ♿ **可访问**:在基地UI上建造,符合ARIA规定
-   🎭 **可自定义**: CSS 模块,带有CSS变量用于主题
-   📦 **树能震动**: 只导入您需要的东西
-   🔧 **现代堆栈**: 反应 19, TypeScript 6, Vite 8

## 安装

```bash
# npm
npm install @als-tp/als-react-ts-ui

# pnpm
pnpm add @als-tp/als-react-ts-ui

# yarn
yarn add @als-tp/als-react-ts-ui
```

### 同伴依赖关系

此库需要以下对等依赖 :

```bash
pnpm install react react-dom @base-ui/react@^1.4.0
```

## 使用量

### 导入样式

首先,导入 CSS 令牌和应用程序条目中所需的样式域 :

```typescript
import '@als-tp/als-react-ts-ui/styles/tokens';
import '@als-tp/als-react-ts-ui/styles/components';
```

如果您需要完整样式表而不是域分隔 :

```typescript
import '@als-tp/als-react-ts-ui/styles';
```

### 导入组件

```typescript
import { ALSButton, ALSDialog, ALSInput } from '@als-tp/als-react-ts-ui';

function App() {
  return (
    <div>
      <ALSButton variant="primary" size="md">
        Click me
      </ALSButton>
      
      <ALSInput placeholder="Enter text..." />
    </div>
  );
}
```

### 类型脚本支持

所有组件全部输入。 TypeScript 将提供自动完成和类型检查 :

```typescript
import type { ALSButtonProps } from '@als-tp/als-react-ts-ui';

const buttonProps: ALSButtonProps = {
  variant: 'primary',
  size: 'lg',
  onClick: () => console.log('clicked')
};
```

## 可用组件

### 窗体组件

-   `ALSButton` - 有变体和大小的 Versatile 按钮
-   `ALSInput` - 文本输入字段
-   `ALSCheckbox` - 有标签的复选框
-   `ALSCheckboxGroup` - 一组复选框
-   `ALSRadio` - 无线电按钮
-   `ALSSwitch` - 切换开关
-   `ALSSelect` - 选择下拉
-   `ALSCombobox` - 自动完成组合框
-   `ALSAutocomplete` - 自动完成输入
-   `ALSNumberField` - 数字输入
-   `ALSSlider` - 射程滑动器
-   `ALSField` - 表格字段包装器
-   `ALSFieldset` - 窗体设置
-   `ALSForm` - 表格容器

### 版式组件

-   `MainLayout` - 主要应用程序布局
-   `ALSSeparator` - 视觉分隔器
-   `ALSScrollArea` - 可滚动容器
-   `ALSTabs` - 标签导航
-   `ALSToolbar` - 工具箱

### 重叠组件

-   `ALSDialog` - 模块对话框
-   `ALSAlertDialog` - 警报/确认对话
-   `ALSPopover` - 溢出覆盘
-   `ALSTooltip` - 工具提示
-   `ALSMenu` - 下放菜单
-   `ALSContextMenu` - 上下文菜单
-   `ALSMenubar` - 菜单栏
-   `ALSNavigationMenu` - 导航菜单

### 反馈组件

-   `ALSToast` - 敬酒通知
-   `ALSProgress` - 进度指标
-   `ALSMeter` - 计量/计量

### 内容 构成部分

-   `ALSAccordion` - 可扩展手风琴
-   `ALSCollapsible` - 可折叠的内容
-   `ALSAvatar` - 用户外观
-   `ALSPreviewCard` - 预览卡

### 交互式组件

-   `ALSToggle` - 切换按钮
-   `ALSToggleGroup` - 切换按钮组

## 自定义

图书馆使用 `--als-*` 主题的 CSS 变量 .

首先导入库符号, 然后导入您使用的样式域, 最后您的主题会覆盖 :

```typescript
import '@als-tp/als-react-ts-ui/styles/tokens';
import '@als-tp/als-react-ts-ui/styles/components';
import './als-theme.css';
```

可用样式条目 :

-   `@als-tp/als-react-ts-ui/styles` 用于完整的 CSS 捆绑
-   `@als-tp/als-react-ts-ui/styles/tokens` 只用于公共 CSS 变量和字体声明
-   `@als-tp/als-react-ts-ui/styles/components` 用于核心组件和 Strapi 样式
-   `@als-tp/als-react-ts-ui/styles/ai` 用于 AI 组件样式
-   `@als-tp/als-react-ts-ui/styles/layout` 用于布局样式

对于这个寄存器的本地演示和"故事本"外壳,全球演示的靴子生活在 [`src/styles/init.css`](https://npmcn.com/package/%40als-tp/als-react-ts-ui/src/styles/init.css)。软件包消费者应当从上面导入软件包样式条目,而不是直接引用该文件.

### 全球主题覆盖

使用 `:root` 如果您想要整个应用程序使用您的主题 :

```css
:root {
    --als-color-brand: #d92d20;
    --als-color-brand-strong: #b42318;
    --als-color-brand-subtle: #fee4e2;

    --als-color-accent: #f97316;
    --als-color-accent-strong: #c2410c;

    --als-color-border-focus: var(--als-color-brand);

    --als-color-text-primary: #1f2937;
    --als-color-text-secondary: #667085;

    --als-color-surface-page: #f8fafc;
    --als-color-surface-default: #ffffff;
    --als-color-surface-subtle: #f1f5f9;

    --als-font-family-base: "Inter", system-ui, sans-serif;
    --als-font-size-base: 1rem;
    --als-radius-md: 0.75rem;
}
```

### 范围主题覆盖

如果您只想要部分应用程序使用自定义主题, 请使用包装类 :

```css
.als-theme-acme {
    --als-color-brand: #0f766e;
    --als-color-brand-strong: #115e59;
    --als-color-brand-subtle: #ccfbf1;
}
```

```tsx
<div className="als-theme-acme">
  <ALSButton variant="primary">Save</ALSButton>
</div>
```

### 建议先覆盖的托肯斯

-   品牌 : `--als-color-brand`, (中文(简体) ), `--als-color-brand-strong`, (中文(简体) ), `--als-color-brand-subtle`
-   文本 : `--als-color-text-primary`, (中文(简体) ), `--als-color-text-secondary`
-   表面 : `--als-color-surface-page`, (中文(简体) ), `--als-color-surface-default`, (中文(简体) ), `--als-color-surface-subtle`
-   边界和重点: `--als-color-border-default`, (中文(简体) ), `--als-color-border-subtle`, (中文(简体) ), `--als-color-border-focus`
-   类型 : `--als-font-family-base`, (中文(简体) ), `--als-font-size-base`
-   形状和间隔 : `--als-radius-*`, (中文(简体) ), `--als-space-*`

### 页:1

-   对于新的融合,倾向于 `--als-*` 符号而不是旧的遗留变量名称.
-   大多数组件使用语义符号,例如 `--als-color-brand` 而不是原始调色板值,所以改变这些顶级的符号通常足以重命名库.
-   如果您需要完整可用的符号列表,请参见 [弧形/样式/托克.css](https://npmcn.com/package/%40als-tp/als-react-ts-ui/src/styles/tokens.css)。 。 。 .

## 发展

### 图书馆的建设

```bash
pnpm run build:lib
```

### 运行故事本

```bash
pnpm storybook
```

### 运行测试

```bash
pnpm test
```

## 许可证

麻省理工学院

## 链接

-   [基础 UI 文档](https://base-ui.com/)

## 常见问题

### @als-tp/als-react-ts-ui 是什么？

ALS Innovation公司用 Base UI 构建的综合性反应 TypeScript UI 组件库

### 如何安装 @als-tp/als-react-ts-ui？

在项目目录运行 npm install @als-tp/als-react-ts-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^18\.0\.0 \|\| ^19\.0\.0）、@base-ui/react（1\.6\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @als-tp/als-react-ts-ui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @als-tp/als-react-ts-ui 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @als-tp/als-react-ts-ui 可以商用吗？

@als-tp/als-react-ts-ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @als-tp/als-react-ts-ui 的下载量有多少？

根据 npm 官方下载统计，@als-tp/als-react-ts-ui 在 2026/10/06 – 2026/11/04 这 30 天内被下载 2,118 次，日均约 71 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @als-tp/als-react-ts-ui 还在维护吗？

最新版本 0\.20\.6 发布于 2026/11/03（4 天前）；至今共发布 55 个版本，其中过去 12 个月发布了 55 个；首次发布于 2025/12/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。