组件库的使用和自定义组件

news2024/10/7 2:31:55

目录

一、组件库介绍

1、什么是组件

2、组件库介绍

3、arco.design

二、组件库的使用

1、快速上手

2、主题定制

3、暗黑模式

4、语言国际化

5、业务常见问题

三、自定义组件

2、组件开发规范

3、示例实践guide-tip

4、业务组件快速托管

一、组件库介绍

1、什么是组件

（1）工业：具有标准接口和某种功能且可复用的标准零部件

（2）软件开发：封装好的可复用的程序“零部件”，像搭积木一样把不同功能的组件搭起来

（3）前端开发：UI组件，“按钮”、“输入框”、“下拉选择”都是组件，组件和组件组合就变成了一个更复杂的组件

2、组件库介绍

（1）组件库：就是一系列U组件的合集

（2）核心：其包含的每一个组件，都遵循同一套体系来实现的

（3）意义：提高统一的标准化规范
①一致性 ②效率 ③协同

3、arco.design

（1）认识
①生态平台：
主题配置平台：组件库的风格配置
物料市场：物料开发，在线托管
图标平台：图标资源的托管
设计资源库：插画、落地页、LOGO等设计资源
②资源+工具
③设计系统基础

（2）构建基于
①产出效率提升
②效率提升
③发效率提升

二、组件库的使用

有一个运营平台的项目,那么如何快速搭建起来？

1、快速上手

（1）安装
需要同时安装 react >= 16.8 和 react-dom >= 16.8

// npm
npm i @arco-design/web-react

// yarn
yarn add @arco-design/web-react

（2）基础使用：按钮的引入使用

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(
  <Button type="primary">Hello Arco</Button>,
  document.querySelector("#root")
);

（3）整个组件库都被打包到了js文件里面
占用空间，如何解决？
①按需加载：插件babel-plugin-import

npm i babel-plugin-import -D

②添加配置：在babel 配置中加入

plugins: [
  [
    'babel-plugin-import',
    {
      libraryName: '@arco-design/web-react',
      libraryDirectory: 'es',
      camel2DashComponentName: false,
      style: true, // 样式按需加载
    },
  ],
];

有效将体积降低96%，即3.12 MB =>123 KB

③解析：该插件帮我们将按钮例子的代码编译为按需引入的形式，能使未被使用的代码不被引入

（4）通过 CDN 使用

①开发环境: unpkg.com/@arco-desig…
②生产环境: unpkg.com/@arco-desig…
③图标: unpkg.com/@arco-desig…
典型示例：CodePen，大多数组件库都会支持通过它打开示例代码

2、主题定制

（1）通过CSS进行样式覆盖

body {
    --primary-1: 255,236,232;
    --primary-2: 240,193,185;
    --primary-3: 225,151,143;
    --primary-4: 211,112,105;
    --primary-5: 196,74,70;
    --primary-6: 181,40,40;
    --primary-7: 155,26,30;
    --primary-8: 129,14,22;
    --primary-9: 103,6,15;
    --primary-10: 77,0,10;

}

body[arco-theme="dark"] {
    --primary-1: 77,0,10;
    --primary-2: 103,5,14;
    --primary-3: 129,17,25;
    --primary-4: 155,33,36;
    --primary-5: 181,53,53;
    --primary-6: 196,77,73;
    --primary-7: 211,115,108;
    --primary-8: 225,154,146;
    --primary-9: 240,197,190;
    --primary-10: 255, 240,237;
}

（2）修改Less变量
①在less文件里修改

@import '@arco-design/web-react/dist/css/index.less ';
@arcoblue-6: #b52828;

②在webpack.config.js或者在 Webpack 打包的时候，通过 less-loader 的modifyVars对所有的变量进行替换

module.exports = {
  rules: [{
    test: /.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader',
    }, {
      loader: 'less-loader',
     options: {
       modifyVars: {  // 在less-loader@6 modifyVars 配置被移到 lessOptions 中
         'arcoblue-6': '#f85959',
       },
       javascriptEnabled: true
     },
    }],
    ...
  }],
  ...
}

（3）组件定制
①例如：Button要带有投影效果，Input面性=>线性
②利用Arco Pro内置好的组件库，快速上手操作如下
官网icon-default.png?t=N6B9https://link.juejin.cn/?target=https%3A%2F%2Farco.design%2Fdocs%2Fpro%2Fstart

预装环境
> npm i -g arco-cli
项目初始化
>arco init hello-arco-pro
项目开发
> cd hello-arco-pro
> yarn dev

③也可以通过DesignLab解决

3、暗黑模式

（1）组件库通过 body 标签上的 arco-theme 属性来标明当前的主题，只要修改这个属性，即可完成主题的切换

const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)");

darkThemeMq.addListener(e => {
 if (e.matches) {
 // 设置为暗黑主题
   document.body.setAttribute('arco-theme', 'dark');
 } else {
 // 恢复亮色主题
    document.body.removeAttribute('arco-theme');
  }
});

(2)局部应用暗色模式
①核心思路:本质上是控制暗色颜色变量的挂载位置,提高我们所需要的颜色变量的优先级
②控制暗色变量挂载到应用了暗黑样式的局部区域，对应的DOM标签上，实现该DOM下所有内容呈现暗色模式

4、语言国际化

（1）直接通过ConfgProvider组件传入不同语言文件去修改Locale

import { ConfigProvider } from '@arco-design/web-react';
import enUS from '@arco-design/web-react/es/locale/en-US';
import XXXLocale from '@arco-design/web-react/es/locale/xxx';

export function App( ) {
    return (
        <ConfigProvider locale={{ something ? enUS : XXXLocale }}>
            {
                // ...
            }
        </ConfigProvider>
    );
}

（2）语言未支持
①模仿官方的语言文件格式，自定义语言文件
②当语言需求不支持时，可向组件库维护人员提需求，等官方维护者将语言安排上

（3）RTL 视图
①元素方向RTL：CSS属性direction: rtl;(用来设置文本和其他元素的默认方向是从右到左)
②布局RTL

margin-left => margin-right
position: right =>position: left

③交互行为RTL
Slider组件：向左拖动数值变小=>向右拖动数值变小
④其他处理
左还是左，右还是右：Notification设置为right弹出时，无论在 RTL还是LTR，都是出现在右上角
Arco 组件库 RTL 从 0 到 1icon-default.png?t=N6B9https://link.juejin.cn?target=https%3A%2F%2Fmp.weixin.qq.com%2Fs%2FKyYV0dodxynoR6osXsNkFQ（4）ConfigProvider全局配置组件默认属性
①修改组件默认的属性值，从而改变组件的默认表现
②通过ConfigProvider 的 componentConfg 属性，传入定义好的配置文件，组件配置将会对ConfgPorvider 组件所包裹的所有组件生效
③ConfigProvider:是一个内置组件，利用React Context ，为所有组件提供统一的全局配置

5、业务常见问题

①旧项目迁移：Codemod代码迁移工具
②如何获取OnCall支持
③更新日志，发版周期
④如何参与共建
可以通过用户群、Github issue、官方文档站查阅资料

三、自定义组件

1、业务组件库搭建
（1）架构设计
①单包架构：一个代码仓库里所有组件打包成一个整体，发布出去一个npm包
使用方式：从一个包名里面引用了多个组件，去进行组合使用

import { From, Input, Button, Checkbox } from '@arco-design/web-react';

优点:

  • 公共代码易复用
  • 展示更聚合，便于维护
  • 引入一个包即可使用全部组件

缺点:

  • 修改一个组件需要更新整个库
  • 需要考虑按需加载

②多包架构：一个代码仓库包含多个组件代码，会发布出去多个npm包
使用方式：组合使用多个组件的话，就必须从多个NPM包引入组件

import SelectWithCheckAll from '@arco-materials/select-with-check-all';
import ProRadio from '@arco-materails/pro-radio';

优点:

  • 单独发包，升级灵活。
  • 在同一仓库下，便于代码管理
  • 使用者无需考虑按需加载

缺点:

  • 组件间相互依赖时，需要通过npm 包引入
  • 组合使用时需要安装每一个用到的npm包

（2）技术方案
①开发环境

  • 打包速度
  • 实时预览，如storybook

②样式方案

  • 样式方案:Less / Sass，css in Js，cSS等
  • 组件库换肤，样式定制等能力

③产物构建

  • 建工具webpack , rollup，vite , gulp 等
  • 产物格式:cjs , umd , es

④质量保障

  • 测试工具: jest ,karma，mocha, enzyme,react-testing-library 等
  • 测试类型:单元测试，快照测试，截屏测试，e2e测试等

（3）对外文档
①文档部署

  • Demo展示:Storybook，umijs 等
  • 静态内容:markdown

②组件API生成

  • 手写
  • 自动提取:ts-docuemnt等

③版本日志

  • 手写
  • 自动提取:从PR提交记录自动提取@arco-design/changelog

2、组件开发规范

（1）项目组织
①语义化命名
组件的命名应当具有语义，并且避免与基础组件冲突。同一团队/仓库下的业务组件，也可采用相同的命名前缀。

//Bad Case
function SelectV2(){}

//Good Case
function SelectWithCheckAll(){}

②包名和组件名一致
NPM包名应当尽量与组件名保持一致，包含明确的使用场景信息。

//Bad Case
select-v2
arco-materails

//Good Case
select-with-check-all
example-platform-materials-react

③单独维护类型文件
推荐将需要对外导出的TS类型维护在单独的interface.ts 中，并将其在index.ts 中导出

//Bad Case
//index.tsx
export interface
ButtonProps {
    //...
}
export default function
Button() {}

//Good Case
//interface.ts
export interface ButtonProps {
    //...
}

//index.tsx
import type { ButtonProps } from './interface.ts';
export default function Button() {}
export type { ButtonProps };

（2）组件设计
①接口定义
在为组件定义接口类型时，应继承原生DOM(或基础组件)属性，避免属性遗漏或重复声明。

//Bad Case
interface InputProps {}
interface SelectWithCheckAllProps {}
//Good Case
interface InputProps
extends InputHTMLAttributes<HTMLInputElement> {}
import { SelectProps } from '@arco-design/web-react';
interface SelectWithCheckAllProps extends SelectProps {}

②类名前缀统一
组件使用特殊且统一的类名前缀，尽量降低与用户类名冲突的可能性。

//Bad Case
function Button( ) {
    return <button className="button-circle"/>;
}
//Good Case
const prefixCls = 'p-matirial';
function Button() {
    return <button className={`${prefixCls}-button-circle`} />;
}

③避免行内样式和cSS Modules
确保外部可通过类名进行样式覆盖。

//Bad Case
function Button() {
    return <button style={{ padding: 10 }} />;
}
//Good Case
function Button() {
    return <button className="am-button" />;
}
@am-button-prefix-cls: ~'am-button ';
.@{am-button-prefix-cls} {
    padding: 10px;
}

④避免在JS中直接引入样式文件
应尽量保证逻辑与样式的分离，确保用户可以分别引入JS和CSS文件，避免由于构建环境的不同导致的用户编译失败的问题。

//Bad Case
import './style/index.less';
function Button() {}
//Good Case
//Pure JS
function Button() {}

⑤注意组件样式的按需加载
在基于基础组件库如Arco进行业务组件的逻辑封装时，应注意按需引入所依赖的Arco基础组件的样式文件

//Bad Case
//select-with-check-all/style/index.js

//组件自身的样式文件
import './index.less';

//Good Case
//select-with-check-all/style/index.js
//SelectWithCheckAll组件依赖了arco的Select组件
import '@arco-design/web-react/es/Select/style/index.js'
import './index.less';

3、示例实践guide-tip

（1）功能要点
①控制引导气泡的出现
②点击下一步/上一步时切换气泡卡片的内容
③气泡卡片的位置跟随变动
④在最后一步时，显示完成按钮

（2）思路
①通过是否显示引导气泡，控制气泡显示/隐藏
②通过每个步骤的显示内容和指向的dom元素，控制气泡显示的内容

（3）API定义

/**
* @title GuideTip
*/
export interface GuideTipProps {
    /**
    * @zh是否显示引导气泡
    */
    visible?: boolean;
    /**
    *@zh引导步骤
    */
    steps?: {
        title?: ReactNode;
        content?: ReactNode;
        target: ()=>HTMLElement
    }[];
    /**
    *@zh完成时的回调
    */
    onEnd?: () => void;
}

(4)核心逻辑
①显示弹出层：Arco Popover 组件
②步骤切换：状态变量 current 记录当前处于哪一步骤
③弹出层始终指向对应的 Button：实时获取目标节点的位置，更新弹出层指向。

const GuideTip = (props: GuideTipProps) => {
    //使用自定义的类名前缀
    const prefixcls = "m-guide-tip";
    const { steps, visible } = props;
    //标识当前展示的气泡内容索引
    const [currentIndex, setCurrentIndex] = useState(-1);
    const current = steps[currentIndexl;
    //通过一定方式计算出 target 的位置，并应用在占位元素上，从而让弹出层能准确指向 target
    const targetStyle = useMemo(() => {
        if (!visible) {
            return;
        )
        const target = steps[currentIndex]?.target?.();
        if (target) {
            const { width，height,left,top } = target.getBoundingClientRect();
            return { width,height,left, top };
        }
    },[currentIndex,visible]);
    useEffect(() => {
        if (!visible) {
        setCurrentIndex(-1);
        }else {
        setCurrentIndex(0);
    ,[visible]);
    
    return {
        <Popover
            popupVisible={visible}-
            }
        >
            <div className={`${prefixCls}-target`} style={targetStyle} />
        </Popover>
    };
}

4、业务组件快速托管

Arco CLl＋物料平台：供标准的业务模块开发方案的脚手架工具承载通用业务模块展示的在线平台

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/916249.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

allegro输出.IPC文件

allegro输出.IPC文件

1、ipc文件的导出 板厂会使用cam软件生产一个网表文件&#xff1b;如果传递给板厂的数据中也有一个IPC文件&#xff0c;板厂将对两个网表文件进行对比&#xff1b;提高生产的安全性&#xff0c;准确性&#xff1b; 1&#xff0c;PCB软件输出的光绘文件&#xff0c;有时会变异&a…
阅读更多...
从LeakCanary看如何生成内存快照

从LeakCanary看如何生成内存快照

前面我们已经完成了生命周期监控并且可以通过ReferenceQueue和WeakHashMap的比较确定哪些对象发生泄漏了&#xff0c;那么接下来需要考虑的就是如何确定这个对象是被谁持有导致泄漏的呢&#xff1f; 从内存泄漏一文中可知&#xff0c;当我们使用Android Studio或MAT分析内存泄…
阅读更多...
【从零学习python 】75. TCP协议：可靠的面向连接的传输层通信协议

【从零学习python 】75. TCP协议：可靠的面向连接的传输层通信协议

文章目录 TCP协议TCP通信的三个步骤TCP特点TCP与UDP的区别TCP通信模型进阶案例 TCP协议 TCP协议&#xff0c;传输控制协议&#xff08;英语&#xff1a;Transmission Control Protocol&#xff0c;缩写为 TCP&#xff09;是一种面向连接的、可靠的、基于字节流的传输层通信协议…
阅读更多...
java八股文面试[数据结构]——List和Set的区别

java八股文面试[数据结构]——List和Set的区别

List和Set是用来存放集合的接口&#xff0c;并且二者都继承自接接口Collection List 中的元素存放是有序的&#xff0c;可以存放重复的元素&#xff0c;检索效率较高&#xff0c;插入删除效率较低。 Set 没有存放顺序不能存放重复元素检索效率较低&#xff0c;插入删除效率较…
阅读更多...
【前端】深入理解CSS盒子模型与浮动

【前端】深入理解CSS盒子模型与浮动

目录 一、前言二、盒子模型1、盒子模型组成1.1、border边框1.1.1、边框的三部分组成1.1.2、边框复合简写1.1.3、边框分开写1.1.4、表格的细线边框 1.2、padding内边距1.3、margin外边距1.3.1、外边距水平居中1.3.2、外边距合并1.3.3、嵌套块元素垂直 外边距的塌陷1.3.3.1、解决…
阅读更多...
全流程R语言Meta分析核心技术应用

全流程R语言Meta分析核心技术应用

Meta分析是针对某一科研问题&#xff0c;根据明确的搜索策略、选择筛选文献标准、采用严格的评价方法&#xff0c;对来源不同的研究成果进行收集、合并及定量统计分析的方法&#xff0c;最早出现于“循证医学”&#xff0c;现已广泛应用于农林生态&#xff0c;资源环境等方面。…
阅读更多...
LMLCCS_UPDATEFO2 LCL DB 方法 get_normvector 头寸 A 中RC 1 内部错误，过账时报错＜转载＞

LMLCCS_UPDATEFO2 LCL DB 方法 get_normvector 头寸 A 中RC 1 内部错误，过账时报错＜转载＞

原文链接&#xff1a;https://blog.csdn.net/XFYBB/article/details/129174579 物料的成本中心&#xff0c;作业价格没有维护 再用FCMLHELP&#xff0c;重新创建一下 se37&#xff0c;FCMLHELP_CHECK_TESTFLAG&#xff0c;打断点&#xff0c;跳过PW
阅读更多...
外围信息收集

外围信息收集

一、查询域名信息 1、安装whois sudo apt update sudo apt install whois2、使用 whois [域名]也可以通过在线网站进行查询网站 3、反查 4、网站在线查询 4.1、网站一 通过使用网站去查询&#xff1a;网址 &#xff0c;这个网站只会记录他所知道的域名&#xff0c;不全 4.…
阅读更多...
网络综合布线实训室方案（2023版）

网络综合布线实训室方案（2023版）

综合布线实训室概述 随着智慧城市的蓬勃发展,人工智能、物联网、云计算、大数据等新兴行业也随之崛起,网络布线系统作为现代智慧城市、智慧社区、智能建筑、智能家居、智能工厂和现代服务业的基础设施和神经网络,发挥着重要作用。实践表明,网络系统故障的70%发生在布线系统,直接…
阅读更多...
centos7 忘记密码需要重置密码

centos7 忘记密码需要重置密码

第一步进入系统加载条之前 按 e 键 第二步到了这个界面 找到 linux16 开头的 将 ro 改成 rw init/sysroot/bin/sh 修改完之后 按下按键 ctrlx 或者是 F10 第三步输入 命令 chroot /sysroot第四步 重置root用户密码 这里重置密码是叫你输入两遍密码 passwd root第五步 更…
阅读更多...
常量变量习题答案

常量变量习题答案

基础题目: 第一题 按步骤编写代码&#xff0c;效果如图所示&#xff1a; 编写步骤&#xff1a; 定义类 Test1定义 main方法控制台输出5行字符串类型常量值控制台输出5行字符类型常量值 参考答案&#xff1a; public class Test1 {public static void main(String[] args) {/…
阅读更多...
【负载均衡】Nacos简单入门

【负载均衡】Nacos简单入门

Nacos简单入门 快速安装 在Nacos的GitHub页面&#xff0c;提供有下载链接&#xff0c;可以下载编译好的Nacos服务端或者源代码&#xff1a; 下载完压缩包之后&#xff0c;放在任意目录下面进行解压&#xff1a; GitHub主页&#xff1a;https://github.com/alibaba/nacos G…
阅读更多...
Java日志框架概览

Java日志框架概览

SLF4J 提供统一的日志门面API&#xff0c;即图中紫色部分&#xff0c;实现中立的日志记录API 桥接功能&#xff0c;蓝色部分&#xff0c;把各种日志框架API&#xff08;绿色部分&#xff09;桥接到SLF4J API。这样即便你的程序中使用各种日志API记录日志&#xff0c;最终都可桥…
阅读更多...
伊斯特曼E1D和VEAZEN费森S88这两款全单吉他怎么样？优缺点综合对比评测，哪一款更出众？

伊斯特曼E1D和VEAZEN费森S88这两款全单吉他怎么样？优缺点综合对比评测，哪一款更出众？

3000-4000元价位预算有什么适合初学或者进阶换琴的吉他品牌推荐&#xff1f;VEAZEN费森S88系列和Eastman伊斯特曼E1D系列一直也是深受初学者和进阶者喜欢的热销全单吉他型号&#xff0c;那么&#xff0c;今天就以它们为本期的评测主角&#xff0c;从五个方面深度剖析介绍和对比…
阅读更多...
计算机网络第3章（数据链路层）

计算机网络第3章（数据链路层）

计算机网络第3章&#xff08;数据链路层&#xff09; 3.1 数据链路层概述3.1.1 概述3.1.2 数据链路层使用的信道3.1.3 三个重要问题 3.2 封装成帧3.2.1 介绍3.2.2 透明传输3.2.3 总结 3.3 差错检测3.3.1 介绍3.3.2 奇偶校验3.3.3 循环冗余校验CRC(Cyclic Redundancy Check)3.3.…
阅读更多...
EasyExcel+POI制作带有有效性校验及下拉联动的Excel模板

EasyExcel+POI制作带有有效性校验及下拉联动的Excel模板

文章目录 1.背景2.实现功能的Excel特性2.1.特性介绍2.2.下拉框联动2.3.单元格自动匹配Id2.4.错误提示 3.代码实现3.1.基础流程代码3.2.名称管理器配置3.3.有效性配置3.4.函数填充3.5.其他补充 4.总结 1.背景 最近在做一个CRM系统的人员销售目标导入的相关需求&#xff0c;需要…
阅读更多...
壁仞科技与百度飞桨完成II级兼容性测试

壁仞科技与百度飞桨完成II级兼容性测试

近日&#xff0c;壁仞科技BR104通用GPU与百度飞桨已完成II级兼容性测试。测试结果显示&#xff0c;双方兼容性表现良好&#xff0c;整体运行稳定。这是壁仞科技加入飞桨“硬件生态共创计划”后的阶段性成果。产品兼容性证明本次II级兼容性测试完成了涵盖自然语言处理、计算机视…
阅读更多...
FFmpeg解码32k大分辨率出现如下错误：Picture size 32768x32768 is invalid

FFmpeg解码32k大分辨率出现如下错误：Picture size 32768x32768 is invalid

最近找到一张32k的jpeg图片&#xff0c;尝试用ffmpeg来进行解码&#xff0c;命令如下&#xff1a; ffmpeg -i enflame_32768-32768-420.jpg 32.yuv结果出现Picture size 32768x32768 is invalid的错误&#xff1a;
阅读更多...
【C++】用Windows API在控制台实现选择选项

【C++】用Windows API在控制台实现选择选项

2023年8月23日&#xff0c;周三上午 今天上午花了一个小时来实现这个 这个程序在碰到边界时会发出声音&#xff0c; 通过调用Windows API的Beep函数来实现。 #include<Windows.h> #include<conio.h> #include<iostream> #include<cstdlib>const int …
阅读更多...
生信豆芽菜-EMT评分的计算

生信豆芽菜-EMT评分的计算

网址&#xff1a;http://www.sxdyc.com/gradeEmt 1、数据准备 表达谱数据&#xff0c;行为基因&#xff0c;列为样本 2、提交后&#xff0c;等待运行成功即可下载 当然&#xff0c;如果不清楚数据是什么样的&#xff0c;可以选择下载我们的示例数据&#xff0c;也可以关注…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023