HeaderSearch

Usually placed as an entry to the global search, placed on the right side of the navigation toolbar.

Usage:

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

Learning more to visit: Using Pro Components Alone

Examples

全局搜索

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

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 placeholder text string -
dataSource current list of prompts string[] -
onSearch Called when searching items. function(value) -
onChange Called when select an option or input value change, or value of input is changed function(value) -
onSelect Called when a option is selected. param is option's value and option instance. function(value) -
onPressEnter Callback when pressing Enter function(value) -
onVisibleChange Show or hide the callback of the text box function(value) -
defaultOpen The input box is displayed for the first time. boolean false
open The input box is displayed boolean false
GlobalFooterNoticeIcon