AppNavi
プロダクト内の主要な機能を切り替えるためのコンポーネントです。機能の切り替えだけでなく、プロダクト全体に影響を及ぼす頻繁に行なう操作を埋め込めます。
レイアウトなどはデザインパターンのヘッダーを参照してください。
Props
AppNavi props
label
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal
ラベルのテキスト
buttons
(AppNaviDropdownProps | AppNaviCustomTagProps | AppNaviButtonProps | AppNaviAnchorProps)[]
表示するボタンの Props の配列
displayDropdownCaret
falsetrue
ドロップダウンにキャレットを表示するかどうか
AppNaviButton props
icon
FunctionComponent<Props>ComponentClass<Props, any>
表示するアイコンタイプ
current
falsetrue
アクティブ状態であるかどうか
onClick
(e: MouseEvent<HTMLButtonElement, MouseEvent>) => void
クリックイベントのハンドラ
AppNaviAnchor props
href必須
string
アンカーの href
icon
FunctionComponent<Props>ComponentClass<Props, any>
表示するアイコンタイプ
current
falsetrue
アクティブ状態であるかどうか
AppNaviDropdown props
dropdownContent必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal
ドロップダウンのコンテンツ
icon
FunctionComponent<Props>ComponentClass<Props, any>
表示するアイコンタイプ
current
falsetrue
アクティブ状態であるかどうか
displayCaret
falsetrue
AppNaviCustomTag props
tag必須
ComponentClass<any, any>FunctionComponent<any>
このボタンのカスタムタグ
icon
FunctionComponent<Props>ComponentClass<Props, any>
表示するアイコンタイプ
current
falsetrue
アクティブ状態であるかどうか