文本字段
文本字段允许用户输入并编辑文本. 它们通常出现在形式和模式窗口中.
图片参考
文本字段使用
import { TextField } from '@dt-dds/react-text-field';
export const App = () => {
return <TextField label='My Field' message='Helpful hint' maxLength={40} />;
};
属性
| 财产 | 类型 | 默认 | 说明 |
|---|---|---|---|
children | ReactNode | - 说吧 | 在输入域内提供儿童组件. |
label | string | - 说吧 | 一个帮助用户理解文本字段范围的标签. |
labelIcon | ReactNode | - 说吧 | 设置标签图标,为字段范围提供指导. |
initialValue | string | - 说吧 | 设置文本字段的初始值. |
message | string | - 说吧 | 输入字段下面要显示的消息 。 用于提示或显示错误 . |
hasError | boolean | - 说吧 | 设置文本字段错误状态 . |
disabled | boolean | - 说吧 | 确定输入字段的已禁用状态. |
name | string | - 说吧 | 指定文本字段名称的属性 . |
required | boolean | - 说吧 | 以信件设置错误状态 requiredMessage |
requiredMessage | string | - 说吧 | 需要验证时显示的错误消息 |
style | CSSProperties | - 说吧 | 直接在文本字段中添加 Css 样式. |
inputRef | RefObject | - 说吧 | 提供了访问 DOM 节点或反应元素引用的方法. |
maxLength | number | - 说吧 | 用户可以输入的最大字符数. |
type | HTMLInputTypeAttribute | text | 用于指定要显示的元素类型 . |
onChange | function | - 说吧 | 当输入改变时触发函数 . |
onResetInput | function | - 说吧 | 点击交叉图标时触发的函数, 当类型搜索时 |
variant | [outlined, bottomLine] | outlined | 以大纲或下行样式处理输入 |
scale | [compact, standard] | standard | 设置文本字段的间隔和大小 |
backgroundFill | [default, contrast, light] | default | 用背景颜色样式输入 |
isFloatingLabel | boolean | false | 在输入上方设置浮动或传统标签 |
extraPrefix | ExtraComponent | - 说吧 | 在输入字段内左侧提供组件 |
extraSuffix | ExtraComponent | - 说吧 | 输入字段内右侧的组件 |
id | string | - 说吧 | 通过 htmlFor 属性将元素与相应元素链接的唯一标识符 |
dataTestId | string | label- 文本字段 | 自定义测试标识符 |
... | InputHTMLAttributes | - 说吧 | 所有来自本地 html 输入的可用属性 |
堆栈
- 类型脚本 用于静态类型检查
- 反应 — JavaScript 用户界面库
- 情感 用于使用 JavaScript 写入 Css 样式
- 故事书 ——由Vite供电的UI组件环境
- 欢乐 - JavaScript 测试框架
- 反应测试库 - 以用户为中心测试用户界面组件
- ESLint 语录 代码林入
- 高级 用于代码格式
- 苏普 - 由Esbuild供电的脚本捆绑机
- 雅伦 从管理软件包
图标
yarn build- 制作软件包yarn dev- 在当地运行软件包yarn lint- 将所有文件输入此软件包yarn test- 测试所有单位yarn test:report- 打开测试覆盖报告yarn test:update:snapshot- 进行所有单元测试并更新快照
汇编
运行 yarn build 从软件包的根部 齐声 将原始的 TypeScript 和 React 代码编译为普通 JavaScript .
这个 /dist 文件夹包含编译输出.
text-field
└── dist
├── index.d.ts <-- Types
├── index.js <-- CommonJS version
└── index.mjs <-- ES Modules version
...
版本
跟着 语义版本
许可证
许可证根据 MIT 许可证