Commit d6386bbb authored by afc163's avatar afc163

update components API and demo

parent 3ab00435
---
order: 0
title: 演示
iframe: 600
---
浮动固定页脚。
````jsx
import FooterToolbar from 'ant-design-pro/lib/FooterToolbar';
import { Icon } from 'antd';
ReactDOM.render(
<div style={{ background: '#f7f7f7' }}>
<p>页面内容 页面内容 页面内容 页面内容</p>
<p>页面内容 页面内容 页面内容 页面内容</p>
<p>页面内容 页面内容 页面内容 页面内容</p>
<p>页面内容 页面内容 页面内容 页面内容</p>
<p>页面内容 页面内容 页面内容 页面内容</p>
<p>页面内容 页面内容 页面内容 页面内容</p>
<p>页面内容 页面内容 页面内容 页面内容</p>
<p>页面内容 页面内容 页面内容 页面内容</p>
<FooterToolbar extra="提示信息">
<Button type="primary">提交</Button>
<Button>取消</Button>
</FooterToolbar>
</div>
, mountNode);
````
......@@ -6,4 +6,15 @@ subtitle: 底部固定工具栏
cols: 1
---
固定在底部的工具栏。
## 何时使用
固定在内容区域的底部,不随滚动条移动,常用于长页面的数据搜集和提交工作。
## API
参数 | 说明 | 类型 | 默认值
----|------|-----|------
children | 工具栏内容,向右对齐 | ReactNode | -
extra | 额外信息,向左对齐 | ReactNode | -
---
order: 0
title: Basic
title: 演示
iframe: 600
---
基本页脚。
......
......@@ -10,7 +10,7 @@ cols: 1
## API
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| links | 链接数据 | array<{ title: ReactNode, href: string, blankTarget?: boolean }> | - |
| copyright | 版权信息 | ReactNode | - |
参数 | 说明 | 类型 | 默认值
----|------|-----|------
links | 链接数据 | array<{ title: ReactNode, href: string, blankTarget?: boolean }> | -
copyright | 版权信息 | ReactNode | -
---
order: 0
title: 全局搜索
---
通常放在全局导航条右侧。
````jsx
import HeaderSearch from 'ant-design-pro/lib/HeaderSearch';
import { Icon } from 'antd';
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);
````
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Input, Icon, AutoComplete } from 'antd';
import classNames from 'classnames';
import styles from './index.less';
......@@ -6,6 +7,21 @@ import styles from './index.less';
export default class HeaderSearch extends PureComponent {
static defaultProps = {
defaultActiveFirstOption: false,
onPressEnter: () => {},
onChange: () => {},
onSearch: () => {},
className: '',
placeholder: '',
dataSource: [],
};
static propTypes = {
className: PropTypes.string,
placeholder: PropTypes.string,
onSearch: PropTypes.func,
onPressEnter: PropTypes.func,
onChange: PropTypes.func,
defaultActiveFirstOption: PropTypes.bool,
dataSource: PropTypes.array,
};
state = {
searchMode: false,
......@@ -23,6 +39,7 @@ export default class HeaderSearch extends PureComponent {
}
onChange = (value) => {
this.setState({ value });
this.props.onChange();
}
enterSearchMode = () => {
this.setState({ searchMode: true }, () => {
......@@ -49,7 +66,6 @@ export default class HeaderSearch extends PureComponent {
className={inputClass}
value={this.state.value}
onChange={this.onChange}
onSelect={this.onSelect}
{...restProps}
>
<Input
......
---
category: Components
type: General
title: HeaderSearch
subtitle: 顶部搜索框
cols: 1
---
用在顶部导航上,提供应用全局搜索入口。
## API
参数 | 说明 | 类型 | 默认值
----|------|-----|------
placeholder | 占位文字 | string | -
dataSource | 当前提示内容列表 | string[] | -
onSearch | 选择某项或按下回车时的回调 | function(value) | -
onChange | 输入搜索字符的回调 | function(value) | -
onPressEnter | 按下回车时的回调 | function(value) | -
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment