脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React  ant-design使用

React UI组件库ant-design的介绍与使用

 更新时间：2023年12月15日 11:01:02   作者：亦世凡华  
Ant Design是阿里蚂蚁金服团队基于React开发的ui组件,主要用于中后台系统的使用,这篇文章主要介绍了React UI组件库ant-design的介绍与使用,需要的朋友可以参考下

Ant Design的介绍与使用

Ant Design是阿里蚂蚁金服团队基于React开发的ui组件,主要用于中后台系统的使用。其官方网址为：官方网址 。以下可以看到antd的特性与介绍，可以看出antd的生态已经很完善了，可以说大部分的公司的项目都能找到使用antd的影子。

博主撰写此文时，antd已经更新5版本，如果是初次使用的新手可以点击网站导航区的研发选项，了解一下里面的对antd这个组件库的安装以及一些进阶技能的使用：

安装与使用

安装步骤如下，npm或yarn安装都可以。

编译器终端执行命令安装即可，完成之后，点击网页的组件选择，然后随便找个组件试着引用一下，如下：

import React, { Component } from 'react'
import { Button } from 'antd';
export default class App extends Component {
  render() {
    return (
      <div>
        <Button type="primary">Primary Button</Button>
        <Button>Default Button</Button>
        <Button type="dashed">Dashed Button</Button>
        <Button type="text">Text Button</Button>
        <Button type="link">Link Button</Button>
      </div>
    )
  }
}

如果你当初下载的antd是低版本的，需要还需要单独引入样式，当然现在的5版本是不需要的，如下：

import 'antd/dist/antd.css'

如果想更改组件的样式，可以参考每个组件下的API，里面详细介绍了各种样式的引用：

举个例子，如果想使用Icon图标，可以点击相关组件，查看其代码演示然后进行使用，如下：

antd为了减少代码的负重，将有的组件样式单独抽离出来，如果想使用需单独引用：

import React, { Component } from 'react'
import { Button } from 'antd';
import {
  HomeOutlined,
  LoadingOutlined,
  SettingFilled,
  SmileOutlined,
  SyncOutlined,
} from '@ant-design/icons';
export default class App extends Component {
  render() {
    return (
      <div>
        <Button type="primary">Primary Button</Button>
        <Button>Default Button</Button>
        <Button type="dashed">Dashed Button</Button>
        <Button type="text">Text Button</Button>
        <Button type="link">Link Button</Button>
        <HomeOutlined />
        <SettingFilled />
        <SmileOutlined />
        <SyncOutlined spin />
        <SmileOutlined rotate={180} />
        <LoadingOutlined />
      </div>
    )
  }
}

自定义主题

在 5.0 版本的 Ant Design 中，提供了一套全新的定制主题方案。不同于 4.x 版本的 less 和 CSS 变量，有了 CSS-in-JS 的加持后，动态主题的能力也得到了加强。

通过以下代码进行是否引入主题的介绍 ：

import React, { Component } from 'react'
import { Button,ConfigProvider } from 'antd';
export default class App extends Component {
  render() {
    return (
      <div>
        <ConfigProvider
          theme={{
            token: {
            colorPrimary: '#008c8c',
            },
          }}
        >
          {/* 引入主题 */}
          <Button type="primary">Primary Button</Button>
        </ConfigProvider>
        <hr />
        {/* 原主题 */}
        <Button type="primary">Primary Button</Button>
      </div>
    )
  }
}

到此这篇关于React UI组件库ant-design的介绍与使用的文章就介绍到这了,更多相关React ant-design使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React组件设计模式之组合组件应用实例分析

    React组件设计模式之组合组件应用实例分析

    这篇文章主要介绍了React组件设计模式之组合组件,结合实例形式分析了React组件设计模式中组合组件相关概念、原理、应用场景与操作注意事项,需要的朋友可以参考下
    2020-04-04
  • React 路由使用示例详解

    React 路由使用示例详解

    这篇文章主要介绍了React 路由使用,使用路由时需要为组件指定一个路由的path，最终会以path为基础，进行页面的跳转，具体使用先看个简单示例，该示例比较简单就是两个Tab页面的来回切换
    2022-05-05
  • React-Route6实现keep-alive效果

    React-Route6实现keep-alive效果

    本文主要介绍了React-Route6实现keep-alive效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧<BR>
    2022-06-06
  • react实现同页面三级跳转路由布局

    react实现同页面三级跳转路由布局

    这篇文章主要为大家详细介绍了react实现同页面三级跳转路由布局，一个路由小案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-09-09
  • 一文详解React中Hook的作用和用处

    一文详解React中Hook的作用和用处

    Hook是一种函数，它可以让你在函数组件中“挂钩”到React状态和生命周期等特性，这篇文章主要和大家介绍了React中Hook的作用和用处，希望对大家有所帮助
    2023-05-05
  • React入门教程之Hello World以及环境搭建详解

    React入门教程之Hello World以及环境搭建详解

    Facebook 为了开发一套更好更适合自己的JavaScript MVC 框架，所以产生了react。后来反响很好,所以于2013年5月开源。下面这篇文章主要给大家介绍了关于React入门教程之Hello World以及环境搭建的相关资料，需要的朋友可以参考借鉴。
    2017-07-07
  • 详解React-Native解决键盘遮挡问题（Keyboard遮挡问题）

    详解React-Native解决键盘遮挡问题（Keyboard遮挡问题）

    本篇文章主要介绍了React-Native解决键盘遮挡问题（Keyboard遮挡问题），具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 浅谈React高阶组件

    浅谈React高阶组件

    这篇文章主要介绍了浅谈React高阶组件,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • React简便获取经纬度信息的方法详解

    React简便获取经纬度信息的方法详解

    在现代的Web应用程序中,获取用户的地理位置信息是一项常见的需求,本文我们将介绍如何在React应用程序中简便地获取用户的经纬度信息,需要的可以参考下
    2023-11-11
  • React中refs的一些常见用法汇总

    React中refs的一些常见用法汇总

    Refs是一个 获取 DOM节点或React元素实例的工具,在React中Refs 提供了一种方式,允许用户访问DOM 节点或者在render方法中创建的React元素,这篇文章主要给大家介绍了关于React中refs的一些常见用法,需要的朋友可以参考下
    2021-07-07

最新评论