1
0

快速搭建美观的 React 应用。由抖音前端与 UED 团队维护。 https://semi.design/

代强 e1b7364b80 Merge branch 'release' into fallback 1 жил өмнө
.codesandbox fd9f597550 Chore: update storybook & Webpack & Cypress (#1589) 2 жил өмнө
.github 7cb7f7a5ca Update performance.yaml 1 жил өмнө
.storybook d13d8e48e8 chore:optimize storybook build 2 жил өмнө
.vscode 0bac8f91d8 chore: cleanup vscode launch.json (#2069) 1 жил өмнө
content 6a09de7729 chore:change log 1 жил өмнө
cypress d7a4270593 fix: when using timeZone and disabledHours at the same time in timepicker display value does not meet expectations (#2083) 1 жил өмнө
packages e1b7364b80 Merge branch 'release' into fallback 1 жил өмнө
plugins 395ecb1b03 feat: add docs of lab icon (#1956) 1 жил өмнө
scripts 4678f85f15 docs: changelogdiff add new components 1 жил өмнө
search 708df1978f chore: update search data 3 жил өмнө
src 4678f85f15 docs: changelogdiff add new components 1 жил өмнө
static 7d72163a34 chore: add sitemap url to robots.txt 2 жил өмнө
test 5244bea095 chore: add jest resizeobserver polyfill 3 жил өмнө
.commitlintrc.js f76bd5879d feat: init 4 жил өмнө
.eslintignore f76bd5879d feat: init 4 жил өмнө
.eslintrc.js 12ad898683 fix: fixed Table propTypes is removed in prod mode (#2031) 1 жил өмнө
.gitattributes 8337c6d90a Update .gitattributes 3 жил өмнө
.gitignore f8d62f4c66 test: [Image] add test cases for Image (#1236) 2 жил өмнө
.lighthouserc.js fb91638513 chore(ci): lighthouse (#380) 3 жил өмнө
.npmrc 37f53d3a5e chore: update yarn.lock 3 жил өмнө
.prettierrc.js f76bd5879d feat: init 4 жил өмнө
.stylelintrc.js c5917caa93 chore: change stylelint rules 2 жил өмнө
CODE_OF_CONDUCT.md 0e46959d60 Create CODE_OF_CONDUCT.md 4 жил өмнө
CONTRIBUTING-en-US.md 110db20637 docs: update CONTRIBUTING.md 3 жил өмнө
CONTRIBUTING.md f42c07f20a docs: Update CONTRIBUTING.md 1 жил өмнө
LICENSE 15deb4dd41 Update LICENSE 4 жил өмнө
README-zh_CN.md 507cc171fe docs: Update README-zh_CN.md 2 жил өмнө
README.md cb4f1cae33 docs: Update README.md 2 жил өмнө
babel.config.js f76bd5879d feat: init 4 жил өмнө
cypress.config.ts fd9f597550 Chore: update storybook & Webpack & Cypress (#1589) 2 жил өмнө
favicon.ico f76bd5879d feat: init 4 жил өмнө
gatsby-browser.js f76bd5879d feat: init 4 жил өмнө
gatsby-config.js 66559b4561 chore: add cdn config 2 жил өмнө
gatsby-node.js 395ecb1b03 feat: add docs of lab icon (#1956) 1 жил өмнө
gatsby-ssr.js f76bd5879d feat: init 4 жил өмнө
jest.config.js 591051eb86 test: add istanbul ignore to some file and update jest exclude config 3 жил өмнө
lerna.json 89bf62ba8b v2.53.2 1 жил өмнө
nyc.config.js 591051eb86 test: add istanbul ignore to some file and update jest exclude config 3 жил өмнө
package.json 23e8755de5 Merge branch 'release' 1 жил өмнө
res.txt 4fa7ee7176 feat: fallback checkbox radio 1 жил өмнө
sitemap.xml 51716d119e chore: publish 2.53.2 1 жил өмнө
test.txt d7403cddd0 Revert "Revert "Revert "Revert "Revert "chore: change test""""" 1 жил өмнө
tsconfig.eslint.json f76bd5879d feat: init 4 жил өмнө
tsconfig.json ef2531c8be Fix strict ts (#314) 3 жил өмнө
yarn.lock db5d38b8e6 chore: publish 2.53.1 1 жил өмнө

README-zh_CN.md

Semi-UI

现代、全面、灵活的设计系统和 UI 库。 致力打通 DesignOps & DevOps ,快速搭建美观的 React 应用。

[![LICENSE][license-badge]][license-url] [![NPM][npm-badge]][npm-url] [![FIGMA][figma-badge]][figma-url] ![Design Token][Design Token] [![BUILD-JS][build-js-badge]][build-js-url] [![BUILD-CSS][build-css-badge]][build-css-url] [![CODECOV][codecov-badge]][codecov-url] [![Chromatic][chromatic-badge]][chromatic-url] [![Cypress][cypress-badge]][cypress-url] [![Twitter Follow](https://img.shields.io/twitter/follow/SemiDesignUI?style=social)](https://twitter.com/SemiDesignUI)

简体中文 | English

🎉 特性

  • 💪 60+高质量组件
  • 💅 Code2Design,根据不同主题自动生成 Figma UI Kit,保持代码与设计同源
  • 🚀 强大的 D2C (Design2Code)支持,Figma 设计稿一键转出真实代码,快速构建应用
  • 💕 完善的无障碍支持,为所有组件提供遵循 W3C 标准的键盘交互、焦点管理和语义化
  • 🎨 设计系统管理工具 Semi DSM,多达2000+ Design Token,快速定制你的专属设计系统
  • 🌍 国际化支持 20+ 语言,提供完备的多语言、多时区、RTL支持
  • ⚙️ 稳定的质量保障,覆盖单元测试、E2E测试、视觉回归测试等多种测试手段
  • 🥳 支持 SSR
  • 👏 使用 TypeScript, 良好的类型定义,基于 Foundation / Adapter 架构,源码易于阅读 / 贡献

🔥 安装

npm install @douyinfe/semi-ui

👍 组件使用

这是一个快速开始的例子:

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 />);

Semi UI 官网 拥有上千个支持实时调试的例子,欢迎体验使用。

⚡️ D2C 设计稿转代码

安装插件 Semi Figma Plugin. 数秒内将 Figma 转为真实前端代码,支持多种出码格式: JSX + SCSS / Emotion/Tailwind、 JSON Schema DSL

  • 支持 Figma Devmode,选中图层后,右侧可直接查看对应的真实代码

design2code

  • 或跳转至 Codesandbox 进行二次编辑

codesandboxdemo

🎨 DSM 设计系统管理

基于 Semi UI 定制你的专属设计系统, 提供高达 2700+ Token 允许你定义每一处细节. 并时刻在 Figma 与主题商店间保持同步。

dsmintro

📰 关注我们的动态

📌 文档

👌 平台支持

Semi UI 支持所有主流浏览器。

|chrome
chrome|firefox
firefox|safari
safari|IE/Edge
IE/Edge|electron
Electron| |--|--|--|--|--| | latest 2 versions | latest 2 versions | latest 2 versions | Edge | latest 2 versions |

👨‍👨‍👧‍👦 交流群

有任何问题可以进群交流,我们会及时给予解答和反馈。

加入飞书用户群.

💖 Thanks

Chromatic

感谢 Chromatic 提供可视化测试平台,帮助我们审查 UI 更改和提供视觉回归测试。

Cypress

感谢 Cypress 提供 E2E 测试。

👐 参与共建

Semi Design 欢迎社区开发者参与共建,衷心感谢每一位协作者的付出

阅读贡献指南了解我们的开发流程,包括开发规范、测试规范和构建规范等: CONTRIBUTING

🎈 协议

Semi UI 使用 MIT 协议