Kaynağa Gözat

update components API and demo

afc163 8 yıl önce
ebeveyn
işleme
d6386bbb6b

+ 29 - 0
src/components/FooterToolbar/demo/basic.md

@@ -0,0 +1,29 @@
+---
+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);
+````

+ 11 - 0
src/components/FooterToolbar/index.md

@@ -6,4 +6,15 @@ subtitle: 底部固定工具栏
 cols: 1
 ---
 
+固定在底部的工具栏。
+
+## 何时使用
+
+固定在内容区域的底部,不随滚动条移动,常用于长页面的数据搜集和提交工作。
+
 ## API
+
+参数 | 说明 | 类型 | 默认值
+----|------|-----|------
+children | 工具栏内容,向右对齐 | ReactNode | -
+extra | 额外信息,向左对齐 | ReactNode | -

+ 2 - 1
src/components/GlobalFooter/demo/basic.md

@@ -1,6 +1,7 @@
 ---
 order: 0
-title: Basic
+title: 演示
+iframe: 600
 ---
 
 基本页脚。

+ 4 - 4
src/components/GlobalFooter/index.md

@@ -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 | -

+ 35 - 0
src/components/HeaderSearch/demo/basic.md

@@ -0,0 +1,35 @@
+---
+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);
+````

+ 17 - 1
src/components/HeaderSearch/index.js

@@ -1,4 +1,5 @@
 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

+ 19 - 0
src/components/HeaderSearch/index.md

@@ -0,0 +1,19 @@
+---
+category: Components
+type: General
+title: HeaderSearch
+subtitle: 顶部搜索框
+cols: 1
+---
+
+用在顶部导航上,提供应用全局搜索入口。
+
+## API
+
+参数 | 说明 | 类型 | 默认值
+----|------|-----|------
+placeholder | 占位文字 | string | -
+dataSource | 当前提示内容列表 | string[] | -
+onSearch | 选择某项或按下回车时的回调 | function(value) | -
+onChange | 输入搜索字符的回调 | function(value) | -
+onPressEnter | 按下回车时的回调 | function(value) | -