在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):css-for-js/mini-component-library开源软件地址(OpenSource Url):https://github.com/css-for-js/mini-component-library开源编程语言(OpenSource Language):JavaScript 78.1%开源软件介绍(OpenSource Introduction):Component Library WorkshopIn this workshop, we'll build 3 components from scratch:
Most of the pertinent information will be stored in the Figma document (https://www.figma.com/file/u0wCdLXheiN9f2FmAuPsE9/Mini-Component-Library), but this README will contain some additional information to help you on your mission! Two fully-formed components have already been included, to be used as-needed in your work:
Additionally, all of the colors you'll need are indexed in All components in this project use the
Running StorybookThis project uses Storybook, a component development tool. First, install dependencies with Once dependencies are installed, you can start storybook by running:
Once running, you can visit storybook at http://localhost:6006. TroubleshootingYou may get an error when running the
You can fix this issue either by downgrading to Node 16, or by updating the "scripts": {
- "start": "start-storybook -p 6006 -s public",
+ "start": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006 -s public",
}, For more info, check out the Troubleshooting Guide on the course platform. The ComponentsProgressBarThe figma document mentions that this component should be "accessible". You can learn how to build a semantically-valid, accessible progress-bar component by reading this doc: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role This component uses a box shadow. We haven't seen this property yet! For now, you can achieve this effect by copying the following CSS declaration into your component: box-shadow: inset 0px 2px 4px ${COLORS.transparentGray35}; We'll learn much more about the SelectThe Select component will need a down-arrow icon! You can use the We want to use a native This component also includes a function, IconInputThis component also uses the This component requires bold text. You can achieve this look by using |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论