zarm
Version:
基于 React 的移动端UI库
207 lines (174 loc) • 7.29 kB
Markdown
# SearchBar 搜索框
## 基本用法
```jsx
import { useState, useRef } from 'react';
import { SearchBar } from 'zarm';
const Demo = () => {
const [value, setValue] = useState('');
return (
<SearchBar
value={value}
onChange={(e) => {
setValue(e.target.value);
console.log(`onChange: ${e.target.value}`);
}}
onFocus={() => {
console.log('onFocus');
}}
onBlur={() => {
console.log('onBlur');
}}
onSubmit={(value) => {
console.log(`onSubmit: ${value}`);
}}
onCancel={() => {
console.log(`onCancel`);
}}
/>
);
};
ReactDOM.render(<Demo />, mountNode);
```
## 始终展示取消按钮
```jsx
import { useState } from 'react';
import { SearchBar } from 'zarm';
const Demo = () => {
const [value, setValue] = useState('');
return (
<SearchBar
showCancel={() => true}
value={value}
onChange={(e) => {
setValue(e.target.value);
console.log(`onChange: ${e.target.value}`);
}}
onSubmit={(value) => {
console.log(`onSubmit: ${value}`);
}}
/>
);
};
ReactDOM.render(<Demo />, mountNode);
```
## 获取焦点后展示取消按钮
```jsx
import { useState } from 'react';
import { SearchBar } from 'zarm';
const Demo = () => {
const [value, setValue] = useState('');
return (
<SearchBar
showCancel
value={value}
onChange={(e) => {
setValue(e.target.value);
console.log(`onChange: ${e.target.value}`);
}}
onSubmit={(value) => {
console.log(`onSubmit: ${value}`);
}}
/>
);
};
ReactDOM.render(<Demo />, mountNode);
```
## 多形状
```jsx
import { SearchBar } from 'zarm';
ReactDOM.render(
<>
<SearchBar shape="rect" />
<SearchBar shape="round" />
</>,
mountNode,
);
```
## 手动获取焦点
```jsx
import { useRef } from 'react';
import { SearchBar, Button } from 'zarm';
const Demo = () => {
const searchRef = useRef();
return (
<>
<SearchBar ref={searchRef} />
<div className="button-wrap">
<Button
theme="primary"
size="xs"
shape="radius"
onClick={() => {
searchRef.current.focus();
}}
>
点击获取焦点
</Button>
</div>
</>
);
};
ReactDOM.render(<Demo />, mountNode);
```
## 自定义图标
```jsx
import { SearchBar, Button } from 'zarm';
import { WarningCircle } from '@zarm-design/icons';
const Demo = () => {
const [icon, setIcon] = React.useState(<WarningCircle size="sm" />);
return (
<>
<SearchBar icon={icon} />
<div className="button-wrap">
<Button size="xs" shape="radius" onClick={() => setIcon(null)}>
不显示 Icon
</Button>
<Button size="xs" shape="radius" onClick={() => setIcon(undefined)}>
默认 Icon
</Button>
<Button size="xs" shape="radius" onClick={() => setIcon(<WarningCircle size="sm" />)}>
自定义 Icon
</Button>
</div>
</>
);
};
ReactDOM.render(<Demo />, mountNode);
```
## API
| 属性 | 类型 | 默认值 | 说明 |
| :----------- | :------------------------------------------------------ | :--------------------- | :------------------------------------- |
| placeholder | string | '搜索' | 输入框占位符 |
| value | string | - | 值 |
| defaultValue | string | - | 初始值 |
| shape | string | 'radius' | 形状，可选值 `rect`, `radius`, `round` |
| disabled | boolean | false | 是否禁用 |
| showCancel | boolean \| ((focus: boolean, value: string) => boolean) | false | 是否在搜索框右侧展示取消按钮 |
| cancelText | React.ReactNode | '取消' | 取消按钮显示的内容 |
| maxLength | number | - | 输入字数上限 |
| clearable | boolean | true | 是否提供清空输入框功能 |
| icon | React.ReactNode | \<Search size="sm" /\> | 图标 |
| onChange | (event: React.ChangeEvent\<HTMLInputElement\>) => void | - | 值变化时触发的回调函数 |
| onCancel | () => void | - | 点击取消按钮触发的回调函数 |
| onSubmit | (value: string) => void | - | 输入框回车时触发的回调函数 |
| onFocus | (event: React.FocusEvent\<HTMLInputElement\>) => void | - | 获取焦点时触发的回调函数 |
| onBlur | (event: React.FocusEvent\<HTMLInputElement\>) => void | - | 失去焦点时触发的回调函数 |
## CSS 变量
| 属性 | 默认值 | 说明 |
| :------------------------- | :-------------------------- | :----------------- |
| --background | 'transparent' | 背景色 |
| --height | '52px' | 高度 |
| --padding-horizontal | '16px' | 左右留白内边距 |
| --input-padding-horizontal | '8px' | 输入框内边距 |
| --input-height | '36px' | 输入框高度 |
| --input-background | 'rgba(118, 118, 128, 0.12)' | 输入框背景色 |
| --input-font-size | 'var(--za-font-size-md)' | 输入框字体大小 |
| --input-placeholder-color | '#808084' | 输入框占位符颜色 |
| --input-clear-icon-color | '#8e8e92' | 输入框清除图标颜色 |
| --input-border-radius | '10px' | 输入框圆角大小 |
| --cancel-font-size | 'var(--za-font-size-md)' | 取消按钮字体大小 |
| --cancel-color | 'var(--za-theme-primary)' | 取消按钮字体颜色 |
| --cancel-margin-left | '13px' | 取消按钮左边距 |
| --cancel-transition | 'all 0.2s' | 取消按钮动画 |
| --icon-margin-right | '6px' | 输入框图标右边距 |
| --icon-color | '#808084' | 输入框图标颜色 |