# @calimero-network/mero-ui 中文文档

规范地址：https://npmcn.com/package/%40calimero-network/mero-ui/

版本：1\.5\.2
npm 元数据更新时间：2026-10-02T17:26:54.616Z
中文译文更新时间：2026-11-08T23:58:21.093Z
软件包许可：未声明

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

原始 npm 页面：https://www.npmjs.com/package/%40calimero-network/mero-ui
原文对照：https://npmcn.com/package/%40calimero-network/mero-ui/?lang=original
项目主页：https://github.com/calimero-network/design-system#readme
源码仓库：https://github.com/calimero-network/design-system

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

- 包体积（解压后）：7.6 MB，9 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：9 个
- peer 依赖：react \>=19\.0\.0，react-dom \>=19\.0\.0
- 首次发布：2025-08-29T13:06:58.592Z
- 最新版本发布：2026-10-02T17:26:54.268Z
- 近 30 天下载量：8510（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：19（近 12 个月 2 个）

## 中文简介

卡利梅罗设计系统的UI原始产品

## 安装

```sh
npm install @calimero-network/mero-ui
```

也可以使用：`pnpm add @calimero-network/mero-ui`、`yarn add @calimero-network/mero-ui`、`bun add @calimero-network/mero-ui`

## README

# @calimero-network/mero-ui (英语)

为Calimero设计系统所建的综合性React UI组件库. 这个软件包提供了一套完整的可访问,自定义的组件,并带有内置的黑暗主题支持.

## 安装

```bash
npm install @calimero-network/mero-ui
# or
yarn add @calimero-network/mero-ui
# or
pnpm add @calimero-network/mero-ui
```

## 快速启动

### 1\. 进口CSS变量

**重要**: 您必须导入 CSS 变量以进行适当的造型 。 选择以下方法之一:

#### 选项A:直接导入 CSS 文件

```css
/* In your main CSS file */
@import "@calimero-network/mero-ui/styles.css";
```

#### 选项B: HTML 导入

```html
<link
  rel="stylesheet"
  href="node_modules/@calimero-network/mero-ui/dist/styles.css"
/>
```

#### 备选办法C:方案注射

```javascript
import { cssVariables } from "@calimero-network/mero-ui";

// Inject CSS variables into your document
const style = document.createElement("style");
style.textContent = cssVariables;
document.head.appendChild(style);
```

### 2\. 进口和使用部件

```jsx
import React from "react";
import { Button, Card, Text, Input } from "@calimero-network/mero-ui";

function App() {
  return (
    <div>
      <Card>
        <Text size="lg" weight="bold">
          Welcome to Calimero UI
        </Text>
        <Input placeholder="Enter your name" />
        <Button variant="primary">Get Started</Button>
      </Card>
    </div>
  );
}

export default App;
```

## 可用组件

### 布局结构( S)

-   **方框** - 灵活集装箱部分
-   **弹性** - 弹性箱集装箱
-   **堆栈** - 垂直/横向堆栈布局
-   **网格** 打开 **网格项目** - CSS系统 网格布局系统
-   **中间** - 横向和纵向中心内容
-   **空间器** - 在元素之间添加间隔
-   **版式** - 主布局包装器
-   **集装箱** - 反应容器
-   **奥特拉尤特** - 认证页面布局

### 导航

-   **导航** - 顶端导航栏
-   **边栏** - 侧导航面板
-   **面包屑** - 导航面包屑
-   **菜单** - 下拉和上下文菜单
-   **标签** - 标签导航
-   **手风琴** - 可折叠内容部分
-   **命令 调色板** - 命令搜索接口

### 窗体输入( I)

-   **投入** - 文本输入字段
-   **文本区域** - 多行文字输入
-   **数字输入** - 有控件的数字输入
-   **选择** - 下拉选择
-   **复选框** - 复选框输入
-   **无线电** 打开 **无线电组** - 无线电按钮输入
-   **切换** - 切换开关
-   **日期选择器** - 选择日期
-   **时间选择器** - 时间选择
-   **文件加载** - 文件上传组件
-   **搜索输入** - 以建议搜索输入
-   **标签输入** - 自动完成标记输入
-   **RichText编辑器** - 用 Tiptap 进行丰富的文本编辑
-   **表单** - 附有验证的表格包装
-   **构建Wizard** - 多步形向导

### 数据显示

-   **图表** - 有排序和过滤的数据表
-   **数据表** - 高级数据表
-   **可编辑表** - 可编辑的数据表
-   **树表** - 等级数据表
-   **列表** - 列表显示组件
-   **树** - 树视图组件
-   **日历** - 日历部分
-   **时间线** - 时间线显示
-   **恒星卡** - 统计显示卡
-   **计量卡** - 有图表的计量
-   **趋势指标** - 趋势可视化
-   **空状态** - 空状态显示
-   **斯凯莱通** - 正在装入占位符

### 反馈状态( S)

-   **警报** - 警报信息
-   **横幅** - 班纳通知
-   **土司** - 敬酒通知
-   **通知中心** - 通知管理
-   **徽标** - 身份证
-   **进展** - 进度指标
-   **装入器** - 装入自旋器
-   **旋转器** - 装入旋转器
-   **模式** - 模块对话框
-   **过量** - 填充内容
-   **工具提示** - 工具提示上线

### 媒体内容( C)

-   **有远见** - 用户外观显示
-   **图像** - 图像组件
-   **图标** - 图标组件
-   **分隔符** - 视觉分离器
-   **文件预览** - 文件预览组件

### 类型

-   **文本** - 有变体的文本组件
-   **标题** - 标题部分
-   **代码** - 代码显示
-   **链接** - 链接部分

### 工具

-   **标记** - 标记组件
-   **复制到剪贴板** - 复制到剪贴板工具
-   **搜索要点** - 突出显示搜索结果

## 设计托肯斯

该套件包括用于一贯样式的综合设计标志:

### 颜色

```javascript
import { colors } from "@calimero-network/mero-ui";

// Brand colors
colors.brand[600]; // Primary brand color
colors.brand[700]; // Darker brand color

// Neutral colors
colors.neutral[200]; // Light gray
colors.neutral[800]; // Dark gray

// Semantic colors
colors.semantic.success; // Success green
colors.semantic.error; // Error red
colors.semantic.warning; // Warning orange
colors.semantic.info; // Info blue

// Background colors
colors.background.primary; // Primary background
colors.background.secondary; // Secondary background
```

### 间距

```javascript
import { spacing } from "@calimero-network/mero-ui";

spacing[2]; // 0.5rem
spacing[4]; // 1rem
spacing[6]; // 1.5rem
```

### 类型

```javascript
import { fonts } from "@calimero-network/mero-ui";

fonts.body; // Main body font
fonts.heading; // Heading font
fonts.secondary; // Secondary font
```

### 边框半径

```javascript
import { radius } from "@calimero-network/mero-ui";

radius.sm; // 8px
radius.md; // 12px
radius.lg; // 16px
```

## CSS 变量

所有设计符作为 CSS 变量可用 :

```css
.my-component {
  background-color: var(--color-background-primary);
  color: var(--color-neutral-200);
  font-family: var(--font-body);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  border: 1px solid var(--color-neutral-600);
}
```

### 可用的 CSS 变量

#### 颜色

-   `--color-neutral-200` 改为 `--color-neutral-900`
-   `--color-brand-100`, (中文(简体) ), `--color-brand-600` 改为 `--color-brand-900`
-   `--color-background-primary`, (中文(简体) ), `--color-background-secondary`, (中文(简体) ), `--color-background-tertiary`
-   `--color-semantic-success`, (中文(简体) ), `--color-semantic-warning`, (中文(简体) ), `--color-semantic-error`, (中文(简体) ), `--color-semantic-info`

#### 间距

-   `--space-2`, (中文(简体) ), `--space-3`, (中文(简体) ), `--space-4`, (中文(简体) ), `--space-6`

#### 边框半径

-   `--radius-sm`, (中文(简体) ), `--radius-md`, (中文(简体) ), `--radius-lg`

#### 字体

-   `--font-body`, (中文(简体) ), `--font-heading`, (中文(简体) ), `--font-secondary`

## 他们

设计系统以暗主题为默认构建. 所有组件都自动为暗主题使用相适应的颜色和样式. CSS变量确保在所有组件中保持一致.

## 类型脚本支持

全类型脚本支持包含所有组件及其道具的综合类型定义.

```typescript
import { Button, ButtonProps } from '@calimero-network/mero-ui';

const MyButton: React.FC<ButtonProps> = ({ variant, children, ...props }) => {
  return <Button variant={variant} {...props}>{children}</Button>;
};
```

## 无障碍

所有组成部分都考虑到无障碍环境,包括:

-   ARIA 属性
-   键盘导航支持
-   屏幕阅读器兼容性
-   重点管理
-   颜色对比遵守

## 浏览器支持

-   颜色( 最新)
-   火狐( 最新)
-   萨法里(最新)
-   边缘( 最新)

## 捐款

这个包件是卡利梅罗设计系统的一部分. 关于贡献指南和开发设置,请参见主设计系统存储器.

## 许可证

这个包裹是卡利梅罗计划的一部分. 请参见许可信息的主要项目.

## 更改日志

见 [变动情况](https://npmcn.com/package/%40calimero-network/mero-ui/CHANGELOG.md) 详细列出变动和最新情况.

## 常见问题

### @calimero-network/mero-ui 是什么？

卡利梅罗设计系统的UI原始产品

### 如何安装 @calimero-network/mero-ui？

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

### @calimero-network/mero-ui 支持 TypeScript 吗？

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

### @calimero-network/mero-ui 支持 ESM 还是 CommonJS？

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

### @calimero-network/mero-ui 可以商用吗？

@calimero-network/mero-ui 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @calimero-network/mero-ui 的下载量有多少？

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

### @calimero-network/mero-ui 还在维护吗？

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