standard components
1.0.0
機能的なUIコンポーネントの仕様
https://standard-components.com
UIコンポーネントライブラリには、あらゆる形状とサイズがあります。この仕様は、交換可能なUIコンポーネントのエコシステムを作成し、より大きなコードの再利用性を促進するために、命名規則と小道具APIを標準化する方法として意図されています。
交換可能なUIコンポーネントのライブラリを作成するには、次の命名規則を使用する必要があります。このリストは意図的に制限されており、デモの出発点となることを目的としています。より多くのコンポーネントが時間とともに追加される可能性があります。
ボックスコンポーネントは、マージン、パディング、幅、その他のレイアウトスタイルを処理するプリミティブボックスモデルレイアウトコンポーネントです。
Flexコンポーネントは、FlexBox固有のプロパティを備えたボックスコンポーネントの拡張機能です。
テキストコンポーネントは、フォントサイズ、重量、ラインハイイト、アライメント、およびその他のタイポグラフィスタイルを処理する原始的なタイポグラフィコンポーネントです。
見出しコンポーネントは、見出しを対象としたテキストコンポーネントの拡張です。
画像コンポーネントは、画像を表示するコンテンツコンポーネントです。
BackgroundImageは、背景画像を表示するための小道具を含むボックスコンポーネントの拡張機能です。
ボタンコンポーネントは、ボタンのように見えるスタイルを備えたインタラクティブなコンポーネントです。
リンクコンポーネントは、ナビゲーション用のインタラクティブコンポーネントです。
スタイルの小道具は、CSSの上に柔軟性を意味し、インスタンスごとのスタイリングの懸念に対処するのに役立つ高レベルの抽象化です。スタイルの小道具は、主にCSSプロパティに基づいており、マージンとパディング用の速記の小道具があります。
ボタンなどの一部のコンポーネントは、スタイルバリアントを使用して、 primaryスタイルやsecondaryボタンスタイルなどのさまざまなバージョンをレンダリングします。バリアントは、 primaryおよびsecondaryバリアント用の速記のブールプロップで、 variantプロップで処理する必要があります。
詳細については、小道具をご覧ください。
テーマは、スタイルの小道具で使用される値を定義するオブジェクトです。テーマは、一貫したマージン、パディング、色、フォントサイズ、およびその他のUI定数を保証します。
詳細については、テーマを参照してください。
厳格なコンポーネントタイプ構造を順守することにより、システム内のコンポーネントは特異な目的に関係し、ライブラリ全体の交換性を高めることができます。
レイアウトコンポーネントは、幅、高さ、間隔を制御します。彼らはタイポグラフィやその他の考慮事項を制御しようとしません。
タイポグラフィーコンポーネントは、フォントファミリ、サイズ、ウェイト、リーディング、追跡、その他のプロパティに関係しています。誤字コンポーネントはレイアウトに関係していません。
コンテンツコンポーネントは、レイアウト、タイポグラフィ、またはその他のスタイリングの懸念に影響を与えることなく、画像、ビデオ、図などのものを表示します。
リンク、ボタン、フォーム要素などのインタラクティブな要素には、ユーザーの入力が必要であり、一般にレイアウトや誤字の懸念を処理しません。
スタイルコンポーネントは、レイアウトやタイポグラフィに影響を与えることなく、境界、半径、影、グラデーションなど、他のUIスタイルを処理します。
位置コンポーネントは、通常のドキュメントフローから子供を削除し、控えめに使用する必要があります。
Compositor製| github | MITライセンス
