快捷導(dǎo)航

React UI組件庫ant-design的介紹與使用

更新時間：2023年12月15日 11:01:02 作者：亦世凡華

Ant Design是阿里螞蟻金服團隊基于React開發(fā)的ui組件,主要用于中后臺系統(tǒng)的使用,這篇文章主要介紹了React UI組件庫ant-design的介紹與使用,需要的朋友可以參考下

Ant Design的介紹與使用

Ant Design是阿里螞蟻金服團隊基于React開發(fā)的ui組件,主要用于中后臺系統(tǒng)的使用。其官方網(wǎng)址為：官方網(wǎng)址。以下可以看到antd的特性與介紹，可以看出antd的生態(tài)已經(jīng)很完善了，可以說大部分的公司的項目都能找到使用antd的影子。

博主撰寫此文時，antd已經(jīng)更新5版本，如果是初次使用的新手可以點擊網(wǎng)站導(dǎo)航區(qū)的研發(fā)選項，了解一下里面的對antd這個組件庫的安裝以及一些進階技能的使用：

安裝與使用

安裝步驟如下，npm或yarn安裝都可以。

編譯器終端執(zhí)行命令安裝即可，完成之后，點擊網(wǎng)頁的組件選擇，然后隨便找個組件試著引用一下，如下：

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是低版本的，需要還需要單獨引入樣式，當然現(xiàn)在的5版本是不需要的，如下：

import 'antd/dist/antd.css'

如果想更改組件的樣式，可以參考每個組件下的API，里面詳細介紹了各種樣式的引用：

舉個例子，如果想使用Icon圖標，可以點擊相關(guān)組件，查看其代碼演示然后進行使用，如下：

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 的加持后，動態(tài)主題的能力也得到了加強。

通過以下代碼進行是否引入主題的介紹：

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>
    )
  }
}