快捷導(dǎo)航

React UI組件庫(kù)ant-design的介紹與使用

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

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

Ant Design的介紹與使用

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

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

安裝與使用

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

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

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

如果你當(dāng)初下載的antd是低版本的，需要還需要單獨(dú)引入樣式，當(dāng)然現(xiàn)在的5版本是不需要的，如下：

import 'antd/dist/antd.css'

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

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

antd為了減少代碼的負(fù)重，將有的組件樣式單獨(dú)抽離出來(lái)，如果想使用需單獨(dú)引用：

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

通過(guò)以下代碼進(jìn)行是否引入主題的介紹：

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