コンポーネントのテンプレート
コンポーネントについて簡潔な説明を書きます。
複数行に渡っても問題ありません。
使用上の注意
特に注意したいアンチパターンなど使用上の注意があれば書きます。種類ごとの使いどころは種類に書きます。
種類
コンポーネントのバリエーションを子見出しにわけて書きます。もし網羅的な比較が必要な場合、テーブル 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
処理が走ってるかどうか
関連リンク
- link
参考文献
- link