홈 탐색 도움말
로그인
Apq
/
semi-design
의 미러 https://github.com/DouyinFE/semi-design.git
1
0
포크 0
파일 이슈 0 위키
브렌치: fix_base_step_title_wrong_pos
브랜치 태그
semi-design
/
packages
/
semi-ui
DaiQiangReal 4f13a0d576 fix: fix basic step title error position when no title content 8 달 전
..
_base 6a81a795f3 chore: docs & example in story optimize 1 년 전
_cssAnimation 73401f34e4 fix: fix tooltip animation in react18 #1225 (#1227) 3 년 전
_portal dc6f3f7fee fix: optimize code 2 년 전
_sortable 1d5f248c93 fix: Fixed the issue in Transfer that quick drag failed due to too long drag sensing delay time 1 년 전
_test_ d4c3d4b522 chore: use eslint to format code (#1162) 3 년 전
_utils 52b37b12e1 feat: highlight searchWords support object props (#2600) 1 년 전
anchor 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
audioPlayer b18be73a99 chore: Modify the image link in storybook to ensure Cypress test consistency 9 달 전
autoComplete 52b37b12e1 feat: highlight searchWords support object props (#2600) 1 년 전
avatar 53bb70ba9b chore: fix Avatar/AvatarGroup size type error 1 년 전
backtop 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
badge 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
banner 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
breadcrumb 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
button 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
calendar 95dc5a430b Merge branch 'release' 1 년 전
card 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
carousel 2c43674a31 fix: render state value in children render always get init one (#2634) 1 년 전
cascader ff55418f9d style: Modify default empty data display style in Cascader, to be consistent with TreeSelect/Select (#2725) 11 달 전
chat f8a673573c style: Fix the problem that the width of the chat content area is stretched by the table (#2775) 9 달 전
checkbox f8004dfb8f style: [Checkbox] Modify unreasonable naming, undisabled -> enable (#2494) 1 년 전
codeHighlight a87ee93f0b fix: code highlight add semi-light-scrollbar 1 년 전
collapse 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
collapsible d71a32889a fix: [Collapsible] remove useless isEqual compare in componentDidUpdate 1 년 전
colorPicker c5ca0a25c7 fix: optimize colorPicker code 1 년 전
configProvider 458a4dcbd2 feat: ConfigConsumer 1 년 전
cropper 16294a73ef feat: [Cropper] add preview API for realtime preivew croppered image (#2782) 9 달 전
datePicker 8df42ba7d3 fix: Update the display logic of months in different years under type monthRange (#2608) 1 년 전
descriptions 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
divider 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
dragMove d9e931c738 fix: Fixed the issue in DragMove that after setting the handler, DragMove child elements can still be dragged (#2662) 1 년 전
dropdown fd051c8198 fix: fix dropdown onVisibleChange not defined some time (#2454) 1 년 전
empty 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
form d65e331ddd fix: type define not support return promise of formProps.validateFields (#2769) 10 달 전
grid 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
highlight 52b37b12e1 feat: highlight searchWords support object props (#2600) 1 년 전
hotKeys 33d762b11d chore: Hotkeys, move the event DOM operation to the adapter (#2515) 1 년 전
iconButton cab27191a0 feat: Button Badge add contentClassName (#2262) 1 년 전
icons 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
image 63d0a0b499 chore: Image component props support native img element attributes (#2427) 1 년 전
input 23e87e4dbc feat: inputnumber add currency support (#2742) 10 달 전
inputNumber 27934fdc87 Merge branch main into release 10 달 전
jsonViewer b3356487aa feat: expose jsonviewer search api (#2755) 10 달 전
layout 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
list 56a3cf3b69 docs: update list drag demo use dnd-kit (#2717) 11 달 전
locale 6ac8df22fc feat: JsonViewer add i18n support (#2766) 10 달 전
lottie 5a83d41be8 chore: doc 1 년 전
markdownRender bc981acf20 fix: MarkdownRender table duplicate column elements 10 달 전
modal 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
navigation 674612e3d1 fix: add a new selector type for the hover style fallback in the renderWrapper scenario (#2691) 10 달 전
notification 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
overflowList cf816b24b4 fix: deepclone items when getOverflowItem to Prevent props.items from being changed internally due to rapid clicks (#2423) 1 년 전
pagination 98684cbf50 fix: [Pagination] Fixed page capacity switcher did not switch language correctly when switching languages (#2698) 11 달 전
pincode 95b8f3074d fix: pinCode number format IME issue in iOS 11 달 전
popconfirm b786b6eb04 fix: change popconfirm test 1 년 전
popover 6a4a47ed30 style: Modify the color of Popover arrow to ensure that the configuration can take effect through DSM (#2806) 9 달 전
progress c1f2ca8eeb fix: Fixed the problem that when the hot area for sorting is the enti… (#2803) 9 달 전
radio 8e653139fc feat: [RadioGroup] options added addonStyles/addonClassName/addonId/extraId (#2706) 10 달 전
rating 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
resizable 3c4e287508 fix: Fix Resizable not working on touch screen 11 달 전
resizeObserver 63efc79d5f fix: fix the error accessing empty element in ReactResizeObserver (#2095) 1 년 전
scripts 6ebc1b8a5e chore: remove useless license.txt in the dist dir 1 년 전
scrollList 5ec3889a0c fix(datepicker): fixed chrome crashed bug by scrollList aria prop #2722 (#2723) 11 달 전
select 479f0f8c18 fix: add prefix/suffix color token in Select/Cascader/TreeSelect (#2720) 11 달 전
sideSheet 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
skeleton 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
slider eeafecf1f9 fix: fix slider handle flash in control mode (#2442) 1 년 전
space 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
spin 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
steps 4f13a0d576 fix: fix basic step title error position when no title content 8 달 전
switch 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
table c1f2ca8eeb fix: Fixed the problem that when the hot area for sorting is the enti… (#2803) 9 달 전
tabs 44b19ef61f fix: tabs add scrollActiveTabItemIntoView to componentDidMount (#2787) 9 달 전
tag 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
tagInput 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
timePicker 1fc17f3b8c style: add color-scrollList_header-bg support (#2789) 9 달 전
timeline 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
toast 3a7a6d1e55 chore: update ci workflow node 16 -> node 20 (#2109) 1 년 전
tooltip 809f6aa117 fix: fix tooltip dom not remove 1 년 전
transfer cde4825d2b fix: When all items except the disabled item in the left panel of tra… (#2574) 1 년 전
tree 4254a00262 feat: Tree/TreeSelect add expandIcon API 11 달 전
treeSelect 479f0f8c18 fix: add prefix/suffix color token in Select/Cascader/TreeSelect (#2720) 11 달 전
trigger f05ed24b0b chore: remove file head lint rule which already set global (#1706) 2 년 전
typography 1ca2dfd4aa fix: Modify the way to clear ellipsisContainer and removDDe the obsolete use of ReactDOM.render() 11 달 전
upload 942121dc13 feat: add renderPicClose suppport in upload (#2714) 11 달 전
userGuide 5d79300385 fix: UserGuide click-through behavior (#2764) 10 달 전
README.md 581de64d5e docs: update component number 1 년 전
getBabelConfig.js 496f3db0f7 chore: remove corejs 3 년 전
gulpfile.js 9c3a607100 chore: auto format code 3 년 전
index.ts 573124c9e1 feat: support userGuide component (#2733) 10 달 전
package.json eb0c5baa2d v2.78.0 9 달 전
tsconfig.json ea4a06bb0e fix: change tsconfig libo 1 년 전
webpack.config.js bd811b964d chore: lock webpack version 1 년 전

README.md

Semi-UI

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

[![LICENSE][license-badge]][license-url] [![NPM][npm-badge]][npm-url] [![CONTRIBUTORS][contributors-badge]][contributors-url] ![Design Token][Design Token] [![FIGMA][figma-badge]][figma-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)

🎉 Features

  • 💪 Up to 70+ high-quality Components.
  • 💅 Code2Design, automatically generate Figma UI Kit according to different themes, keep same between design and code
  • 🚀 Powerful Design2Code support, convert figma draft to code in a few seconds
  • 💕 Complete A11y support, follows W3C standards to provide keyboard interaction, focus management and ARIA for all components
  • 💅 Up to 3000+ Design Tokens can be easily modify by Semi Design system management, make Semi Design to Any Design quickly.
  • 🌍 Internationalization Support for Dozens of Languages, timezone, RTL support
  • ⚙️ Strict quality assurance, covering unit testing, E2E testing, visual testing
  • 👏 Written in Typescript, friendly Static Type Support. Based on Foundation/Adapter architecture, easy to read and contribute
  • 🥳 SSR (Server Side Rendering) Compatible.

🔥 Install

# with npm
npm install @douyinfe/semi-ui

# with yarn
yarn add @douyinfe/semi-ui

👍 Usage

Here is a quick example to get you started, it's all you need:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button, Switch } from '@douyinfe/semi-ui';

const App = () => (
    <>
        <Button type='primary'>primary button</Button>
        <Switch size='large' />
    </>
);

ReactDOM.render(<App />, document.querySelector('#app'));

And Semi UI Doc Site has hundreds of editable examples and live preview, welcome to play with those examples.

📰 News about Semi UI

📌 Documentation

👌 Platform Support

Semi UI supports all major modern browsers.

|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 |

👨‍👨‍👧‍👦 User Group

Join User Group on Feishu / Lark

💖 Thanks

Chromatic

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.

Cypress

Thanks to Cypress for providing E2E testing.

👐 Contributing

Thanks to all the people who already contributed!

Read the contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Semi UI.

See CONTRIBUTING documentation.

🎈 License

Semi UI is MIT Licensed