コンポーネントのテンプレート
使いどころ
コンポーネント(全体)の使用目的や、使用上の注意、基準などを書きます。種類ごとの使いどころは種類に書きます。
種類
コンポーネントのバリエーションを子見出しにわけて書きます。もし網羅的な比較が必要な場合、テーブル or previewでコンポーネントを一覧を表示します。
コンポーネント名(種類) 例: Primary
コンポーネント(種類)の説明が入ります。
単品
複数
プロダクト
レイアウト
メインの種類でなく、コンポーネントが持つその他の種類(サイズやアイコン付きなど)がある場合に書きます。
状態
コンポーネントが持つ(hoverやdisabledなど)状態がある場合に書きます。
ライティング
主題に種類がなく、ライティングルールを書きたい場合はここに書きます。〇〇の使い方..などはこのグループに所属させます。AirTableも必要であれば埋め込めます。
アクセシビリティ
主題全体に対するアクセシビリティの考え方として、特段言及したい場合は書きます。
デザインパターン
コンポーネント独自のデザインパターンがあればこのグループ内に書きます、基準サイズなどもこの項目で書きます。
Props
コンポーネントが持つPropsを網羅して書きます。
Name | Required | Type | Description |
---|---|---|---|
size | - | "default" ,
"s" | ボタンの大きさ |
children | - | string ,
number ,
false ,
true ,
ReactElement<any, string | JSXElementConstructor<any>> ,
ReactFragment ,
ReactPortal | ボタン内に表示する内容 |
className | - | string | コンポーネントに適用するクラス名 |
disabledDetail | - | { icon?: FunctionComponent<{}>; message: ReactNode; } | 無効な理由 |
prefix | - | string ,
number ,
false ,
true ,
ReactElement<any, string | JSXElementConstructor<any>> ,
ReactFragment ,
ReactPortal | ボタン内の先頭に表示する内容。 通常は、アイコンを表示するために用いる。 |
suffix | - | string ,
number ,
false ,
true ,
ReactElement<any, string | JSXElementConstructor<any>> ,
ReactFragment ,
ReactPortal | ボタン内の末尾に表示する内容。 通常は、アイコンを表示するために用いる。 |
square | - | false ,
true | `true` のとき、ボタンを正方形にする。 |
wide | - | false ,
true | `true` のとき、ボタンの `width` を 100% にする。 |
variant | - | "text" ,
"primary" ,
"secondary" ,
"danger" ,
"skeleton" | ボタンのスタイルの種類 |
loading | - | false ,
true | 処理が走ってるかどうか |
関連リンク
- link
参考文献
- link