二、通用、布局、导航组件

一、通用组件

1、Button按钮

按钮用于开始一个即时操作。

何时使用：标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑

(0)<Button>组件对应的事件

<1>onClick事件：表示点击按钮时的回调.可选值：无；默认值： false；类型：(event) => void。

(1)<Button>组件对应属性: 这个即单独的一个按钮组件。支持原生 button 的其他所有属性

<1>disabled: 表示按钮失效状态.可选值：无；默认值： false；类型：boolean。

<2>ghost: 表示幽灵属性，使按钮背景透明，按钮背景显示颜色为背景色.可选值：无；默认值： false；类型：boolean。

<3>href: 表示点击跳转的地址，指定此属性 button 的行为和 a 链接一致.可选值：无；默认值： -；类型：string。

<4>htmlType: 表示设置 button 原生的 type 值，可选值请参考 HTML 标准.可选值：无；默认值： button；类型：string。

<5>icon: 表示给按钮添加小图标.可选值：无；默认值： -；类型：string。

如果button里面还有文字的话，icon出现在button左边,文字出现在button右边

<6>loading: 表示使按钮显示为加载状态.可选值：无；默认值： false；类型：boolean | { delay: number }。

<7>shape: 表示设置按钮形状，可选值为 circle、 round 或者不设.可选值：无；默认值： -；类型：string。

circle: 按钮为圆形

round: 按钮垂直方向的border-radius为50%。即左右看起来为半圆

不设: 按钮为长方形，只有一点点的border-radius

<8>size: 表示设置按钮大小，可选值为 small large 或者不设.可选值：无；默认值： default(中等大小)；类型：string。

<9>target: 表示相当于 a 链接的 target 属性，href 存在时生效.可选值：无；默认值： -；类型：string。

<10>type: 表示设置按钮类型，可选值为 primary dashed danger link或者不设.可选值：无；默认值： -；类型：string。

primary: 主按钮，背景为蓝色，里面文字为白色

dashed: 边框为虚线的按钮，背景为白色

danger: 背景为红色，里面文字为白色

link: 链接按钮，没有边框为背景，只有一个蓝色的文字

不设置type: 不设置type，边框实线的按钮，背景为白色

<11>block: 表示将按钮宽度调整为其父宽度的选项.可选值：无；默认值： false；类型：boolean。

(2)<Button>的子组件<Button.Group>按钮组组件对应属性: 这个即一个按钮组，几个按钮挨着放的那个。这个在引入的时候只需要引入一个Button属性就好了，按钮组是Button组件上面的属性

<1>size: 表示设置按钮组的大小，可选值为 small large 或者不设.可选值：无；默认值： default(中等大小)；类型：string。

import React from 'react';
import { Button } from 'antd';
const ButtonGroup = Button.Group;

class demo extends React.Component {
  state = {loading: false,};
  enterLoading = () => {this.setState({ loading: true });};
    render() {
      return (
        <div>
            <Button type="primary" shape="round" icon="search" ghost>Adsadsad</Button>
            <Button type="primary" shape="circle" size="large" icon="search" disabled />
            <Button type="primary" loading={this.state.loading} onClick={() => {this.enterLoading()}}>Click me!</Button>
            <ButtonGroup size="large">
              <Button type="primary" icon="cloud" />
              <Button type="primary" icon="cloud-download" />
            </ButtonGroup>
        </div>
      );
    }
  }
export default demo;

2、Icon图标

语义化的SVG 图标。地址 https://ant.design/components/icon-cn/#components-icon-demo-iconfont

何时使用：可以用一个link标签，type属性制定为对应类名；或者配合其它组件使用，用在其它组件的icon属性上面

(1)<Icon>组件对应属性: 这个即一个图标组件

<1>type: 表示图标类型。遵循图标的命名规范.可选值：无；默认值： -；类型：string。

<2>style: 表示设置图标的样式，例如 fontSize 和 color(这里面color的优先级低于theme的twoTone，和属性twoToneColor).可选值：无；默认值： -；类型：CSSProperties。

由于这个的值为一个对象，所以在使用的时候，里面也要加个大括号。<Icon type="smile" theme="filled" style={ {fontSize: '50px',color: 'green'}}/>

<3>theme: 表示图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标.可选值：无；默认值： ‘outlined’；类型：‘filled’ | ‘outlined’ | ‘twoTone’。

filled: 这个主题，即把图标填充的主题

outlined: 这个主题，即图标只有一条线的主题

twoTone: 这个主题，说的是把图标设置为两种颜色，但是实际上测试出来还是只有一种颜色，并且会覆盖设置在style上面的color

<4>spin: 表示是否让图标一直旋转.可选值：无；默认值： false；类型：boolean。

<5>rotate: 表示图标旋转的角度，相当于css3中的transform：rotate();.可选值：无；默认值： -；类型：number。

<6>component: 表示这个属性就算把传入的svg代码，作为svg显示出来.可选值：无；默认值： -；类型：ComponentType，即一个svg代码。

<7>twoToneColor: 表示当theme值为twoTone的时候，设置图标的颜色(这时候设置color无效).可选值：无；默认值： -；类型：string (十六进制颜色)。

(2)自定义 font 图标createFromIconfontCN()方法：这个方法用来传入在 iconfont.cn 上生成的url，来自定义图标

import React from 'react';
import { Icon } from 'antd';
class demo extends React.Component {
    render() {
      return (
        <div className="icons-list">
            <Icon type="setting" spin/>
            <Icon type="home" theme="twoTone" twoToneColor="red" rotate={180}/>
            <Icon type="smile" theme="filled" style={
   
   {fontSize: '50px',color: 'red'}}/>
        </div>
      );
    }
  }
export default demo;

// 自定义图标如下
const MyIcon = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
});
ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);

3、Typography排版

文本的基本格式

何时使用：<1>当需要展示标题、段落、列表内容时使用，如文章/博客/日志的文本样式。<2>当需要一列基于文本的基础操作时，如拷贝/省略/可编辑。

二、布局组件

1、Grid栅格

24 栅格系统，就算一个行组件和一个列组件。和element ui的布局系统差不多的

何时使用：布局的时候使用

(1)<Row>组件对应属性: 一个行组件

<1>gutter: 表示栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距]，数组形式无效.可选值：无；默认值： 0；类型：number/object/array。还没用

<2>justify: 表示flex 布局下的水平排列方式.可选值：start end center space-around space-between；默认值： start；类型：string。

<3>align: 表示flex 布局下的垂直对齐方式,值(和CSS里面写align-items是不一样的值).可选值：top middle bottom；默认值： top；类型：string。

<4>type: 表示布局模式，可选 flex.可选值：无；默认值： -；类型：string。

(2)<Col>组件对应属性: 一个列组件。列（Col）必须放在 Row 内

<1>span: 表示栅格占据的列数（总共为24个），为 0 时相当于 display: none.可选值：无；默认值： -；类型：number。

如果一个row里面的所以col的span的总数大于了24个，多余的那个会到下一行

<2>order: 表示当type值为flex的时候，调整当前的栅格col的顺序.可选值：无；默认值： 0；类型：number。

<3>offset: 表示栅格左侧的间隔格数，offset会占用一列总共的num，所以会改变后面元素的位置，把后面的元素往后面挤.可选值：无；默认值： 0；类型：number。

实际上就是给目标元素加上了margin-left。有可能把元素挤到下一行去

<4>pull: 表示栅格向左移动格数，push和pull不会占用一列总共的num，所以不会改变后面元素的位置.可选值：无；默认值： 0；类型：number。

实际上就是加上position：relative，然后改变left值，不能为负

<5>push: 表示栅格向右移动格数.可选值：无；默认值： 0；类型：number。

实际上就是加上position：relative，然后改变left值，不能为负

<6>xs(extra small超小)、sm(small小)、md(middle中)、lg(large大)、xl(extra large超大)、xxl: 表示，**<576px、≥576px、≥768px、≥992px、≥1200px、≥1600px**的响应式栅格，可为栅格数或一个包含其他属性的对象.可选值：无；默认值： -；类型：number|object。

import React from 'react';
import { Row, Col } from 'antd';
class demo extends React.Component {
    render() {
      return (
        <div>
            <Row type="flex" justify="center" align="top" gutter={20}>
                  <Col style={
   
   {border:'1px solid red'}} span={5} order={2}>col-12</Col>
                  <Col style={
   
   {border:'1px solid green'}} span={18} offset={1} order={3}>col-12</Col>
                  <Col style={
   
   {border:'1px solid blue'}} span={5} order={1}>col-12</Col>
            </Row>
            <Row>
                  <Col style={
   
   {border:'1px solid red'}} span={5} order={2}>col-0</Col>
            </Row>
        </div>
      );
    }
  }
export default demo;

2、Layout布局

协助进行页面级整体布局。这个布局就相当element ui里面的Container容器，是进行页面最外层的整体布局的

何时使用：用在页面的basic组件里面，进行页面的整体布局

(0)<Layout.Sider>组件对应的事件

<1>onCollapse事件：表示当侧边栏展开或者折叠时触发，有点击 trigger 以及响应式反馈两种方式可以触发.可选值：无；默认值： -；类型：(collapsed, type) => {}。

collapsed：表示点击按钮之后的，侧边栏的折叠状态。如果是从折叠状态变为展开状态，这个值就为false

<2>onBreakpoint事件：表示触发响应式布局断点时的回调.可选值：无；默认值： -；类型： (broken) => {}。

(1)<Layout>组件对应属性: 布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。

<1>className: 表示容器 className.可选值：无；默认值： -；类型：string。

<2>hasSider: 表示表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动.可选值：无；默认值： -；类型：boolean。

<3>style: 表示指定样式.可选值：无；默认值： -；类型：object。

(2)<Layout>的子组件<Layout.Header>组件对应属性: 顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中

API 与 Layout 相同

(3)<Layout>的子组件<Layout.Content>组件对应属性: 内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。

API 与 Layout 相同

(4)<Layout>的子组件<Layout.Footer>组件对应属性: 底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。

API 与 Layout 相同

(5)<Layout>的子组件<Layout.Sider>组件对应属性: 侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。

<1>breakpoint: 表示触发响应式布局的断点.可选值：无；默认值： -；类型： Enum { ‘xs’, ‘sm’, ‘md’, ‘lg’, ‘xl’, ‘xxl’ }。

<2>className: 表示容器 className.可选值：无；默认值： -；类型：string。

<3>collapsed: 表示侧边栏当前是否为折叠状态；为true表示侧边栏为折叠状态，false表示侧边栏为展开状态；在collapsible为true的时候才有效。.可选值：无；默认值： -；类型：boolean。

<4>collapsedWidth: 表示收缩宽度，设置为 0 会出现特殊 trigger.可选值：无；默认值： 80；类型：number。

<5>collapsible: 表示是否可折叠；为true则会出现一个按钮，点击这个按钮就会折叠侧边栏；为false不会出现这个按钮.可选值：无；默认值： false；类型：boolean。

<6>defaultCollapsed: 表示是否默认折叠.可选值：无；默认值： false；类型：boolean。

<7>reverseArrow: 表示翻转折叠提示箭头的方向，当 Sider 在右边时可以使用.可选值：无；默认值： false；类型：boolean。

<8>style: 表示指定样式.可选值：无；默认值： -；类型：object。

<9>theme: 表示主题颜色.可选值：无；默认值： dark；类型： string: light dark。

<10>trigger: 表示设置点击展开或者折叠的那个按钮显示的样式，设置值为 null 时隐藏按钮.可选值：无；默认值： -；类型：string|ReactNode|null。

string: 直接设置为string时，代表设置按钮上面的文字。<Sider trigger={'dsadas'}></Sider>，这样设置，按钮上面的文字就为dsadas

ReactNode: 设置为ReactNode时，表示把按钮设置为对应的样式

<11>width: 表示宽度.可选值：无；默认值： 200；类型：number|string。

<12>zeroWidthTriggerStyle: 表示指定当 collapsedWidth 为 0 时出现的特殊 trigger 的样式.可选值：无；默认值： -；类型：object。

import React, { PureComponent } from 'react';
import { Layout,Menu,Breadcrumb } from 'antd';
const {Header,Content,Footer} = Layout;

class demo extends PureComponent {
  state = {loading: false,collapsed:false};
  enterLoading = () => {this.setState({ loading: true });};
  onCollapse = collapsed => {this.setState({ collapsed });};
    render() {
      return (
<Layout className="layout">
<SiderSider trigger={null} collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}></Sider>
    <Header>
      <div className="logo" />
      <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} style={
   
   { lineHeight: '64px' }}>
        <Menu.Item key="1">nav 1</Menu.Item>
        <Menu.Item key="2">nav 2</Menu.Item>
      </Menu>
    </Header>
    <Content style={
   
   { padding: '0 50px' }}>
      <Breadcrumb style={
   
   { margin: '16px 0' }}>
        <Breadcrumb.Item>Home</Breadcrumb.Item>
        <Breadcrumb.Item>List</Breadcrumb.Item>
      </Breadcrumb>
      <div style={
   
   { background: '#fff', padding: 24, minHeight: 280 }}>Content</div>
    </Content>
    <Footer style={
   
   { textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
  </Layout>
      );
    }
  };
export default demo;

三、导航组件

1、Affix固钉

让包含的元素在页面拉到指定的范围时，元素固定不动，即先relative，后fixed。这个就是postion：sticky的加强版，position:sticky的元素只在父元素范围内有效；而这个可以让里面包含的元素在整个页面的范围内有效

何时使用：<1>需要让元素在页面滚动的时候，先不固定，而后随着滚动距离可以固定在页面；并且元素的父级元素不是最顶层元素的时候(如果父级元素是最顶层元素，那么直接就可以用position：sticky了，就可以不用这个了)。

(0)<Affix>组件对应的事件

<1>onChange事件：表示固定状态改变时触发的回调函数.可选值：无；默认值： -；类型： Function(affixed)。

(1)<Affix>组件对应属性: 这个即用来包含其它的组件，被包含的组件在滚动到指定偏移量的时候，就开始固定不动，不滚动了

<1>offsetBottom: 表示距离窗口底部达到指定偏移量后，开始变为fixed.可选值：无；默认值： -；类型：number。

<2>offsetTop: 表示距离窗口顶部达到指定偏移量后，开始变为fixed.可选值：无；默认值： -；类型：number。

<3>target: 表示设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数.可选值：无；默认值： () => window；类型：() => HTMLElement。

import React, { PureComponent } from 'react';
import { Layout,Menu,Breadcrumb,Affix,Button } from 'antd';
class demo extends PureComponent {render() {return (<Affix offsetTop={100}><Button type="primary"}>Affix top</Button></Affix>);}};
export default demo;

2、Breadcrumb面包屑

显示当前页面在系统层级结构中的位置，并能向上返回。

何时使用：<1>当系统拥有超过两级以上的层级结构时；<2>当需要告知用户『你在哪里』时。<3>当需要向上导航的功能时。

(0)<Breadcrumb.Item>组件对应的事件

<1>onClick事件：表示单击事件.可选值：无；默认值： -；类型：(e:MouseEvent)=>void。

(1)<Breadcrumb>组件对应属性: 面包屑组件

<1>itemRender: 表示自定义链接函数，和 react-router 配置使用.可选值：无；默认值： -；类型：(route, params, routes, paths) => ReactNode。

<2>params: 表示路由的参数.可选值：无；默认值： -；类型：object。

<3>routes: 表示router 的路由栈信息.可选值：无；默认值： -；类型：routes[]。

<4>separator: 表示全局的，自定义每个面包屑之间的分隔符.可选值：无；默认值： ‘/’；类型： string|ReactNode。

(2)<Breadcrumb.Item>组件对应属性: 嵌套进<Breadcrumb>组件里面，表示面包屑里面的每一项。然后这里面也可以包含各种元素，表示面包屑在页面上面显示的值

<1>href: 表示链接的目的地。除去直接用href跳转，也可以在<Breadcrumb.Item>组件里面包一个link组件，进行跳转.可选值：无；默认值： -；类型：string。

<2>overlay: 表示下拉菜单的内容.可选值：无；默认值： -；类型： Menu | () => Menu。

(3)<Breadcrumb.Separator>组件对应属性: 面包屑的分隔符。没撒用

<1>children: 表示要显示的分隔符.可选值：无；默认值： ‘/’；类型：string|ReactNode。

import React, { PureComponent } from 'react';
import Link from 'umi/link';
import { Layout, Menu, Breadcrumb, Icon, Button } from 'antd';
class demo extends PureComponent {
  render() {
    return (
      <Breadcrumb  separator=">">
        <Breadcrumb.Item>Home</Breadcrumb.Item>
        <Breadcrumb.Item><Icon type="user" /> <Link to="/welcome">Application Center</Link></Breadcrumb.Item>
        <Breadcrumb.Item href="/userManage">Application Center</Breadcrumb.Item>
      </Breadcrumb>
    );
  }
};
export default demo;

3、Dropdown下拉菜单

向下弹出的列表。和select类似，不过不能选择下拉菜单里面的内容，也不能输入。

何时使用：当页面上的操作命令过多时，用此组件可以收纳操作元素。可以实现页面上显示一个缩略内容，然后再鼠标移入或者点击的时候，在下面显示一个详细的内容。可在列表中进行选择，并执行相应的命令。

(0)<Dropdown>组件对应的事件

<1>onVisibleChange事件：表示菜单显示状态改变时调用，参数为 visible.可选值：无；默认值： -；类型：Function(visible)。

(-1)<Dropdown>的子组件<Dropdown.Button>组件对应的事件

<1>onClick事件：表示点击左侧按钮的回调，和 Button 一致.可选值：无；默认值： -；类型：Function。

<2>onVisibleChange事件：表示菜单显示状态改变时调用，参数为 visible.可选值：无；默认值： -；类型：Function(visible)。

(1)<Dropdown>组件对应属性: 组件里面可以包含文字或者其它组件，这些内容会直接显示在页面上。鼠标hover或者点击这些内容，就会把menu里面的内容作为下拉列表弹出来。这里需要注意的是，包在<Dropdown>组件里面的内容如果是字符串，则需要在字符串外面再包一个标签，不然会报错，如<Dropdown overlay={menu}>Hover me</Dropdown>会报错，<Dropdown overlay={menu}><div>Hover me</div></Dropdown>不会报错

<1>disabled: 表示弹出的菜单是否禁用.可选值：无；默认值： -；类型：string。

<2>getPopupContainer: 表示弹出的菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位.可选值：无；默认值： () => document.body；类型：Function(triggerNode)。

<3>overlay: 表示点击或者hover<dropdown>组件里面的文字的时候，下面弹出来的菜单.可选值：无；默认值： -；类型： <Menu>组件 | () => <Menu>组件。

<4>overlayClassName: 表示下拉根元素的类名称.可选值：无；默认值： -；类型：string。

<5>overlayStyle: 表示下拉根元素的样式.可选值：无；默认值： -；类型：object。

<6>placement: 表示弹出的菜单的位置.可选值：bottomLeft bottomCenter bottomRight topLeft topCenter topRight；默认值： bottomLeft；类型：string。

<7>trigger: 表示触发下拉框弹出的事件, 移动端不支持 hover。可以多个方式组合.可选值：无；默认值： [‘hover’]；类型：Array<click|hover|contextMenu(这个为点击右键触发)>。

<8>visible: 表示弹出的菜单是否显示.可选值：无；默认值： -；类型：boolean。

(2)<Dropdown>的子组件<Dropdown.Button>组件对应属性: 这个子组件功能上和上面的<Dropdown>一样，不过就是样式变成了默认为一个按钮样式

<1>disabled: 表示弹出的菜单是否禁用.可选值：无；默认值： -；类型：string。

<2>icon: 表示右侧的 icon.可选值：无；默认值： -；类型： ReactNode。

<3>overlay: 表示弹出的菜单.可选值：无；默认值： -；类型： Menu。

<4>placement: 表示弹出的菜单的位置.可选值：bottomLeft/bottomCenter/bottomRight/topLeft/topCenter/topRight；默认值： bottomLeft；类型：string。

<5>size: 表示按钮大小，和 Button组件一致.可选值：无；默认值： ‘default’；类型：string。

<6>trigger: 表示触发下拉的行为, 移动端不支持 hover.可选值：无；默认值： [‘hover’]；类型：Array<click|hover|contextMenu>。

<7>type: 表示按钮类型，和 Button 一致.可选值：-；默认值： ‘default’；类型：string。

<8>visible: 表示弹出的菜单是否显示.可选值：无；默认值： -；类型：boolean。

import React, { PureComponent } from 'react';
import { Layout, Menu, Dropdown, Icon, Button } from 'antd';
class demo extends PureComponent {
  render() {
    const menu = (<Menu><Menu.Item><a>1st menu item</a></Menu.Item></Menu>);
    return (<div><Dropdown overlay={menu} placement="bottomLeft"><Button>bottomLeft</Button></Dropdown>
        <Dropdown overlay={menu} trigger={['click','contextMenu']} placement="topLeft"><div>topCenter</div></Dropdown>
        // 下面一个dropdown就是实例了
          <Dropdown
            placement='bottomCenter'
            overlay={
              <Menu>
                <Menu.Item key='status'>
                  <Button type="link" size="small" style={
   
   {color: 'red'}} onClick={() => {changeNormalAdvertisementStatus(record)}}>{!status ? '启用' : '禁用'}</Button>
                </Menu.Item>
                <Menu.Item key='delete'>
                  <Popconfirm title={deleteText} onConfirm={() => {deleteNormalAdvertisement(record);}}>
                    <Button type="link" size="small" style={
   
   {color: 'red'}}>删除</Button>
                  </Popconfirm>
                </Menu.Item>
              </Menu>
            }
          >
            <Button type="link" size="small">更多</Button>
          </Dropdown>
        </div>);
  }
};
export default demo;

4、Menu导航菜单

为页面和功能提供导航的菜单列表。

何时使用：导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。

(0)<Menu>组件对应的事件

<1>onClick事件：表示点击 MenuItem 调用此函数.可选值：无；默认值： -；类型：function({ key,keyPath, item, domEvent })，这个函数接收一个item对象，对象里面包含了所点击的item的所有信息。

key: 被点击的item的key值。如：key: "setting:3"

keyPath: 值为一个数组，表示的是item从父菜单的key到自己这个key的key值路径。比如:keyPath: (2) ["setting:3", "item_5"],表示当前item的key是setting:3，它的父menu的key是item_5

item: 当前选中的item的一些信息。如：item: MenuItem {props: {…}, context: {…}, refs: {…}, updater: {…}, onKeyDown: ƒ, …}

domEvent : 当前选中的item的另外一些信息

<2>onDeselect事件：表示取消选中时调用，仅在 multiple 生效.可选值：无；默认值： -；类型：function({ item, key, keyPath, selectedKeys, domEvent })。

<3>onOpenChange事件：表示SubMenu 展开/关闭的回调.可选值：无；默认值： noop；类型：function(openKeys: string[])。

<4>onSelect事件：表示被选中时调用.可选值：无；默认值： -；类型：function({ item, key, keyPath, selectedKeys, domEvent })。

<5>overflowedIndicator事件：表示自定义 Menu 折叠时的图标.可选值：无；默认值： -；类型：ReactNode。

(0+)<Menu>的子组件<Menu.SubMenu>子菜单对应的事件

<1>onTitleClick事件：表示点击子菜单标题.可选值：无；默认值： -；类型：function({ key, domEvent })。

(1)<Menu>组件对应属性: 这个就是一个菜单组件

<1>defaultOpenKeys: 表示初始展开的 SubMenu 菜单项 key 数组.可选值：无；默认值： -；类型：string[]

<2>defaultSelectedKeys: 表示设置初始选中菜单的默认值，初始选中的菜单项 key 数组.可选值：无；默认值： -；类型：string[]

<3>forceSubMenuRender: 表示在子菜单展示之前就渲染进 DOM.可选值：无；默认值： false；类型：boolean

<4>inlineCollapsed: 表示inline 时菜单是否折叠状态.可选值：无；默认值： -；类型：boolean

<5>inlineIndent: 表示inline 模式的菜单缩进宽度.可选值：无；默认值： 24；类型：number

<6>mode: 表示菜单类型，现在支持水平、垂直、和内嵌模式三种.可选值：无；默认值： vertical；类型：string: horizontal vertical inline

horizontal: 整个菜单栏为水平方向的，它里面的子菜单直接出现在父菜单的下面

vertical: 整个菜单栏为垂直方向的，它里面的子菜单出现的时候会出现在本菜单的左边或者右边

inline: 整个菜单栏也为垂直方向的，只不过子菜单出现在本菜单的下面

<7>multiple: 表示是否允许多选.可选值：无；默认值： false；类型：boolean

<8>openKeys: 表示当前展开的 SubMenu 菜单项 key 数组.可选值：无；默认值： -；类型：string[]

<9>selectable: 表示是否允许选中.可选值：无；默认值： true；类型：boolean

<10>selectedKeys: 表示当前选中的菜单项 key 数组.可选值：无；默认值： -；类型：string[]

<11>style: 表示根节点样式.可选值：无；默认值： -；类型：object

<12>subMenuCloseDelay: 表示用户鼠标离开子菜单后关闭延时，单位：秒.可选值：无；默认值： 0.1；类型：number

<13>subMenuOpenDelay: 表示用户鼠标进入子菜单后开启延时，单位：秒.可选值：无；默认值： 0；类型：number

<14>theme: 表示主题颜色.可选值：无；默认值： light；类型： string: light dark

(2)<Menu>的子组件<Menu.Item>菜单项对应属性: 这个是菜单组件里面的每一个菜单项

<1>disabled: 表示是否禁用.可选值：无；默认值： false；类型： boolean

<2>key: 表示item 的唯一标志，这个key值是父menu触发onClick的时候的参数值，就可以获取到了.可选值：无；默认值： -；类型：string

<3>title: 表示设置收缩时展示的悬浮标题.可选值：无；默认值： -；类型：string

(3)<Menu>的子组件<Menu.SubMenu>子菜单对应属性:

<1>popupClassName: 表示子菜单样式.可选值：无；默认值： -；类型：string

<2>children: 表示子菜单的菜单项.可选值：无；默认值： -；类型：Array<MenuItem|SubMenu>

<3>disabled: 表示是否禁用.可选值：无；默认值： false；类型： boolean

<4>key: 表示唯一标志.可选值：无；默认值： -；类型：string

<5>title: 表示子菜单项值，即显示在页面上的，子菜单的位置显示出来的值.可选值：无；默认值： -；类型：string|ReactNode

比如：<SubMenu title={ <span className="submenu-title-wrapper"> <Icon type="setting" /> Navigation Three - Submenu </span> } </SubMenu>。这里面的span和icon这些，就是子菜单的位置显示出来的值

(4)<Menu>的子组件<Menu.ItemGroup>菜单项组对应属性: 感觉没用

<1>children: 表示分组的菜单项.可选值：无；默认值： -；类型：MenuItem[]

<2>title: 表示分组标题.可选值：无；默认值： -；类型： string|ReactNode

(5)<Menu>的子组件<Menu.Divider>菜单项分割线对应属性:

import React, { PureComponent } from 'react';
import { Menu, Icon } from 'antd';
const { SubMenu } = Menu;
class demo extends PureComponent {
  state = {current: 'setting:1',};
  handleClick = ({key, keyPath}:any) => {
    console.log('click ', key,keyPath); // key值为对应的选中的item的key值
    this.setState({current: key,});
  };
  enterLoading = () => {this.setState({ loading: true });};
    render() {
      return (
      <Menu 
          mode="horizontal" 
          selectedKeys={[this.state.current]} 
          theme="dark" 
          style={
   
   { width: 800 }} 
          onClick={({ key,keyPath, item, domEvent })=>{this.handleClick(key)}}
      >
        <Menu.Item key="mail"><Icon type="mail" />Navigation One111</Menu.Item>
        <SubMenu key="gogogogo" title={ <span className="submenu-title-wrapper"><Icon type="setting" />Navigation Three - Submenu</span>}>
            <Menu.Item key="setting:1">Option 1</Menu.Item>
            <Menu.Item key="setting:2">Option 2</Menu.Item>
        </SubMenu>
      </Menu>
      
      // 下面这个menu就是直接通过点击下面的item实现跳转
      <Menu>
        <Menu.Item key='status'>
          <Button type="link" size="small" style={
   
   {color: 'red'}} onClick={() => {changeNormalAdvertisementStatus(record)}}>{!status ? '启用' : '禁用'}</Button>
        </Menu.Item>
        <Menu.Item key='delete'>
          <Popconfirm title={deleteText} onConfirm={() => {deleteNormalAdvertisement(record);}}>
            <Button type="link" size="small" style={
   
   {color: 'red'}}>删除</Button>
          </Popconfirm>
        </Menu.Item>
      </Menu>
    );
    }
  };
export default demo;

5、Pagination分页

采用分页的形式分隔长列表，每次只加载一个页面。

何时使用：<1>当加载/渲染所有数据将花费很多时间时；<2>可切换页码浏览数据。

(0)<Pagination>组件对应的事件

<1>onChange事件：表示页码改变的回调，参数是改变后的页码及每页条数.可选值：无；默认值： noop；类型：Function(currentPage, pageSize)

<2>onShowSizeChange事件：表示pageSize 变化的回调.可选值：无；默认值： noop；类型：Function(currentPage, pageSize)

currentPage: 当前的页码

pageSize: 修改之后的每页条数

(1)<Pagination>组件对应属性: 里面组件的顺序好像是不能自定义的。默认的顺序从前到后是：showTotal(最左边)、pre、page、next、showSizeChanger、showQuickJumper

<1>current: 表示当前页数。如果是想设置默认的就用defaultCurrent。如果想知道当前页数，则就只需要在onChange，事件里面读取.可选值：无；默认值： -；类型：number。

<2>defaultCurrent: 表示默认的当前页数.可选值：无；默认值： 1；类型：number。

<3>defaultPageSize: 表示默认的页面加载时候，pageSize下拉框显示的值.可选值：无；默认值： 10；类型：number。

<4>disabled: 表示禁用分页.可选值：无；默认值： -；类型：boolean。

<5>hideOnSinglePage: 表示只有一页时是否隐藏分页器.可选值：无；默认值： false；类型：boolean。

<6>itemRender: 表示用于自定义页码的结构，可用于优化 SEO,即修改页码的默认样式，可以修改prev和next按钮的值.可选值：无；默认值： -；类型：(page, type: ‘page’ | ‘prev’ | ‘next’, originalElement) => React.ReactNode。

<7>pageSize: 表示每页条数.可选值：无；默认值： -；类型： number。

<8>pageSizeOptions: 表示指定pageSize下拉框，里面的值是哪些；数组的第一个值不是默认值，默认值需要用pageSize来设置.可选值：无；默认值： [‘10’, ‘20’, ‘30’, ‘40’]；类型： string[]。

<9>showLessItems: 表示show less page items.可选值：无；默认值： false；类型：boolean。

<10>showQuickJumper: 表示是否可以快速跳转至某页，即显示一个可以输入跳转到页面的输入框.可选值：无；默认值： false；类型：boolean | { goButton: ReactNode }。

<11>showSizeChanger: 表示是否可以改变 pageSize,即显示一个可以修改pagesize的下拉框.可选值：无；默认值： false；类型：boolean。

下拉框里面的默认值为pageSizeOptions的值

<12>showTotal: 表示用于显示数据总量和当前数据顺序.可选值：无；默认值： -；类型：Function(total, range)。

total: 表示总共的数据量，如果分页放在表格中，则表示表格的dataSource中的数据量。number

如果想要取得的是后台返回的total，而不是dataSource的total；则首先需要在state里面放一个后台返回的total，然后把这个paginaton的配置也要放在state里面，这个函数showTotal就用箭头函数的形式来写，就可以用this.state.total来获取到了

range: 表示当前页码，对应的数据范围。Array

返回一个字符串，用来显示在页面上。如：showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`},即在pagination的最左边，返回一个字符串，字符串大概样式为11-20 of 500 items

<13>simple: 表示当添加该属性时，显示为简单分页；这个即不显示页码，只显示一个跳转按钮和最后一页的页码.可选值：无；默认值： -；类型：boolean。

<14>size: 表示当值为「small」时，显示一个小型的分页.可选值：无；默认值： -；类型：string。

<15>total: 表示数据总数，根据这个总数来显示页面上面有多少页.可选值：无；默认值： 0；类型： number。

import React, { PureComponent } from 'react';
import { Pagination } from 'antd';
class demo extends PureComponent {
  onChange(currentPage:any, pageSize:any) {
    console.log('Page: ', currentPage,pageSize);
  }
  onShowSizeChange(currentPage:any, pageSize:any) {
    console.log(currentPage, pageSize);
  }
  itemRender(current:any, type:any, originalElement:any) {
    if (type === 'prev') {return <a>Previous</a>;}
    if (type === 'next') {return <a>Next</a>;}
    return originalElement;
  }
  
    render() {
    const props = {
      current: currentPage,
      pageSize: currentPageSize,
      pageSizeOptions: ['20', '40', '60', '80', '100'],
      total: totalNumber,
      showQuickJumper: true,
      showSizeChanger: true,
      showTotal: (total, range) => {
        return `当前显示从 [${range[0]}] 到 [${range[1]}] 共[${totalNumber}]条记录`;
      },
      onChange: (tableCurrentPage, tableCurrentPageSize) => {
        queryMessagePushTableInfo(tableCurrentPage, tableCurrentPageSize);
        setCurrentPage(tableCurrentPage);
      },
      onShowSizeChange: (tableCurrentPage, tableCurrentPageSize) => {
        queryMessagePushTableInfo(tableCurrentPage, tableCurrentPageSize);
        setCurrentPageSize(tableCurrentPageSize);
      },
    };
    
      return (
        <div>
        <Pagination  defaultCurrent={2} total={500} showSizeChanger showQuickJumper
        onChange={(currentPage, pageSize)=>{this.onChange(currentPage, pageSize)}}
        onShowSizeChange={(currentPage, pageSize)=>{this.onShowSizeChange(currentPage, pageSize)}}
        showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
        itemRender={this.itemRender}
        pageSizeOptions={['50', '60', '70', '80']}
        defaultPageSize={50}/>
        <Pagination size="small" total={50} simple />
        <Pagination {...props} />
        </div>
        
    );
    }
  };
export default demo;

6、PageHeader页头

页头位于页容器中，页容器顶部，起到了内容概览和引导页级操作的作用。包括由面包屑、标题、页面内容简介、页面级操作等、页面级导航组成。

何时使用：当需要使用户快速理解当前页是什么以及方便用户使用页面功能时使用，通常也可被用作页面间导航。还么看

  const pageHeaderProps = {
    title: cardTitle,
    style: {
      paddingTop: 0,
    },
    onBack: () => {
      confirmCancelModal();
    },
  };
<PageHeader {...pageHeaderProps} />

7、Steps步骤条

引导用户按照流程完成任务的导航条。

何时使用：当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。

(0)<Steps>组件对应的事件

<1>onChange事件：表示点击切换步骤时触发.可选值：无；默认值： -；类型： (current) => void

current: 表示当前的step的index值

(1)<Steps>组件对应属性: steps组件的样式是，一个圆圈节点，后面一条横线再连接一个圆圈节点

<1>className: 表示步骤条类名.可选值：无；默认值： -；类型：string。

<2>type: 表示步骤条类型.可选值：default/navigation；默认值： default；类型：string。

default,即前面一个小圆圈后面一些文字，在后面一条线

navigation,样式则要大一点

<3>current: 表示指定当前正在进行的step的index值，从 0(代表第一个step) 开始记数(不过显示在页面上的样式依然是从1开始的)。在子 Step 元素中，可以通过 status 属性覆盖状态.可选值：无；默认值： 0；类型：number。

已经完成了的步骤，步骤圆圈里面的数字会变成一个勾

<4>direction: 表示指定步骤条方向。目前支持水平（horizontal）和竖直（vertical）两种方向.可选值：无；默认值： horizontal；类型：string。

<5>labelPlacement: 表示指定标签放置位置，默认水平放图标右侧，可选 vertical 放图标下方.可选值：无；默认值： horizontal；类型：string。

<6>progressDot: 表示点状步骤条(即圆圈样式，变为了要给点)，可以设置为一个 function，labelPlacement 将强制为 vertical.可选值：无；默认值： false；类型：Boolean or (iconDot, {index, status, title, description}) => ReactNode。

<7>size: 表示指定大小，目前支持普通（default）和迷你（small）.可选值：无；默认值： default；类型：string。

<8>status: 表示指定当前current的步骤的状态，可选 wait process finish error.可选值：无；默认值： process；类型：string。

<9>initial: 表示起始序号，从 0 开始记数.可选值：无；默认值： 0；类型：number。

(2)<Steps>的子组件<Steps.Step>组件对应属性: 即，表示Steps里面的每一项。看样子Steps里面不能包含内容，只能做一个自闭合标签

<1>description: 表示步骤圆圈后面，标题下面的详情描述，可选.可选值：无；默认值： -；类型：string|ReactNode。

<2>icon: 表示自定义步骤前面的圆圈的样式，可选.可选值：无；默认值： -；类型： string|ReactNode。

<3>status: 表示当前step对应的状态。当不配置该属性时，会使用 Steps 的 current 来自动指定状态。可选值：wait process finish error；默认值： wait；类型：string。

wait: 空白状态,圆圈和后面的文字没有颜色

process：圆圈和后面的文字颜色变深

finish：圆和后面的文字圈颜色依然变深，并且圆圈后面的那个横线，颜色也会变深

error：颜色变红

<4>title: 表示步骤圆圈后面的标题.可选值：无；默认值： -；类型： string|ReactNode。

<5>subTitle: 表示子标题.可选值：无；默认值： -；类型： string|ReactNode。

<6>disabled: 表示禁用点击.可选值：无；默认值： false；类型：boolean。

import React, { PureComponent } from 'react';
import { Steps,Icon } from 'antd';
const {Step} = Steps;
class demo extends PureComponent {
  state = {current: 0,};
  onChange = current => {this.setState({ current }); };
    render() {return (<div>
<Steps onChange={this.onChange} size="small" status="finish" current={this.state.current}>
    <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
    <Step status="error" title="Waiting" description="This is a description." />
  </Steps>
  </div>);}
  };
export default demo;

二、通用、布局、导航组件

一、通用组件

1、Button按钮

2、Icon图标

3、Typography排版

二、布局组件

1、Grid栅格

2、Layout布局

三、导航组件

1、Affix固钉

2、Breadcrumb面包屑

3、Dropdown下拉菜单

4、Menu导航菜单

5、Pagination分页

6、PageHeader页头

7、Steps步骤条

猜你喜欢