Config theme Ant Design Pro

TIL

770

henrynguyen6677 viết ngày 16/09/2020

Use theme Ant Design Pro for dev

Create app

yarn create umi myApp

 Select the boilerplate type (Use arrow keys)
❯ ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
  app             - Create project with a simple boilerplate, support typescript.
  block           - Create a umi block.
  library         - Create a library with umi.
  plugin          - Create a umi plugin.

Install and start

yarn install
yarn start

Edit source

Edit config routes in file /config/config.js

                {
                  name: 'formx',
                  icon: 'smile',
                  path: '/form/formx',
                  component: './form/formx',
                },

Add page in /src/pages a file /src/pages/form/formx/index.jsx

import React, { useState, useEffect } from 'react';const Formx = ({ current }) => {
  return (
    <div>
      <h1>This is FORMX</h1>
    </div>
  );
};
export default Formx;

Add label in file src/locales/*/menu.js

 'menu.form.formx': 'Formx',

Use dev tool via localhost:3000

Add block to a page
Add template: Create new label on menu and add page

ref: https://pro.ant.design/docs/getting-started
henrynguyen6677 16-09-2020