• React学习笔记(六):在react中使用AntD 官方文档:https://ant.design/docs/react/use-with-create-react-app-cn 基础使用 一、安装AntD,cnpm install antd --save 二、在react项目中的全局样式文件中的头部引入 ...

    React学习笔记(六):在react中使用AntD

    官方文档:https://ant.design/docs/react/use-with-create-react-app-cn

    基础使用

    一、安装AntD,cnpm install antd --save

    二、在react项目中的全局样式文件中的头部引入 AntD的css@import '~antd/dist/antd.css';

    三、看文档使用,例如使用AntD的按钮:

    1、在要使用的组件中导入按钮,import Button from 'antd/lib/button';

    2、使用按钮,<Button type="primary">Primary</Button>

    按需加载

    一、安装react-app-rewired,cnpm install react-app-rewired --save

    二、修改 package.json,把react-scripts改为react-app-rewired,如下图所示
    在这里插入图片描述
    三、在项目根目录创建一个 config-overrides.js 用于修改默认配置,在文件中使用如下配置

    module.exports = function override(config, env) {
        return config;
    };
    

    四、安装babel插件,cnpm install babel-plugin-import --save

    五、修改config-overrides.js的配置,删除原先所有配置,并添加如下配置

    const { override, fixBabelImports } = require('customize-cra');
    module.exports = override(
        fixBabelImports('import', {
            libraryName: 'antd',
            libraryDirectory: 'es',
            style: 'css',
        }),
    );
    

    六、移除前面在全局样式中添加的 @import '~antd/dist/antd.css';

    展开全文
  • 参考官方链接:https://ant.design/docs/react/use-with-create-react-app-cn ...接着就可以在js文件导入antd库并使用了 import Button from 'antd/lib/button'; 不过此时的按钮是这样的 想要和官方展示...

    参考官方链接:https://ant.design/docs/react/use-with-create-react-app-cn
    先通过 create-react-app 创建项目
    然后 npm add antd 安装并引入antd
    接着就可以在js文件中导入antd库并使用了

    import Button from 'antd/lib/button';
    

    不过此时的按钮是这样的
    在这里插入图片描述
    想要和官方展示的那样还需要在css文件中引入样式 @import '~antd/dist/antd.css';
    现在的效果就和官方的一样了:
    在这里插入图片描述

    展开全文
  • React中使用Antd组件

    2020-04-23 19:00:37
    文章目录Antd的基本使用安装和初始化简单使用Antd的高级配置Antd的自定义主题 ...在react项目进行安装yarn add antd或者npm i antd安装 简单使用 在App.js文件引入按钮并使用 注意,这里还需要引入css样式import ...

    Antd的基本使用

    进入Antd官方网站点击开始使用,然后进入在create-react-app中使用进行Antd的使用学习
    在这里插入图片描述

    安装和初始化

    在react项目中进行安装yarn add antd或者npm i antd安装

    简单使用

    在App.js文件中引入按钮并使用
    注意,这里还需要引入css样式import 'antd/dist/antd.css'

    import React, { Component } from 'react'
    import { Button } from 'antd';	//引入按钮
    import 'antd/dist/antd.css';   //还需要引入css样式
    export default class App extends Component {
      render() {
        return (
          <div>
            <Button>我是antd的按钮哦</Button>
          </div>
        )
      }
    }
    

    在这里插入图片描述

    Antd的高级配置

    目的是不用引入import 'antd/dist/antd.css'各个组件就可以拥有自己的css样式

    • 前提需要安装react-app-rewired / customize-cra
    • 需要配置package.json文件
     "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test",
        "eject": "react-scripts eject"
      }
    
    • 在项目根目录下增加一个文件config-overrides.js
      在这里插入图片描述
    • 再去安装 yarn add babel-plugin-import
    • 找到config-overrides.js文件进行配置
    const {
        addDecoratorsLegacy,
        override,
        fixBabelImports
    } = require("customize-cra");
    
    module.exports = override(
        addDecoratorsLegacy(),
        fixBabelImports('import', {
            libraryName: 'antd',
            libraryDirectory: 'es',
            style: 'css',
        })
    )
    

    现在从antd组件库里面引入组件,那么组件就拥有各自的样式了。

    import React, { Component } from 'react'
    import { Button } from 'antd';
    export default class App extends Component {
      render() {
        return (
          <div>
            <Button>我是antd的按钮哦</Button>
          </div>
        )
      }
    }
    

    在这里插入图片描述

    Antd的自定义主题

    先安装yarn add less less-loader -D
    修改了config-overrides文件

    const {
        addDecoratorsLegacy,
        override,
        fixBabelImports,
        addLessLoader
    } = require("customize-cra");
    
    module.exports = override(
        addDecoratorsLegacy(),
        fixBabelImports('import', {
            libraryName: 'antd',
            libraryDirectory: 'es',
            style: true,  //一定要把style变成true!
        }),
        addLessLoader({
            javascriptEnabled: true,
            modifyVars: { '@primary-color': '#090' },
        }),
    )
    

    在根目录下新建theme.js文件

    module.exports = {
        '@primary-color':' #090', // 全局主色
        '@link-color':' #1890ff', // 链接色
        '@success-color':' #52c41a', // 成功色
        '@warning-color':' #faad14', // 警告色
        '@error-color':' #f5222d', // 错误色
        '@font-size-base':' 14px', // 主字号
        '@heading-color':' rgba(0, 0, 0, 0.85)', // 标题色
        '@text-color':' rgba(0, 0, 0, 0.65)', // 主文本色
        '@text-color-secondary':' rgba(0, 0, 0, 0.45)', // 次文本色
        '@disabled-color':' rgba(0, 0, 0, 0.25)', // 失效色
        '@border-radius-base':' 4px', // 组件/浮层圆角
        '@border-color-base':' #d9d9d9', // 边框色
        '@box-shadow-base':' 0 2px 8px rgba(0, 0, 0, 0.15)', // 浮层阴影
    }
    

    config-overrides文件中引入`theme.js文件

    import modifyVars from "./theme"
    addLessLoader({
        javascriptEnabled: true,
        modifyVars
    }),
    
    展开全文
  • 1、实现效果通过单击编辑图标实现页面对应按钮的呈现与隐藏、效果图如下2、代码实现import React, { Component } from 'react'; import '../../../style_css/antd.css'; import { Layout,Icon,Row, Col} from '...

    1、实现效果

    • 通过单击编辑图标实现页面中对应按钮的呈现与隐藏、
    • 效果图如下

    2、代码实现

    import React, { Component } from 'react';
    import '../../../style_css/antd.css';
    import { Layout,Icon,Row, Col} from 'antd';
    class Index extends Component {
        // 状态机
        constructor(props, context) {
            super(props, context);
            this.state = {
                display_name: 'none', //此状态机为display的取值
            }
        }
        display_name() { //编辑按钮的单击事件,修改状态机display_name的取值
            if (this.state.display_name == 'none') {
                this.setState({
                    display_name: 'block',
                })
            }
            else if (this.state.display_name == 'block') {
                this.setState({
                    display_name: 'none',
                })
    
            }
        }
        render() {
            return (
                <Layout>
                    {/* 一行:按钮 */}
                    <div style={{ background: '#fff', paddingTop: '20px', display: this.state.display_name }}>    {/* 通过状态机display_name获取diaplay取值 */}
                        <Row>
                            <Col span={12}>
                            </Col>
                            <Col span={12}>
                                <div style={{ float: 'right' }}>
                                    <span style={{ paddingLeft: '5px' }}><Button style={buttoncolor} size="large">详情</Button> </span>
                                    <span style={{ paddingLeft: '5px' }}><Button style={buttoncolor} size="large">添加</Button></span>
                                    <span style={{ paddingLeft: '5px' }}><Button style={buttoncolor} size="large">修改</Button></span>
                                    <span style={{ paddingLeft: '5px' }}><Button style={buttoncolor} size="large" >删除</Button></span>
                                    <span style={{ paddingLeft: '5px', paddingRight: '10px' }}><Button style={buttoncolor} size="large">查看关联</Button></span>
                                </div>
                            </Col>
                        </Row>
                    </div>
                    {/* 通过icon实现编辑图标 */}
                    <div style={{ background: '#fff', paddingTop: '10px' }}>
                        <Row>
                            <Col span={23}>
                            </Col>
                            <Col span={1} onClick={this.display_name.bind(this)}> {/* 通过display_name函数来改变状态机display_name的值来改变display取值 */}
                                <Icon type='edit' style={{ fontSize: '30px' }} />
                            </Col>
                        </Row>
                    </div>
                    {/* 页面内容 */}
                    <Layout style={{ padding: '10px 0', background: '#fff' }}>
                        <Content style={{ padding: '0 24px', minHeight: 280 }}>
                            {this.props.children}
                        </Content>
                    </Layout>
                </Layout>
            );
        }
    }
    export default Index;

    • display属性可以控制内容的呈现与隐藏,none表示隐藏,block表示呈现
    • 第一步:利用状态机设置display_name
    • 第二步:控件按钮放在div中进行呈现,div内容的呈现与否通过display实现,display具体取值取状态机中的display_name
    • 第三步:给编辑图标添加单击事件:修改状态机display_name的取值,状态机一旦改变页面便会立即加载,即控制按钮的呈现与小时

    3、通过栅格化实现类似效果,详情见:

    http://blog.csdn.net/zrcj0706/article/details/79061942



    展开全文
  • 说明之前为了熟练antd框架,特别做了这个后台管理系统练手。 正因为要熟悉,所以在设计面板的时候,尽可能想用上更多的控件。 于是对照着antd的API,开始往这个项目上堆控件。效果图!Components General Button...

    说明

    之前为了熟练antd框架,特别做了这个后台管理系统练手。
    正因为要熟悉,所以在设计面板的时候,尽可能想用上更多的控件。
    于是对照着antd的API,开始往这个项目上堆控件。

    效果图

    login.gif

    main.gif

    date.gif

    add.gif

    update.gif

    del.gif

    search.gif

    echarts.gif

    richText.png

    upload.png

    快速开始

    1.克隆项目

    git clone git@github.com:zhaoyu69/antd-spa.git
    

    2.安装客户端依赖

    cd client
    npm i
    

    3.运行客户端

    npm run start
    

    4.安装服务端依赖

    cd ../server
    npm i 
    

    5.运行服务端

    npm run start 
    

    结尾

    页面不复杂,没有使用状态管理。
    使用React本身的State更新,也很好理解。
    练练手熟悉熟悉框架还是不错的。

    源码

    Github.

    展开全文
  • Deidei☀️关于react项目解决antd Table展开行可全部展开或关闭文章见 antd Table 展开行可全部展开或关闭 需求如图,在表头添加一个按钮,控制子表全部展开或关闭。 先看看antd Table官方文档对展开行的处理 ...
  • React+Antd+Axios学习总结

    2019-09-11 09:56:07
    一. 一些基本概念 关于Node。 Node.js 是一个JavaScript 的运行环境,可以让JavaScript运行在服务端。 Node让JS也可以写网站后台程序,可以搭建WEB服务器...React默认把ES6做为首选标准,其写法可能同以往不太一样。...
  • react-antd html5开发

    2020-06-04 23:30:47
    react, antd, html5本地化开发,包含:antd组件使用,antdtable分页,对话框,弹出框,按钮事件使用,方法参数绑定。
  • 这章我们来讲怎么配置reactreact-router。 react 首先我们要下载react相关的插件,在控制台执行: yarn add react react-dom -D 然后去webpack.config.js里: { test:/\.(js|jsx)$/,//在这里添加一个jsx ...
  • npm install antd //实现组件的按需加载,安装依赖模块 npm install react-app-rewired customize-cra babel-plugin-import 定义加载配置的js模块:config-overrides.js const { override, fixBabelImports } = ...
  • react+antd使用react-html-table-to-excel实现导出功能 npm下载依赖包 基于reactreact-dom npm install --save react-html-table-to-excel 使用 import React, {PureComponent} from 'react'; import ReactDOM ...
  • 使用"create-react-app": "^3.0.1"创建的app,主要依赖: "antd": "^3.19.1", "axios": "^0.18.0", "react": "^16.8.6", "react-app-polyfill": "^1.0.1", "react-dev-utils": "^9.0.1", "react-dom": ...
  • 最近的新项目准备使用React,找组件库的时候发现有antdreact-bootstrap等,想找一个antd的helloworld的demo,但偌大的网络硬是没有找到,最好类比react-bootstrap写了一个antd的demo。等分享给大家,不用再费心...
  • 先上图: ... ... 一、表单的校验 ...思路:其实就是搞一个标记区分点击了哪个按钮,我这边的这个界面实现用了两个组件,界面展示的父组件和校验输入的子组件,有个问题是父组件如果用点击按钮后...
  • 以及引入antd 项目代码地址react-project 优化webpack 生成的文件名添加Hash值 output: { filename: "js/[name].[chunkhash].js", }, 生产过程,清理dist文件夹。安装插件 clean-webpack-plugin npm ...
  • 记录一下最近项目所用到的技术React + Dva + Antd + umi ,以免忘记。之前没有用过它们其中一个,也是慢慢摸索,了解数据整个流程。 先了解下概念 React 不多说,3大框架之一; Dva 是由阿里架构师 sorrycc 带领 ...
  • 这里写自定义目录标题欢迎使用Markdown编辑器效果图功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居...
  • github地址 https://github.com/ant-design/antd-mobile-samples/tree/master/create-react-native-app 文档地址: ... 集成 1. 安装antd-mobile-rn 库npm install antd-...
  • 前言 在重构的路上,总能写点什么东西出来 ...用到的react 16.6特性 lazy, Suspense来实现子组件的懒加载 memo让函数式组件有PureComponent的特性(浅比较) flexbox来布局 效果图 代码实现 in...
  • 初学者使用react+antd实现表格+弹窗 github地址: https://github.com/YepFury/react-table-demo 趁着项目间歇,试着写了一下未接触的react,找了一下资料,决定使用ant-design组件库,因为基本是完全的react新手,...
1 2 3 4 5 ... 20
收藏数 1,930
精华内容 772