网站导航
> 文档中心 > 使用ant design pro有感

使用ant design pro有感

网友: 文档中心 2022-04-01 17:49:09

目录

1.引言

2.收获

3.代码示例

3.1日期选择框

效果图：

3.2带滑轮的列表

效果图：

 3.3行列分布

 3.4选择框

效果图：

1.引言

上一周我一直在学习怎么使用ant design里面的组件。不得不说，ant design pro实在是太适合开发者了，各种组件都有，就是组件的代码“有点坑”。

2.收获

很多情况下我已经知道了自己要什么组件。比如顶部固定的导航，日期选择框，抽屉等等，但是官方给的代码并不是给开发者直接用的，要改一改，不能ctrl+c/ctrl+v实在让人觉得苦恼，所以我把我解决的部分问题总结了一下。

3.代码示例

3.1日期选择框

/*一共四部分*/import {DatePicker} from 'antd';    /p1const {RangePicker} = DatePicker;    /p2onRangePickerChange(dates: any, dateStrings: any)    /p3{    console.log('From: ', dates[0], ', to: ', dates[1]);    console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);} /*p4*/

效果图：

3.2带滑轮的列表

import {Table} from 'antd';import React from 'react';const columns1=[     {    title: '序号',    dataIndex: '序号',    key: '序号',    render: (text: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined) =>{text},     },  {    title: '对象',    dataIndex: '对象',    key: '对象',    render: (text: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined) =>{text},     },];const data1=[    { key: '1',     序号: '1',     对象: '怀旧球手', }，      { key: '2',     序号: '2',     对象: '厌旧球手', }，   /*如果左边的属性列不是汉字会报错，解决方法是放' '里面*/];
效果图：
 3.3行列分布
import {Col,Row}  from 'antd';  /*这是一行*/
/*这是一列*///有一些组件是默认换行的，想把它们放在一起（比如多个选择框），可以把它们放入同一行不同列
    /*这是换行符*/    /*这是空格符*/
 3.4选择框
import {Select} from 'antd';const {Option} = Select;onChange(value: any) {    console.log(`selected ${value}`);  }onSearch(val: any) {    console.log('search:', val);  }           option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0    }  >    明天见！    后天见！    下周见！      
效果图：

                	

                    	网络标签：                      

                

    	

		

    
相关问题