# @elio\_it/elio-ui 中文文档

规范地址：https://npmcn.com/package/%40elio_it/elio-ui/

版本：1\.22\.0
npm 元数据更新时间：2026-11-12T08:05:31.615Z
中文译文更新时间：2026-11-13T23:18:44.854Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：7.2 MB，156 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react ^18 \|\| ^19，react-dom ^18 \|\| ^19，highcharts ^12，styled-components ^6，highcharts-react-official ^3
- 首次发布：2025-10-31T05:40:17.549Z
- 最新版本发布：2026-11-12T08:05:31.391Z
- 近 30 天下载量：2937（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：66（近 12 个月 59 个）

## 中文简介

ELIO UI 库( tsup skister) :

## 安装

```sh
npm install @elio_it/elio-ui
```

也可以使用：`pnpm add @elio_it/elio-ui`、`yarn add @elio_it/elio-ui`、`bun add @elio_it/elio-ui`

## README

# ELIO 乌伊

(原始内容存档于2018-10-21). ELIO QQQ 反放UI.

[![Chromatic](https://img.shields.io/badge/Chromatic-Storybook-ff69b4)](https://chromatic.com/)

## 📚

-   📖 **[개발자](https://elio-ui-docs.vercel.app/)** - 설치설정컴포넌트
-   🎨 **[故事书](https://main--69097f993aca831e50aa62ba.chromatic.com/)** - 모든 사용 예시
-   🖼️ **[图片](https://www.figma.com/design/fRjf01ylK6VnyWO2ZqtwSL/2025_Elio_Design-Library)** - 디자인 시스템

> 说吧 `npm run docs:dev` 실행 `http://localhost:5173` 접속

## AI 연동 (MCP)

AI QQ( 语言规范 ) **정확한道具로** MCP서버를. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `.mcp.json` 한.

```json
{
  "mcpServers": {
    "elio-ui": {
      "command": "node",
      "args": ["./node_modules/@elio_it/elio-ui/dist/mcp/server.cjs"]
    }
  }
}
```

API·디자인 토큰·사용**화면**• 妇女**{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢**{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢.

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 **个人电脑** 맡길. 개발:"바탕화면에"也.

```
check_environment  →  create_project  →  install_and_run
   환경 점검            폴더·파일 생성      설치 후 localhost 주소 반환
```

설치와 **[AI 연동 (MCP) 가이드](https://elio-ui-docs.vercel.app/mcp)** 를.

## {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢

> (原始内容存档于2018-03-21). ELIO UIQ (npmjs.com). {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢? → [{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢](https://elio-ui-docs.vercel.app/installation)

```bash
npm install @elio_it/elio-ui styled-components
```

```tsx
import { ThemeProvider } from 'styled-components';
import { theme, GlobalStyle } from '@elio_it/elio-ui/styles';
import { ElioOverlayProvider } from '@elio_it/elio-ui/Overlay';
import { TextButton } from '@elio_it/elio-ui/Button';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <ElioOverlayProvider>
        <TextButton text="확인" variant="primary" color="blue" />
      </ElioOverlayProvider>
    </ThemeProvider>
  );
}
```

> **⚠️ `GlobalStyle` 을.** `html { font-size: 10px }` 를, {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 **모든 1.6배**로. 下一个 [{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢](https://elio-ui-docs.vercel.app/installation#next-js-app-router) 참고.

## 🎨

| 카테고리 | 컴포넌트 |
| --- | --- |
| 按钮 | 文本按钮、 文本Icon按钮、 图标按钮 |
| 控件 | 复选框、 电台、 切换、 标签 |
| 下坠 | 向下过滤, 向下分类 |
| 投入 | 过滤输入 |
| 拾取器 | 过滤 DatePicker, 过滤 DatePickerPeriod |
| 反馈 | 旋转、 托斯特、 确认 |
| 重叠 | ModalFrame 调制解析器 |
| 图表 | 表格,表格显示器 |
| 图标 | SVG 아이콘 컴포넌트 |
| 线粒体 | (原始内容存档于2018-09-29). ElioProjectIcon (엘리오) |
| 版式 | PageLayout, 页面页眉, 过滤栏, 过滤组, 区域, Grid, 指南文本, 脚注 |
| 图表 | ElioLine Chart, ElioColumn Chart, ElioDonut Chart (Highcharts QQ) (英语) |
| 屏幕 | ElioScreen (JSON) ~ ~ ~ ) |

## 📝

| 명령어 | 설명 |
| --- | --- |
| `npm run build` | 라이브러리 |
| `npm run build:watch` | 看着 |
| `npm run storybook` | 童话小说 |
| `npm test` | 테스트 |
| `npm run docs:dev` | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |

## 📄

MIT 许可证

## 常见问题

### @elio\_it/elio-ui 是什么？

ELIO UI 库\( tsup skister\) :

### 如何安装 @elio\_it/elio-ui？

在项目目录运行 npm install @elio\_it/elio-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18 \|\| ^19）、react-dom（^18 \|\| ^19）、styled-components（^6）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 elio-ui-mcp、elio-ui-update-check，可以用 npx elio-ui-mcp 直接运行。

### @elio\_it/elio-ui 支持 TypeScript 吗？

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

### @elio\_it/elio-ui 支持 ESM 还是 CommonJS？

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

### @elio\_it/elio-ui 可以商用吗？

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

### @elio\_it/elio-ui 的下载量有多少？

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

### @elio\_it/elio-ui 还在维护吗？

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