vitamin webダウンロード - vitamin webソースコードのダウンロード

vitamin web

サードパーティ製コンポーネント

1.0.0

ダウンロード

重要

この現在のバージョンのビタミンは、もはや進化せず、これからのバグ修正のみを受け入れます。詳細はこちらです。

ビタミンデカスロン設計システムのロゴ

ビタミンウェブ

Webアプリケーション用のDecathlon Design Systemライブラリ

ウェブサイト - ショーケース

導入

Decathlon Design Systemは、私たちのエコシステムが一貫した品質の経験を設計および開発するのに役立つフレームワークです。デジタルセクションでは、ビタミンと呼ばれます。

このリポジトリは、Webアプリケーション用のライブラリをホストしています。

コアパッケージ

製品の制約に応じて設計システムの要素を消費できるようにするために、ビタミンコアチームによって開発および維持されたコアパッケージを使用して、さまざまなテクノロジーと粒度のレベルを持つビタミンWebライブラリを使用する可能性を提供します。

グローバルCSSスタイル？

このパッケージは、Tailwind CSSで生成されるため、ユーティリティクラスの巨大なセットを備えた完全なCSSを提供します。その後、HTMLで使用されているクラスに従ってCSSをパージすることにより、生産を最適化するのはあなた次第です。

@vtmn/css	readme

プロジェクトで既にTailwind CSSを使用している場合、または@applyを介して独自のクラスを構築して、関数やディレクティブなどのすべての機能を最大限に活用したい場合。パッケージ@vtmn/css-tailwind-presetを確認できます。これにより、Tailwind CSSプロジェクトでビタミンスタイルを使用する方法を説明します。

特定のCSSスタイル？

これらのパッケージにより、より高いレベルの粒度を持つ要素の消費が可能になります。必要なスタイルのみを取得し、消費するのはCSSカスタムプロパティのない純粋なCSSです。つまり、互換性があります。

デザイントークン用

@vtmn/css-design-tokens	readme

各コンポーネントに対して

アクション

@vtmn/css-button	readme
@vtmn/css-dropdown	readme
@vtmn/css-link	readme

フォーム

@vtmn/css-select	readme
@vtmn/css-text-input	readme

インジケーター

@vtmn/css-badge	readme
@vtmn/css-roader	readme
@vtmn/css-price	readme
@vtmn/css-progressbar	readme
@vtmn/css-rating	readme
@vtmn/css-tag	readme

オーバーレイ

@vtmn/css-alert	readme
@vtmn/css-modal	readme
@vtmn/css-popover	readme
@vtmn/css-snackbar	readme
@vtmn/css-toast	readme
@vtmn/css-tooltip	readme

選択コントロール

@vtmn/css-checkbox	readme
@vtmn/css-chip	readme
@vtmn/css-quantity	readme
@vtmn/css-radio-button	readme
@vtmn/css-toggle	readme

構造

@vtmn/css-accordion	readme
@vtmn/css-card	readme
@vtmn/css-divider	readme
@vtmn/css-list	readme
@vtmn/css-skeleton	readme

ユーティリティ用

@vtmn/css-utilities	readme

アイコン

このパッケージは、SVGアイコンのライブラリを提供します。これには、ほんの一握りの方法（SVG、アイコンフォント、スプライト、CSS、組み込み）を含めることができます。

@vtmn/アイコン	readme

資産？

このパッケージは、SVGアセットのライブラリを提供し、ほんの一握りの方法（SVG、Asset Font、Sprite、CSS、Embedded）を含めることができます。

@vtmn/assets	readme

コミュニティパッケージ

開発者エクスペリエンスを向上させるために、上記のコアパッケージに基づいて、React、Svelte、Vueでコンポーネントを開発する可能性を提供します。これらのライブラリはコミュニティによって開発および維持されており、ビタミンコアチームはレビューし、命題の質を確保するためにそこにいます。お気軽に貢献してください！

反応？

このパッケージは、Reactコンポーネントのライブラリを提供します。

@VTMN/REACT	readme

svelte？

このパッケージは、Svelteコンポーネントのライブラリを提供します。

@vtmn/svelte	readme

vue？

このパッケージは、Vueコンポーネントのライブラリを提供します。

@vtmn/vue	readme

貢献

デカスロン設計システムの目標の1つは、一貫性、効率、アクセシビリティを獲得するためのガイドラインとコンポーネントを提供することです。これを達成するための最良の方法は一緒です！だから私たちはgithubにいます。コミュニティからの貢献が大好きです（バグレポート、機能リクエスト、提案、プルリクエスト、必要なものは何でも！） 。

YARNワークスペースとNXは、依存関係を管理し、パッケージ間で構成を構築するために使用されます。 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ライブラリに関与した貢献者に感謝します（オープンソースになる前であっても） 。？

ライセンス

 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.

拡大する

追加情報