HeaderSearch顶部搜索框
通常作为全局搜索的入口,放置在导航工具条右侧。
引用方式:
import HeaderSearch from 'ant-design-pro/lib/HeaderSearch';
详细使用方式请参照:独立使用 pro 组件
代码演示
import HeaderSearch from 'ant-design-pro/lib/HeaderSearch';
ReactDOM.render(
<div
style={{
textAlign: 'right',
height: '64px',
lineHeight: '64px',
boxShadow: '0 1px 4px rgba(0,21,41,.12)',
padding: '0 32px',
width: '400px',
}}
>
<HeaderSearch
placeholder="站内搜索"
dataSource={['搜索提示一', '搜索提示二', '搜索提示三']}
onSearch={value => {
console.log('input', value); // eslint-disable-line
}}
onPressEnter={value => {
console.log('enter', value); // eslint-disable-line
}}
/>
</div>,
mountNode
);
API#
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
placeholder | 占位文字 | string | - |
dataSource | 当前提示内容列表 | string[] | - |
onSearch | 搜索补全项的时候调用 | function(value) | - |
onChange | 选中 option,或 input 的 value 变化时,调用此函数 | function(value) | - |
onSelect | 被选中时调用,参数为选中项的 value 值 | function(value) | - |
onPressEnter | 按下回车时的回调 | function(value) | - |
onVisibleChange | 显示或隐藏文本框的回调 | function(value) | - |
defaultOpen | 输入框首次显示是否显示 | boolean | false |
open | 控制输入框是否显示 | boolean | false |