AppNavi

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

Props

AppNavi props

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

ラベルのテキスト

buttons
(AppNaviDropdownProps | AppNaviCustomTagProps | AppNaviButtonProps | AppNaviAnchorProps)[]

表示するボタンの Props の配列

isCurrentUnclickable
falsetrue

アクティブ状態のボタンがクリック可能かどうか

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

追加で表示する内容

className
string

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

displayDropdownCaret
falsetrue

ドロップダウンにキャレットを表示するかどうか

AppNaviButton props

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

ボタンのテキスト

icon
FunctionComponent<ComponentProps>ComponentClass<ComponentProps, any>

表示するアイコンタイプ

current
falsetrue

アクティブ状態であるかどうか

onClick
(e: MouseEvent<HTMLButtonElement, MouseEvent>) => void

クリックイベントのハンドラ

isUnclickable
falsetrue

AppNaviAnchor props

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

アンカーのテキスト

href必須
string

アンカーの href

icon
FunctionComponent<ComponentProps>ComponentClass<ComponentProps, any>

表示するアイコンタイプ

current
falsetrue

アクティブ状態であるかどうか

isUnclickable
falsetrue

AppNaviDropdown props

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

ボタンのテキスト

dropdownContent必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

ドロップダウンのコンテンツ

icon
FunctionComponent<ComponentProps>ComponentClass<ComponentProps, any>

表示するアイコンタイプ

current
falsetrue

アクティブ状態であるかどうか

isUnclickable
falsetrue
displayCaret
falsetrue

AppNaviCustomTag props

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

ボタンのテキスト

tag必須
ComponentClass<any, any>FunctionComponent<any>

このボタンのカスタムタグ

icon
FunctionComponent<ComponentProps>ComponentClass<ComponentProps, any>

表示するアイコンタイプ

current
falsetrue

アクティブ状態であるかどうか

isUnclickable
falsetrue