8.10 UI组件库 🎉

助力设计开发者「更灵活」地搭建出「更美」的产品，让用户「快乐工作」～

提示

官方文档：https://ant.design/index-cn

• 安装antd

  npm install antd --save
  

• 使用antd1（拿步骤条举例：https://ant.design/components/steps-cn）

  import React from "react";
  import { Steps, DatePicker } from "antd";
  const description = "This is a description.";
  function App() {
      return (
          <div className="App">
              <p>app</p>
              <Steps
                  current={3}
                  items={[
                      {
                          title: "Finished",
                          description,
                      },
                      {
                          title: "In Progress",
                          description,
                          subTitle: "Left 00:00:08",
                      },
                      {
                          title: "Waiting",
                          description,
                      },
                  ]} />
              <DatePicker />
          </div>
      );
  }
  export default App;
  

• 使用antd2（拿表单举例：https://ant.design/components/form-cn）

  import React from "react";
  import { Button, Checkbox, Form, Input } from 'antd';
  
  const onFinish = (values: any) => {
  console.log('Success:', values);
  };
  
  const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
  };
  const App: React.FC = () => (
  <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      style={{ maxWidth: 600 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
  >
      <Form.Item
      label="Username"
      name="username"
      rules={[{ required: true, message: 'Please input your username!' }]}
      >
      <Input />
      </Form.Item>
  
      <Form.Item
      label="Password"
      name="password"
      rules={[{ required: true, message: 'Please input your password!' }]}
      >
      <Input.Password />
      </Form.Item>
  
      <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
      <Checkbox>Remember me</Checkbox>
      </Form.Item>
  
      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
      <Button type="primary" htmlType="submit">
          Submit
      </Button>
      </Form.Item>
  </Form>
  );
  export default App;
  

• 国际化

  //index.tsx
  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import App from './App';
  //antd国际化处理
  import zhCN from 'antd/locale/zh_CN';
  import { ConfigProvider } from 'antd'
  
  const root = ReactDOM.createRoot(
      document.getElementById('root') as HTMLElement
  );
  root.render(
      <React.StrictMode>
          <ConfigProvider locale={zhCN}>
              <App />
          </ConfigProvider>
      </React.StrictMode>
  );
  

  国际化完整列表参考

  https://ant.design/docs/react/i18n-cn

  ---

  ConfigProvider 用于全局配置国际化文案

  ConfigProvider 使用 React 的 context 特性，只需在应用外围包裹一次即可全局生效

• 引入重置样式(清除浏览器默认样式)

  //index.tsx
  import 'antd/dist/reset.css';
  

主题设置 💎

切换内置主题 👻

通过 ConfigProvider 设置主题

切换内置主题：默认有三个内置主题(defaultAlgorithm，darkAlgorithm， compactAlgorithm)

//index.tsx
import { ConfigProvider, theme } from 'antd'

<ConfigProvider locale={ zhCN } theme={{ algorithm:theme.darkAlgorithm }}>
    <App />
</ConfigProvider>

自定义主题 👻

//index.tsx
import { ConfigProvider } from 'antd'

<ConfigProvider locale={ zhCN } theme={{token:{ colorPrimary:"#00b96b" }}}>
  <App />
</ConfigProvider>

提示

主题变量参考:https://ant.design/docs/react/customize-theme-cn

使用 Design Token 👻

如果你希望使用当前主题下的 Design Token，我们提供了 useToken 这个 hook来获取 Design Token(让项目中的所有组件（包括自己写的）都使用这个颜色主题)

调用theme的useToken()获取当前主题下的Design Token

import React from "react";
import { DatePicker } from "antd";
import { theme } from 'antd'
function App() {
  const { token } = theme.useToken()
  return (
    <div className="App">
      <p>app</p>
      <DatePicker />
      <div style={{ color: token.colorPrimary }}>我是主题设置,拥有一样的颜色</div>
    </div>
  );
}
export default App;

支持sass & less 💎

Sass支持 👻

直接安装sass依赖就行，其他的配置官方已经为我们处理好了

npm install sass --save

Less支持 👻

• 导出配置文件。

  npm run eject
  

  提示

  拉取配置信息时，需要先把文件提交到仓库后再进行，否则无法拉取

• 安装less和less-loader

  npm install less less-loader -D
  

• 修改webpack.config.js

  // 73行之后
  const lessRegex = /\.less$/;
  const lessModuleRegex = /\.module\.less$/;
  //509-- 547行复制，到547行之后，scss改成less
  

完成以上步骤，就可以使用less了