1.Collapse折叠面板

可以折叠/展开的内容区域。

2.何时使用

·对复杂区域进行分组和隐藏，保持页面的整洁。

·手风琴 是一种特殊的折叠面板，只允许单个内容区域展开。

组件代码来自： 分页 Pagination - Ant Design

3.本地验证前的准备

参考文章【react项目+antd组件-demo:hello-world react项目+antd组件-demo:hello-world_西晋的no1的博客-CSDN博客】，将 分页 Pagination - Ant Design 中需要在本地使用的代码复制覆盖App2.js中的全部代码，启动代码，可在本地查看现象和更改代码。

4.本地验证Collapse的简单用法。

复制下图所示代码，了解Collapse的简单用法-可同时打开多个面板，首次运行默认打开第一个。

5.感受一下size的作用

在上一步的基础上增加一个size的属性，直观感受一下

最终App2.js中的全部代码如下：

import {Pagination} from 'antd';

 

const App = () => (

    <div>

        <Pagination

            size="small"

            total={85}

            showSizeChanger

            showQuickJumper

            showTotal={(total) => `Total ${total} items`}

        />

 

        <Pagination

            size="default"

            total={85}

            showSizeChanger

            showQuickJumper

            showTotal={(total) => `Total ${total} items`}

        />

    </div>

);

export default App;

效果图如下：

6.感受一下pageSize和current的作用

在上一步的基础上，复制下述代码到第一个<Pagination … />中

pageSize={50}   // 每页条数

current={2} // 当前页数

最终App2.js中的全部代码如下：

import {Pagination} from 'antd';

const App = () => (

    <div>

        <Pagination

            size="small"

            total={85}

            pageSize={50}   // 每页条数

            current={2} // 当前页数

            showSizeChanger

            showQuickJumper

            showTotal={(total) => `Total ${total} items`}

        />

        <Pagination

            size="default"

            total={85}

            showSizeChanger

            showQuickJumper

            showTotal={(total) => `Total ${total} items`}

        />

    </div>

);

export default App;

效果图如下：

7.感受一下onChange的作用

在4的基础上增加一个

onChange={(page, pageSize) => {

            console.log(page, pageSize)

        }}

最终App2.js中的全部代码如下：

import {Pagination} from 'antd';

 

const App = () => (

    <Pagination

        total={85}

        showSizeChanger

        showQuickJumper

        showTotal={(total) => `Total ${total} items`}

        onChange={(page, pageSize) => {

            console.log(page, pageSize)

        }}

    />

);

export default App;

效果图如下：点击页数或选择每页显示多少条，可以在F12控制台里可以看到当前页码和每页显示的条数

本文仅介绍了组件Spin的部分内容，更多内容请参阅官方文档： 分页 Pagination - Ant Design