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.
