组件中的使用和自定义组件 | 青训营

阿丘永远爱写代码
88 阅读1分钟

01 组件库介绍

组件库通常包含一系列可复用的UI（用户界面）元素，比如按钮、表单、菜单、图表等等。

  • 一致性
  • 效率
  • 协同 image.png ArcoDesign简介

image.png

image.png

02 组件库的使用

快速上手

image.png 包很大，影响加载怎么办？ image.png

image.png

image.png

除了可以通过 npm 安装之外，也可以直接使用 CDN 资源，不建议通过 CDN 使用，因为 CDN 会引入全量的组件代码，这样会影响页面加载速度。

Arco design快速上手 快速上手 | ArcoDesign

简单的使用教程

以 Button 组件为例，通过以下案例我们已经可以简单的获取我们想要的组件了

import React from "react";

import ReactDOM from "react-dom";

import { Button } from "@arco-design/web-react";

import "@arco-design/web-react/dist/css/arco.css";

ReactDOM.render( Hello Arco, document.querySelector("#root") );

主题定制 暗黑模式 国际化语言

主题定制--通过css进行样式覆盖

image.png 主题定制--修改Less变量

image.png 暗黑模式

image.png

image.png

image.png

image.png

image.png 国际化语言

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

快速上手Arco Pro

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

03 自定义组件

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

04 课程总结和答疑

image.png 这位姐姐讲的很好，条理清晰，赞一个！

avatar
文章
阅读
粉丝