HeaderSearch顶部搜索框

通常作为全局搜索的入口,放置在导航工具条右侧。

引用方式:

import HeaderSearch from 'ant-design-pro/lib/HeaderSearch';

详细使用方式请参照:独立使用 pro 组件

代码演示

通常放置在导航工具条右侧。(点击搜索图标预览效果)

expand codeexpand code
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