zarm
Version:
基于 React 的移动端UI库
312 lines (269 loc) • 10.1 kB
Markdown
# Input 文本框
## 基本用法
```jsx
import { useState, useRef } from 'react';
import { Input, List, Button } from 'zarm';
const Demo = () => {
const focusInput = useRef();
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
return (
<List>
<List.Item title="单行文本">
<Input
ref={focusInput}
placeholder="请输入"
value={title}
onChange={(e) => {
const val = e.target.value;
setTitle(val);
console.log(`onChange: ${val}`);
}}
/>
</List.Item>
<List.Item title="多行文本">
<Input
rows={3}
placeholder="请输入"
value={content}
onChange={(e) => {
setContent(e.target.value);
}}
/>
</List.Item>
<List.Item>
<Button
size="xs"
theme="primary"
onClick={() => {
focusInput.current.focus();
}}
>
click to focus the first input
</Button>
</List.Item>
</List>
);
};
ReactDOM.render(<Demo />, mountNode);
```
## 带清除按钮
```jsx
import { useState } from 'react';
import { Input, List } from 'zarm';
const Demo = () => {
const [value, setValue] = useState('');
return (
<List>
<List.Item title="单行文本">
<Input
clearable
placeholder="输入后右侧可见清除按钮"
value={value}
onChange={(e) => {
setValue(e.target.value);
console.log(`onChange: ${e.target.value}`);
}}
/>
</List.Item>
</List>
);
};
ReactDOM.render(<Demo />, mountNode);
```
## 原生类型
```jsx
import { useState } from 'react';
import { Input, List, Icon } from 'zarm';
const PreviewIcon = Icon.createFromIconfont(
'//lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_20337_14.627ee457cf7594fbbce6d5e14b8c29ef.js',
);
const Demo = () => {
const [password, setPassword] = useState('');
const [value, setValue] = useState('');
const [visible, setVisible] = useState(false);
return (
<List>
<List.Item
title="密码输入"
suffix={
visible ? (
<PreviewIcon type="preview-open" onClick={() => setVisible(!visible)} />
) : (
<PreviewIcon type="preview-close" onClick={() => setVisible(!visible)} />
)
}
>
<Input
type={visible ? 'text' : 'password'}
placeholder="请输入"
value={password}
onChange={(e) => {
setPassword(e.target.value);
}}
/>
</List.Item>
<List.Item title="搜索框">
<Input
type="search"
placeholder="请输入"
value={value}
onChange={(e) => {
setValue(e.target.value);
}}
/>
</List.Item>
</List>
);
};
ReactDOM.render(<Demo />, mountNode);
```
## 只读状态
```jsx
import { Input, List } from 'zarm';
ReactDOM.render(
<List>
<List.Item title="单行文本">
<Input readOnly defaultValue="我是只读状态" />
</List.Item>
<List.Item title="多行文本">
<Input readOnly rows={3} value="我是只读状态，我是只读状态，我是只读状态，我是只读状态。" />
</List.Item>
</List>,
mountNode,
);
```
## 禁用状态
```jsx
import { Input, List } from 'zarm';
ReactDOM.render(
<List>
<List.Item title="单行文本">
<Input disabled value="我是禁用状态" />
</List.Item>
<List.Item title="多行文本">
<Input disabled rows={3} value="我是禁用状态，我是禁用状态，我是禁用状态，我是禁用状态。" />
</List.Item>
</List>,
mountNode,
);
```
## 高度自适应
```jsx
import { useState } from 'react';
import { Input, List } from 'zarm';
const Demo = () => {
const [value, setValue] = useState('');
return (
<List>
<List.Item title="多行文本">
<Input
autoHeight
rows={3}
placeholder="请输入"
value={value}
onChange={(e) => {
setValue(e.target.value);
}}
/>
</List.Item>
</List>
);
};
ReactDOM.render(<Demo />, mountNode);
```
## 显示输入字数
```jsx
import { useState } from 'react';
import { Input, List } from 'zarm';
const Demo = () => {
const [value, setValue] = useState('');
return (
<List>
<List.Item title="多行文本">
<Input
autoHeight
showLength
maxLength={200}
rows={3}
placeholder="请输入"
value={value}
onChange={(e) => {
setValue(e.target.value);
}}
/>
</List.Item>
</List>
);
};
ReactDOM.render(<Demo />, mountNode);
```
## 无标签栏
```jsx
import { Input, List } from 'zarm';
ReactDOM.render(
<List>
<List.Item>
<Input placeholder="标题" />
</List.Item>
<List.Item>
<Input autoHeight rows={4} maxLength={200} placeholder="摘要" />
</List.Item>
</List>,
mountNode,
);
```
## 上下结构
```jsx
import { Input, List } from 'zarm';
ReactDOM.render(
<List>
<List.Item description="最少4个字符，包含大小写英文字母和数字">
<Input label="账号" placeholder="请输入您的账号" />
</List.Item>
<List.Item description="最少8个字符，包含大小写英文字母、数字和字符">
<Input label="密码" type="password" placeholder="请输入您的密码" />
</List.Item>
<List.Item>
<Input
label="个人介绍"
autoHeight
rows={4}
maxLength={200}
placeholder="请输入您的个人介绍"
/>
</List.Item>
</List>,
mountNode,
);
```
## API
| 属性 | 类型 | 默认值 | 说明 |
| :----------- | :---------------------------------------------------------------------------- | :----- | :----------------------------------------------------------------------- |
| label | ReactNode | - | 标签栏内容 |
| type | string | 'text' | 类型，同原生 `input` 组件 |
| value | number \| string | - | 值 |
| defaultValue | number \| string | - | 初始值 |
| disabled | boolean | false | 是否禁用 |
| readOnly | boolean | false | 是否只读 |
| rows | number | - | 多行文本时的显示行数。type="text" 时有效。 |
| autoHeight | boolean | false | 是否高度自适应。多行文本（type="text" 且包含 rows 属性）时有效。 |
| autoFocus | boolean | false | 是否自动获取焦点 |
| maxLength | number | - | 输入字数上限 |
| showLength | boolean | false | 是否显示输入字数。多行文本（type="text" 且包含 rows 属性）时有效。 |
| clearable | boolean | false | 是否显示清除按钮。必须为受控组件（属性包含 value、onChange）时方可生效。 |
| onChange | (event: React.ChangeEvent\<HTMLInputElement \| HTMLTextAreaElement\>) => void | - | 值变化时触发的回调函数 |
## CSS 变量
| 属性 | 默认值 | 说明 |
| :-------------------------- | :--------------------------------- | :------------------------- |
| --color | 'var(--za-color-text)' | 字体颜色 |
| --font-size | 'var(--za-font-size-md)' | 字体大小 |
| --height | '28px' | 输入框高度 |
| --line-height | '28px' | 输入框行高 |
| --label-font-size | 'var(--za-font-size-sm)' | 标签字体大小 |
| --placeholder-color | 'var(--za-color-text-placeholder)' | 占位符字体颜色 |
| --disabled-color | 'var(--za-color-text-disabled)' | 禁用状态下字体颜色 |
| --clear-icon-size | '16px' | 清除按钮大小 |
| --clear-icon-color | '#ccc' | 清除按钮颜色 |
| --textarea-length-font-size | 'var(--za-font-size-sm)' | 多行文本内容长度的字体大小 |
| --textarea-length-color | 'var(--za-color-text-disabled)' | 多行文本内容长度的字体颜色 |