抖音开源Semi Design产品设计系统

抖音开源Semi Design产品设计系统

原创2021-10-27 00:06·web前端进阶

今天给大家分享一个最新抖音开源的全面、易用、优质的企业级产品设计SemiDesign。

抖音开源Semi Design产品设计系统

 

semi-design 字节跳动抖音前端与UED团队推出的包含设计语言、React 组件、主题等开箱即用的中后台解决方案,帮助设计师与开发者打造高质量产品。

抖音开源Semi Design产品设计系统

 

抖音开源Semi Design产品设计系统

 

安装

# 使用 npm
npm i @douyinfe/semi-ui

# 使用 yarn
yarn add @douyinfe/semi-ui

引入使用

import React, { Component } from 'react';
import { Button, Toast } from '@douyinfe/semi-ui';

class Demo extends React.Component {
    constructor() {
        super();
    }

    render() {
        return <Button onClick={() => Toast.warning({ content: 'Semi' })}>Hello Semi</Button>;
    }
}
抖音开源Semi Design产品设计系统

 

抖音开源Semi Design产品设计系统

 

抖音开源Semi Design产品设计系统

 

抖音开源Semi Design产品设计系统

 

抖音开源Semi Design产品设计系统

 

抖音开源Semi Design产品设计系统

 

抖音开源Semi Design产品设计系统

 

拥有超过40+组件,非常不错的一款设计系统库。star高达1.6K+。

# 官网地址
https://semi.design/zh-CN/

# 仓库地址
https://github.com/DouyinFE/semi-design

好了,今天就分享到这里。感兴趣的话,可以去看看哈!

上一篇:MySQL主从搭建


下一篇:支配树