投入(已删除)
警报: 此部分已贬值,不再支持. 请移入新的 奥罗·福克特 换句话说.
使用 <auro-input> 自定义元素以创建基本的单行文本字段。 支持类型 text, (中文(简体) ), password,以及 email 具有验证、所需输入、错误状态和一个二级 bordered 主题。 使用插槽 label 财务报告和审定财务报表 helptext 用于补充内容支持.
UI 开发浏览器支持
关于最新资料 UI 开发浏览器支持
安装
$ npm i @aurodesignsystem/auro-input
安装为直接的,dev 或对等的依赖取决于用户安装软件包. 如果你不确定该用哪种依赖,请考虑读读 堆栈溢出 答话.
设计 Token CSS 自定义属性依赖
使用任何Auro自定义元素都取决于 奥罗设计托肯斯。 。 。 .
界定项目组成部分中的依赖性
界定每个组成部分内使用 <auro-input> 组件.
import "@aurodesignsystem/auro-input";
HTML 中的引用组件
<auro-input></auro-input>
<auro-input bordered></auro-input>
从 CDN 安装捆绑的资产
在项目无法处理JS资产的情况下,有预处理后的资产可供使用. 见 -- auro-input__bundled.js 用于现代浏览器。 IE11等后遗症浏览器不再被支持.
警报! 当安装到您的应用程序环境时, 请不要使用 @latest 用于请求的版本。 风险包括未知的MAJOR版本发布和在没有开发者知识的情况下立即采用任何新功能和可能的错误. 这个 @latest 通配符永远不应用于制作客户软件。 你被警告过.
套装示例代码
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/auro-classic/CSSCustomProperties.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/bundled/essentials.css" />
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/auro-input__bundled.js" type="module"></script>
人工输入用例
这个 <auro-input> 在用户可能:
- 需要输入信息
- 正在填写表格
API 代码示例
默认自动输入
<auro-input></auro-input>
<auro-input bordered></auro-input>
发展
为了在这个项目上发展,如果你不是核心团队的一部分,则在提交拉力请求前需要先将项目叉出.
请检查一下 捐款准则 对于这个项目。 请确保 特别注意 页:1 常规承诺 页:1.
启动开发环境
一旦工程被复制到本地资源, 您将安装您需要打开一个 shell 会话来运行 dev 服务器。 。 。 .
$ npm run dev
打开 本地主机: 8000
如果偏好运行单独的会话,请在单个终端贝壳中运行以下命令.
$ npm run build:watch
$ npm run serve
API 生成
自定义元素 API 文件在构建中生成,并用版本的更改返回到repo. 如果 API doc 没有版本更改而更改, 作者将运行 npm run build:api 生成文档,并致力于版本控制.
测试
需要对每个Auro组件进行自动化测试。 见 .\test\auro-input.test.js 用于测试此组件。 运行 npm test 进行测试并检查密码覆盖。 试验必须通过并达到一定的覆盖门槛才能进行。 见 测试文件 更多细节.
捆绑资产
被捆绑的资产只在远程生成,而不会被合并回这种回购. 在当地审查和/或测试捆绑的资产,运行 $ npm run bundler 以生成资产.