Semi-Design 开源项目教程

最新推荐文章于 2024-10-18 11:13:10 发布

钟日瑜

最新推荐文章于 2024-10-18 11:13:10 发布

阅读量287

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00278/article/details/142474914

版权

Semi-Design 开源项目教程

semi-design 🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 2800+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. 🧑🏻‍💻 Design to Code in one click 项目地址: https://gitcode.com/gh_mirrors/se/semi-design

1. 项目介绍

Semi-Design 是一个现代、全面且灵活的设计系统和 React UI 库。它提供了超过 3000+ 的设计令牌，使得构建设计系统变得非常容易。Semi-Design 不仅支持从设计到代码的快速转换，还提供了丰富的组件和工具，帮助开发者快速构建美观的 React 应用。

2. 项目快速启动

安装

首先，通过 npm 安装 Semi-Design：

npm install @douyinfe/semi-ui

快速示例

以下是一个简单的示例，展示了如何使用 Semi-Design 的 Button 和 Form 组件：

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Button, Form } from '@douyinfe/semi-ui';

const App = () => (
  <Form>
    <Form.Input field="name" initValue="semi design"></Form.Input>
    <Button htmlType="submit">submit</Button>
  </Form>
);

const root = createRoot(document.querySelector('#app'));
root.render(<App />);