HeaderSearch顶部搜索框

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

引用方式:

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

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

代码演示

HeaderSearch 顶部搜索框 - 图1

全局搜索

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

  1. import HeaderSearch from 'ant-design-pro/lib/HeaderSearch';
  2. ReactDOM.render(
  3. <div
  4. style={{
  5. textAlign: 'right',
  6. height: '64px',
  7. lineHeight: '64px',
  8. boxShadow: '0 1px 4px rgba(0,21,41,.12)',
  9. padding: '0 32px',
  10. width: '400px',
  11. }}
  12. >
  13. <HeaderSearch
  14. placeholder="站内搜索"
  15. dataSource={['搜索提示一', '搜索提示二', '搜索提示三']}
  16. onSearch={value => {
  17. console.log('input', value); // eslint-disable-line
  18. }}
  19. onPressEnter={value => {
  20. console.log('enter', value); // eslint-disable-line
  21. }}
  22. />
  23. </div>,
  24. mountNode
  25. );

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输入框首次显示是否显示booleanfalse
open控制输入框是否显示booleanfalse