字节跳动出品的企业级设计系统

包含 60 多个开箱即用的高质量组件,还提供了可视化的样式配置平台,可用于快速构建企业级管理后台。字节跳动出品的企业级设计系统

特性

  • 完善的设计开发资源
  • 灵活丰富的生态平台
  • 多场景的接入案例

快速上手

安装

需要同时安装 react >= 16.8 和 react-dom >= 16.8。

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

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

通过 CDN 使用

除了可以通过 npm 安装之外,也可以直接使用 CDN 资源,提供了 umd 格式的代码产物。

开发环境: https://unpkg.com/@arco-design/web-react@latest/dist/arco.development.js
生产环境: https://unpkg.com/@arco-design/web-react@latest/dist/arco.min.js
图标: https://unpkg.com/@arco-design/web-react@latest/dist/arco-icon.min.js
样式: https://unpkg.com/@arco-design/web-react@latest/dist/css/arco.min.css

不建议通过 CDN 使用,因为 CDN 会引入全量的组件代码,这样会影响页面加载速度。

基础使用

以 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(
  <Button type="primary">Hello Arco</Button>,
  document.querySelector("#root")
);
字节跳动出品的企业级设计系统

暗黑模式

如何切换暗黑模式

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

// 设置为暗黑主题
document.body.setAttribute('arco-theme''dark');

// 恢复亮色主题
document.body.removeAttribute('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');
  }
});

调整整体背景和字体

body {
  background-color: var(--color-bg-1);
  color: var(--color-text-1);
  color-scheme: dark; // 这个属性设置后,滚动条也能表现为暗色模式
}

生态平台

风格配置平台

字节跳动出品的企业级设计系统

开箱即用的中后台前端解决方案

字节跳动出品的企业级设计系统

色彩配置从未如此简单

字节跳动出品的企业级设计系统

一站式图标管理平台

字节跳动出品的企业级设计系统

创作与管理定制化组件、区块与页面

字节跳动出品的企业级设计系统


原文始发于微信公众号(开源技术专栏):字节跳动出品的企业级设计系统

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/201354.html

(0)
小半的头像小半

相关推荐

发表回复

登录后才能评论
极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!