Ant Design(PC端)

  • 官方文档
  • Ant Design 是一个致力于提升『用户』和『设计者』使用体验的设计语言 ；它是基于 React 实现的一套组件库。由蚂蚁金服体验技术部开发的，最早是在2015年发布的，到现在已经发布了三个大版本，目前一共封装了50多个组件。旨在统一中台项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源； 包含很多设计原则和配套的组件库。

使用步骤:

  1. 安装
npm i antd
  1. 在项目任意代码中引入和使用即可
import React, { Component } from 'react'
import { Button } from 'antd';// 引入对应的组件

export default class App extends Component {
  render() {
    return (
      <div>
        {/* 使用对应的组件 */}
        <Button type="primary" onClick={()=>{
            console.log('按钮一点击!');
        }}>点击</Button>
      </div>
    )
  }
}

结果展示:

image

Antd Mobile(移动端)

  • 官方文档

  • 与上述的PC端是基本一致的使用方法,都是在项目中安装和引入使用即可,不需要引入样式,直接引入组件即可，antd-mobile 会自动为你加载 css 样式文件

使用步骤:

  1. 安装
npm install --save antd-mobile
  1. 在项目任意代码中使用
import React, { Component } from 'react'
import { Button } from 'antd-mobile';// 引入对应的组件

export default class App extends Component {
  render() {
    return (
      <div>
        {/* 使用对应的组件 */}
        <Button color='primary' fill='solid' onClick={()=>{
            console.log('按钮一点击!');
        }}>点击</Button>
      </div>
    )
  }
}

结果展示:

image