react antd笔记

date: 2020.04.30; modification:2020.05.09

目录:

1 安装

yarn add -D antd

2 引入

import { DatePicker } from 'antd';

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
// 或:
import 'antd/es/date-picker/style/css'; // 加载 CSS

3 控件

3.1 Button

Button手册:

https://ant.design/components/button-cn/

Note: 可以使用style设置样式(包括fontSize, color).

引入:

import { Button } from 'antd';

通过设置 Button 的属性来产生不同的按钮样式,
推荐顺序为: type -> shape -> size -> loading -> disabled.

Button类型:

主按钮:
<Button type="primary">Primary</Button>
<Button>Default</Button>
虚线按钮:
<Button type="dashed">Dashed</Button>
危险按钮(默认红色):
<Button type="danger">Danger</Button>
形如链接的按钮:
<Button type="link">Link</Button>

Button形状:

// 纯原型:
<Button type="primary" shape="circle">D</Button>
// 圆角:
<Button type="primary" shape="round">Download</Button>

状态:

// Loading状态(显示loading转圈图标, 此状态不能点击):
<Button type="primary" shape="round" loading={ true }>Download</Button>
// 禁止状态(不能点击)
<Button disabled>but2</Button>

Button组:

<Button.Group>
    <Button style={ {width:100} }>bottom</Button>
    <Button style={ {width:100} }>bottom2</Button>
    <Button style={ {width:100} }>bot</Button>
</Button.Group>

适配父级宽度:

<Button type="primary" block> Primary </Button>

带图标的Button:

<Button type="primary" shape="circle" icon="search"></Button>
<Button> Actions <Icon type="down" /> </Button>

幽灵按钮:

将按钮的内容反色, 背景变为透明, 常用在有色背景上.

<Button type="primary" ghost> Primary </Button>

3.2 Icon

手册: https://ant.design/components/icon-cn/

import { Icon } from 'antd';
// 类型
<Icon type="home" />
<Icon type="loading" />
// 填充
<Icon type="setting" theme="filled" />
<Icon type="smile" theme="outlined" />
// 动态旋转
<Icon type="sync" spin />
// 静态旋转角度
<Icon type="smile" rotate={180} />
// 双色图标
<Icon type="heart" theme="twoTone" twoToneColor="#eb2f96" />

3.3 排版

用于文本显示, 编辑等. 手册: https://ant.design/components/typography-cn/

3.4 Affix 固钉

手册: https://ant.design/components/affix-cn/

<Affix offsetTop={ 10 }>
    <div> Hello world </div>    // 内部需要是dom元素不能是纯文本
</Affix>

offsetTop: 顶端固钉; offsetBottom: 底端固钉.

注意: Affix 内的元素不要使用绝对定位, 如需要绝对定位的效果, 可以直接设置 Affix 为绝对定位:

<Affix style={ {position: 'absolute', top: y, left: x} }>...</Affix>

手册: https://ant.design/components/breadcrumb-cn/

<Breadcrumb>
    <Breadcrumb.Item>Home</Breadcrumb.Item>
    <Breadcrumb.Item>
        <a href="">Application Center</a>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
        <a href="">Application List</a>
    </Breadcrumb.Item>
    <Breadcrumb.Item>An Application</Breadcrumb.Item>
</Breadcrumb>

Note:

* 可以直接对 Breadcrumb 与 Breadcrumb.Item 进行 style 属性设置.
* 使用 separator='>' 属性可以自定义分隔符。
* 使用 Breadcrumb.Separator 可以自定义各子级分隔符。(但需要先用separator=''把总的分隔符置空)
    <Breadcrumb separator="">
        <Breadcrumb.Item>Location</Breadcrumb.Item>
        <Breadcrumb.Separator>:</Breadcrumb.Separator>
        <Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
    </Breadcrumb>
* Breadcrumb.Item子级可塞入其他标签.
* 面包屑支持下拉菜单。不用塞入dropdown, 只需要塞入menu即可.
    <Breadcrumb.Item overlay={menu}>

手册: https://ant.design/components/menu-cn/

用法:

<Menu onClick={ this.handleClick } selectedKeys={ [this.state.current] } mode="inline">
    <Menu.Item key="mail"> <Icon type="mail" /> Navigation One </Menu.Item>
    <SubMenu
        title={
            <span className="submenu-title-wrapper">
                <Icon type="setting" />
                Navigation Three - Submenu
            </span>
        }
    >
        <Menu.ItemGroup title="Item 1">
            <Menu.Item key="setting:1">Option 1</Menu.Item>
            <Menu.Item key="setting:2">Option 2</Menu.Item>
        </Menu.ItemGroup>
        <Menu.ItemGroup title="Item 2">
            <Menu.Item key="setting:3">Option 3</Menu.Item>
            <Menu.Item key="setting:4">Option 4</Menu.Item>
        </Menu.ItemGroup>
    </SubMenu>
    <Menu.Item key="alipay">
        <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
            Navigation Four - Link
        </a>
    </Menu.Item>
</Menu>

Note: * 可以用mode为inline来实现垂直内嵌的菜单. * 内嵌菜单可以用openKeys={this.state.openKeys} 与 onOpenChange={this.onOpenChange} 来控制打开哪些项目.

手册: https://ant.design/components/dropdown-cn/

用法:

import { Menu, Dropdown, Icon } from 'antd';

const menu = (
    <Menu>
        <Menu.Item key='1'>
            <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/"> 1st menu item </a>
        </Menu.Item>
        <Menu.Item key='2'>
            <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/"> 2nd menu item </a>
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item key='3' disabled>
            3rd item
        </Menu.Item>
    </Menu>
);

<Dropdown overlay={ menu }>
    <a className="ant-dropdown-link" href="#"> Hover me <Icon type="down" /> </a>
</Dropdown>

Dropdown.Button

用此方式不需要自建Dropdown内部child, 并可以Dropdown本身的点击事件:

<Dropdown.Button onClick={handleButtonClick} overlay={menu}>
  Dropdown
</Dropdown.Button>

Note: * Dropdown 里要有个React组件或者dom元素作为children, 不能为空也不能为简单文本, 否则会报错. 而且需要是一个元素, 不能是多个; 如果是多个, 需要用单一标签包裹. * 样式设置: * 下拉触发条样式: style 不能加在Dropdown标签上, 而要加在其children上, 否则无效. * overlayStyle指的是下拉部分的根元素样式. 根元素相当于下拉菜单的底座. * 下拉菜单样式需要对menu进行设置.

3.8 Pagination 分页

手册: https://ant.design/components/pagination-cn/

基本用法:

<Pagination defaultCurrent={1} total={50} />

3.9 Steps 步骤条

手册: https://ant.design/components/steps-cn/

基本用法:

<Steps current={1}>
    <Step title="Finished" description="This is a description." />
    <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
    <Step title="Waiting" description="This is a description." />
</Steps>

AutoComplete自动完成

手册: https://ant.design/components/auto-complete-cn/

基本用法:

    <AutoComplete
      value={value}
      dataSource={dataSource}
      style={{ width: 200 }}
      onSelect={onSelect}
      onSearch={this.onSearch}
      onChange={this.onChange}
      placeholder="control mode"
    />

dataSource 为候选数组. onSearch 为用于触发变更候选数组的事件.

3.10 Checkbox多选框

手册: https://ant.design/components/checkbox-cn/

基本用法:

import { Checkbox } from 'antd';

function onChange(e) {
    console.log(`checked = ${e.target.checked}`);
}

ReactDOM.render(<Checkbox onChange={onChange}>Checkbox</Checkbox>, mountNode);

多选:

<CheckboxGroup options={plainOptions} value={this.state.checkedList} onChange={this.onChange} />

Note:

3.11 Cascader 级联选择

手册: https://ant.design/components/cascader-cn/

基本用法:

render() {
    const options = [
        {
            value: 'zhejiang',
            label: 'Zhejiang',
            children: [
                {
                    value: 'hangzhou',
                    label: 'Hangzhou',
                    children: [
                        {
                            value: 'xihu',
                            label: 'West Lake',
                        },
                    ],
                },
            ],
        },
        {
            value: 'jiangsu',
            label: 'Jiangsu',
            children: [
                {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                        {
                            value: 'zhonghuamen',
                            label: 'Zhong Hua Men',
                        },
                    ],
                },
            ],
        },
    ];

    function onChange(value) {
        console.log(value);
    }

    return (
        <div style={ss.box}>
            <Cascader options={ options } onChange={ onChange } placeholder="Please select" />
        </div>
    );
}

Note:

3.12 DatePicker 日期选择框

手册: https://ant.design/components/date-picker-cn/

基本用法:

import { DatePicker } from 'antd';

onChange(date, dateString) {
    console.log('DatePicker onChange',
            date.year(),
            date.month(),   // 从0开始数
            date.date(),    // 一月中的几号, 从1开始数
            date.day(),     // 星期几, 星期日为0, 星期六为6
            date.hour(),
            date.minute(),
            date.second(),
            date.week(),    // 一年中的第几周
            dateString);
}

<DatePicker onChange={ this.onChange } />
// 选择第几周
<DatePicker onChange={onChange} picker="week" />
// 选择月份
<DatePicker onChange={onChange} picker="month" />
// 选择季度
<DatePicker onChange={onChange} picker="quarter" />
// 选择年份
<DatePicker onChange={onChange} picker="year" />
// 包含时间选择
<DatePicker onChange={this.onChange} showTime />

Note:

3.13

手册:

基本用法:

Note: