コンポーネントのテンプレート

コンポーネントについて簡潔な説明を書きます。

複数行に渡っても問題ありません。

処理中
ドラッグして幅を変更
ドラッグして高さを変更
処理中

使用上の注意

他のコンポーネントとの使い分けの基準、特に注意したいアンチパターンなど使用上の注意があれば書きます。
種類ごとの使いどころは種類に書きます。

{コンポーネント名}を使用したコンポーネント

開発で頻繁に利用する実装を別のコンポーネント化している場合は、子ページへのリンクや説明を書きます。

種類

コンポーネントのバリエーションを小見出しにわけて書きます。もし網羅的な比較が必要な場合、テーブル or previewでコンポーネントを一覧を表示します。

コンポーネント名(種類) 例: Primary

コンポーネント(種類)の説明が入ります。

単品

複数

iframeを使用したくない場合(非推奨)

プロダクト

レイアウト

メインの種類でなく、コンポーネントが持つその他の種類(サイズやアイコン付きなど)がある場合に書きます。

状態

コンポーネントが持つ(hoverやdisabledなど)状態がある場合に書きます。

ライティング

主題に種類がなく、ライティングルールを書きたい場合はここに書きます。〇〇の使い方..などはこのグループに所属させます。AirTableも必要であれば埋め込めます。

アクセシビリティ

主題全体に対するアクセシビリティの考え方として、特段言及したい場合は書きます。

デザインパターン

コンポーネント独自のデザインパターンがあればこのグループ内に書きます、基準サイズなどもこの項目で書きます。

Props

コンポーネントが持つPropsを網羅して書きます。

size
"s""default"

ボタンの大きさ

children
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

ボタン内に表示する内容

className
string

コンポーネントに適用するクラス名

disabledDetail
{ icon?: FunctionComponent<{}>; message: ReactNode; }

無効な理由

prefix
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

ボタン内の先頭に表示する内容。
通常は、アイコンを表示するために用いる。

suffix
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

ボタン内の末尾に表示する内容。
通常は、アイコンを表示するために用いる。

square
falsetrue

true のとき、ボタンを正方形にする。

wide
falsetrue

true のとき、ボタンの width を 100% にする。

variant
"text""primary""secondary""danger""skeleton"

ボタンのスタイルの種類

loading
falsetrue

処理が走ってるかどうか

decorators
DecoratorsType<"loading">

関連リンク

  • link

参考文献

  • link