vitamin web
1.0.0
重要的
当前版本的维生素将不再发展，并且从现在开始只接受错误修复。更多详细信息。
Web应用程序的十项全能设计系统库
网站 - 展示
十项全能设计系统是一个框架，可帮助我们的生态系统设计和发展一致和质量的体验。对于其数字部分，它被称为维生素。
该存储库托管用于Web应用程序的库。
为了允许您根据产品限制消耗设计系统的元素，我们为您提供了使用维生素核心核心团队开发和维护的不同技术和粒度水平的维生素Web库。
此软件包为您提供了完整的CSS，并具有大量的实用程序类，因为它是由CSS生成的。然后，您将根据您的HTML中使用的类清除CSS来优化生产：
| @vtmn/css | 读书我 |
|---|
如果您已经在项目中使用了Tailwind CSS，或者想通过@apply构建自己的课程来充分利用其所有功能和指令。您可以查看我们的软件包@vtmn/css-tailwind-preset该包装将为您解释如何在tailwind CSS项目中使用维生素样式。
这些软件包允许消耗更高水平的粒度元素。您只会获得所需的样式，而消耗的是没有CSS自定义属性的纯CSS，因此IE 11兼容：
| @vtmn/css-designtokens | 读书我 |
|---|
| @vtmn/css-button | 读书我 | ||||
|---|---|---|---|---|---|
| @vtmn/css-dropdown | 读书我 | ||||
| @vtmn/css-link | 读书我 |
| @vtmn/css-select | 读书我 | ||||
|---|---|---|---|---|---|
| @vtmn/css-Text输入 | 读书我 |
| @vtmn/css-badge | 读书我 | ||||
|---|---|---|---|---|---|
| @vtmn/css-loader | 读书我 | ||||
| @vtmn/css-price | 读书我 | ||||
| @vtmn/css-progressbar | 读书我 | ||||
| @vtmn/css评分 | 读书我 | ||||
| @vtmn/css-tag | 读书我 |
| @vtmn/css-breadcrumb | 读书我 | ||||
|---|---|---|---|---|---|
| @vtmn/css-navbar | 读书我 | ||||
| @vtmn/css-search | 读书我 | ||||
| @vtmn/css-tabs | 读书我 |
| @vtmn/css-alert | 读书我 | ||||
|---|---|---|---|---|---|
| @vtmn/css-modal | 读书我 | ||||
| @vtmn/css-popover | 读书我 | ||||
| @vtmn/css-snackbar | 读书我 | ||||
| @vtmn/css-toast | 读书我 | ||||
| @vtmn/css-tooltip | 读书我 |
| @vtmn/css-checkbox | 读书我 | ||||
|---|---|---|---|---|---|
| @vtmn/css-chip | 读书我 | ||||
| @vtmn/css-Quantity | 读书我 | ||||
| @vtmn/css-radio-button | 读书我 | ||||
| @vtmn/css-toggle | 读书我 |
| @vtmn/css-accordion | 读书我 | ||||
|---|---|---|---|---|---|
| @vtmn/css卡 | 读书我 | ||||
| @vtmn/css-divider | 读书我 | ||||
| @vtmn/css-list | 读书我 | ||||
| @vtmn/css-skeleton | 读书我 |
| @vtmn/css-utilities | 读书我 |
|---|
此软件包为您提供了一个SVG图标库，您可以通过少数方式包含这些图书馆（SVG，图标字体，精灵，Sprite，CSS，嵌入式） ：
| @vtmn/图标 | 读书我 |
|---|
此软件包为您提供了SVG资产库，您可以通过少数方式包含这些资产（SVG，资产字体，Sprite，CSS，Embedded） ：
| @vtmn/资产 | 读书我 |
|---|
为了增强您的开发人员体验，我们可以根据上面的核心软件包在React，Svelte和Vue中开发组件的可能性。这些图书馆是由社区开发和维护的，维生素核心团队将在那里进行审查，并确保您的主张的质量，随时贡献！
此软件包为您提供了一个React组件库：
| @vtmn/react | 读书我 |
|---|
此软件包为您提供了一个典型组件的库：
| @vtmn/svelte | 读书我 |
|---|
此软件包为您提供了VUE组件的库：
| @vtmn/vue | 读书我 |
|---|
十项全能设计系统的目标之一是提供指南和组件，以获得一致性，效率和可访问性。实现这一目标的最佳方法是在一起！这就是为什么我们在Github上。我们会喜欢社区的贡献（错误报告，功能请求，建议，拉请请求，无论您想要什么！） 。
纱线工作区和NX用于管理依赖关系并跨软件包构建config。 Lerna用于管理版本管理和发布。
运行以下操作以设置您的本地开发环境：
# Install `yarn`, alternatives at https://yarnpkg.com/en/docs/install
brew install yarn
# Clone or fork `vitamin-web`
git clone [email protected]:Decathlon/vitamin-web.git # or your fork
cd vitamin-web
# install dependencies
yarn
# build all packages
yarn build
# start all showcases and build sources in watch mode & hot reload
yarn start
# or you can launch separately (recommended)
yarn start:css
yarn start:icons
yarn start:react
yarn start:svelte
yarn start:vue有关如何贡献的更多信息，请参见贡献文档。
感谢参与这些维生素-Web图书馆的贡献者（甚至在开源之前） 。 ？
还要感谢您的混音图标，因为Vitamix Icons是基于其开源图标库的官方Decathlon图标库（混音设计©2020）。该原始库在许可证Apache 2.0下，已由DeCathlon修改。了解更多。
Copyright 2021 Decathlon.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
