Ant Design Mobile introduction

Ant Design Mobile (official address: mobile.ant. Design /zh) is a Mobile terminal asset library abstractly constructed by alipay Design team based on numerous business practices of Ant Group and verification feedback from hundreds of millions of users. It is hoped that the idea in designers’ minds can be easily transformed into a natural and user-friendly design, giving users a more real and natural experience.

Ant Design Mobile

A high performance

Optimal package size and performance without configuration

Can be customized

Based on CSS variables, you have the flexibility to adjust the look and feel of your components or to create your own themes

atomization

Each component provides just the right amount of functionality for the business

smooth

Smooth gesture interaction and detailed animation help create the ultimate experience

Ant Design Mobile version updated

Ant Design Mobile5.0 was first released on February 21, 2022. According to GitHub, Ant Design Mobile5.0 is a complete redesign that brings a new Design experience and a 100% rewrite of component code implementation.

From February 21, 2022 to March 12, 2022, Ant Design Mobile released another 10 versions based on version 5.0, with Ant Design Mobile5.6.0 also released as of March 12, 2022.

Ant Design Mobile5.6.0

【 characteristics 】

  • The tabbar. Item title property now supports dynamic content generation by rendering functions
  • FloatingBubble adds a –background CSS variable
  • ActionSheet added popupClassName and popupStyle properties #4910

[Optimization] In Cascader and CascaderView, when the hierarchy is reduced, the last optional hierarchy is automatically selected

[Fix] Checkbox & Radio adjusted onClick behavior, fixed some internal element click events could not be captured by the outer layer Fixed an issue where the Modal Dialog ImageViewer ActionSheet component might not properly close the bullet layer if called close()/clear() immediately after calling show()

Can we now use Ant Design Mobile version 5.6.0 directly in our projects?

From Ant Design Mobile GitHub:

Version 5.0 has been used in many online projects of Ant, Ali and Cainiao, and has passed the test of very complex and comprehensive use scenarios. We believe that for new projects, going straight to version 5.0 now and continuing to follow up with our updates is undoubtedly the best choice.

As you can see, Ant Design Mobile5.6.0 can be used directly in project development.

Used by Ant Design Mobile

1, install,create-react-appThe scaffold

As Ant Design Mobile is a React based Mobile component library, we need to install the create-React -app scaffolding provided by React

Note: Create-react-app: NPM install create-react-app: NPM install create-react-app It is recommended that you uninstall the package using NPM uninstall-g create-react-app or YARN Global remove create-react-app to ensure that the NPX is always using the latest version.

Create-react-app installation command:

-g create-react-app create-react-app --versionCopy the code

Create-react-app was installed successfully if the create-react-app version is displayed. (Note: create-react-app was updated to 5.0.0 at 2021-12-14, so we are currently installing the latest version)

2, through thecreate-react-appCreate a project

Create-react-app creates a project using the following command:

Select NPX or NPM or yarn command to create

(1) Run the NPX command to create it

NPX create-react-app my-app # Switch to the project CD my-app # start the created project NPM startCopy the code

(2) Run the NPM command

# create project NPM init react-app my-app # switch to project CD my-app # start project NPM startCopy the code

(3) Run the yarn command to create the yarn

# create project yarn create react-app my-app # Switch to project CD my-app # start the project yarn startCopy the code

Start the created project and the browser will display something like the following:

The created directory structure looks like the following:

3. Install Ant Design Mobile5.6.0

The installation command is as follows:

NPM install --save [email protected] # or yarn add [email protected]Copy the code

Use components in Ant Design Mobile5.6.0

APP.js

Import logo from './logo.svg' import './ app.css 'import React from' React 'import {button} from 'antd-mobile' function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} < button color="primary"> </ button > </header> </div>)} export default AppCopy the code

The following figure is displayed in the browser:

Open the browser debugger and the mobile debugging tool of the browser, as shown in the picture below:

Online experience Address:

Codesandbox. IO/s/antd – mobi…

Use of other components can continue with the instructions in Ant Design Mobile.

The latest updates to Ant Design Mobile5.6.0 will be presented at the next industry advisory session on the technology of react-router6