# @aurodesignsystem/auro-input 中文文档

规范地址：https://npmcn.com/package/%40aurodesignsystem/auro-input/

版本：4\.3\.4
npm 元数据更新时间：2026-04-28T20:32:20.495Z
中文译文更新时间：2026-11-08T01:33:51.701Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40aurodesignsystem/auro-input
原文对照：https://npmcn.com/package/%40aurodesignsystem/auro-input/?lang=original
项目主页：https://github.com/AlaskaAirlines/auro-input#readme
源码仓库：https://github.com/AlaskaAirlines/auro-input

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

- 包体积（解压后）：872 kB，75 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- Node.js 要求：^20\.x \|\| ^22\.x 
- 运行依赖：7 个
- peer 依赖：@alaskaairux/icons ^4\.43\.0，@aurodesignsystem/design-tokens ^4\.13\.0，@aurodesignsystem/webcorestylesheets ^6\.0\.2
- 首次发布：2021-11-03T19:42:18.328Z
- 最新版本发布：2025-03-07T00:10:10.406Z
- 近 30 天下载量：1935（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：75（近 12 个月 0 个）

## 中文简介

auro- 输入 HTML 自定义元素

## 安装

```sh
npm install @aurodesignsystem/auro-input
```

也可以使用：`pnpm add @aurodesignsystem/auro-input`、`yarn add @aurodesignsystem/auro-input`、`bun add @aurodesignsystem/auro-input`

## README

# 投入(已删除)

> **警报:** 此部分已贬值,不再支持. 请移入新的 [奥罗·福克特](https://www.npmjs.com/package/@aurodesignsystem/auro-formkit) 换句话说.

使用 `<auro-input>` 自定义元素以创建基本的单行文本字段。 支持类型 `text`, (中文(简体) ), `password`,以及 `email` 具有验证、所需输入、错误状态和一个二级 `bordered` 主题。 使用插槽 `label` 财务报告和审定财务报表 `helptext` 用于补充内容支持.

## UI 开发浏览器支持

关于最新资料 [UI 开发浏览器支持](https://auro.alaskaair.com/support/browsersSupport)

## 安装

[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-input/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-input/actions/workflows/testPublish.yml) [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-input?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-input) [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-input?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0) ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)

```shell
$ npm i @aurodesignsystem/auro-input
```

安装为直接的,dev 或对等的依赖取决于用户安装软件包. 如果你不确定该用哪种依赖,请考虑读读 [堆栈溢出](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) 答话.

### 设计 Token CSS 自定义属性依赖

使用任何Auro自定义元素都取决于 [奥罗设计托肯斯](https://auro.alaskaair.com/getting-started/developers/design-tokens)。 。 。 .

### 界定项目组成部分中的依赖性

界定每个组成部分内使用 `<auro-input>` 组件.

```js
import "@aurodesignsystem/auro-input";
```

**HTML 中的引用组件**

```html
<auro-input></auro-input>
<auro-input bordered></auro-input>
```

## 从 CDN 安装捆绑的资产

在项目无法处理JS资产的情况下,有预处理后的资产可供使用. 见 -- `auro-input__bundled.js` 用于现代浏览器。 IE11等后遗症浏览器不再被支持.

**警报!** 当安装到您的应用程序环境时, 请不要使用 `@latest` 用于请求的版本。 风险包括未知的MAJOR版本发布和在没有开发者知识的情况下立即采用任何新功能和可能的错误. 这个 `@latest` 通配符永远不应用于制作客户软件。 你被警告过.

### 套装示例代码

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.13.0/dist/auro-classic/CSSCustomProperties.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@6.0.2/dist/bundled/essentials.css" />
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-input@4.3.4/dist/auro-input__bundled.js" type="module"></script>
```

## 人工输入用例

这个 `<auro-input>` 在用户可能:

-   需要输入信息
-   正在填写表格

## API 代码示例

### 默认自动输入

```html
<auro-input></auro-input>
<auro-input bordered></auro-input>
```

## 发展

为了在这个项目上发展,如果你不是核心团队的一部分,则在提交拉力请求前需要先将项目叉出.

请检查一下 [捐款准则](https://auro.alaskaair.com/contributing) 对于这个项目。 请确保 **特别注意** 页:1 **常规承诺** 页:1.

### 启动开发环境

一旦工程被复制到本地资源, 您将安装您需要打开一个 shell 会话来运行 **dev 服务器**。 。 。 .

```shell
$ npm run dev
```

打开 [本地主机: 8000](http://localhost:8000/)

如果偏好运行单独的会话,请在单个终端贝壳中运行以下命令.

```shell
$ npm run build:watch

$ npm run serve
```

### API 生成

自定义元素 API 文件在构建中生成,并用版本的更改返回到repo. 如果 API doc 没有版本更改而更改, 作者将运行 `npm run build:api` 生成文档,并致力于版本控制.

### 测试

需要对每个Auro组件进行自动化测试。 见 `.\test\auro-input.test.js` 用于测试此组件。 运行 `npm test` 进行测试并检查密码覆盖。 试验必须通过并达到一定的覆盖门槛才能进行。 见 [测试文件](https://auro.alaskaair.com/support/tests) 更多细节.

### 捆绑资产

被捆绑的资产只在远程生成,而不会被合并回这种回购. 在当地审查和/或测试捆绑的资产,运行 `$ npm run bundler` 以生成资产.

## 常见问题

### @aurodesignsystem/auro-input 是什么？

auro- 输入 HTML 自定义元素

### 如何安装 @aurodesignsystem/auro-input？

在项目目录运行 npm install @aurodesignsystem/auro-input，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@alaskaairux/icons（^4\.43\.0）、@aurodesignsystem/design-tokens（^4\.13\.0）、@aurodesignsystem/webcorestylesheets（^6\.0\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @aurodesignsystem/auro-input 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/aurodesignsystem\_\_auro-input 是否存在。

### @aurodesignsystem/auro-input 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @aurodesignsystem/auro-input 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js ^20\.x \|\| ^22\.x 。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @aurodesignsystem/auro-input 可以商用吗？

@aurodesignsystem/auro-input 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @aurodesignsystem/auro-input 的下载量有多少？

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

### @aurodesignsystem/auro-input 还在维护吗？

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

