脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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事件绑定时。this并不会指向当前DOM元素。往往使用bind来改变this指向，今天通过本文给大家介绍React事件绑定的方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2022-12-12
  • React组件之多选Checkbox实例

    React组件之多选Checkbox实例

    这篇文章主要介绍了React组件之多选Checkbox实例,具有很好的参考价值,希望对大家有所帮助,
    2023-10-10
  • React从插槽、路由、redux的详细过程

    React从插槽、路由、redux的详细过程

    React需要自己开发支持插槽功能，原理：父组件组件中写入的HTML，可以传入子组件的props中，这篇文章主要介绍了React从插槽、路由、redux的详细过程,需要的朋友可以参考下
    2022-10-10
  • React key值的作用和使用详解

    React key值的作用和使用详解

    这篇文章主要介绍了React key值的作用和使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • React组件传children的方案总结

    React组件传children的方案总结

    自定义组件的时候往往需要传 children,由于写法比较多样,我就总结了一下,文中有详细的总结内容和代码示例,具有一定的参考价值,需要的朋友可以参考下
    2023-10-10
  • React创建组件的的方式汇总

    React创建组件的的方式汇总

    React 是一个用于构建用户界面的 JAVASCRIPT 库。这篇文章主要介绍了React组件的两种创建方式,一种是使用函数创建组件另一种是使用类创建组件，需要的朋友可以参考下
    2021-11-11
  • React声明组件的方法总结

    React声明组件的方法总结

    这篇文章主要给大家介绍了react声明组件有哪几种方法,各有什么不同,文章通过代码示例介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-11-11
  • React useCallback钩子的作用方法demo

    React useCallback钩子的作用方法demo

    这篇文章主要为大家介绍了React useCallback钩子的作用方法demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • React的Props、生命周期详解

    React的Props、生命周期详解

    “Props” 是 React 中用于传递数据给组件的一种机制,通常作为组件的参数进行传递,在 React 中,props 是只读的,意味着一旦将数据传递给组件的 props,组件就不能直接修改这些 props 的值,这篇文章主要介绍了React的Props、生命周期,需要的朋友可以参考下
    2024-06-06
  • 基于React的状态管理实现一个简单的颜色转换器

    基于React的状态管理实现一个简单的颜色转换器

    这篇文章主要介绍了用React的状态管理,简简单单实现一个颜色转换器,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下
    2023-08-08

最新评论