AppNavi
アプリケーション内の主要機能を切り替えるグローバルナビゲーションコンポーネントです。機能間を行き来するとき、機能切替以外でアプリ全体に関わる頻繁な操作を常設するときに使います。
レイアウトなどはAppHeaderを参照してください。
モバイル
モバイルでの表示はAppHeaderコンポーネントが対応します。 AppHeaderのモバイルを参照してください。
Props
AppNavi props
label
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal
ラベルのテキスト
buttons非推奨
(AppNaviDropdownProps | AppNaviCustomTagProps | AppNaviButtonProps | AppNaviAnchorProps)[]
表示するボタンの Props の配列 @deprecated AppNaviButton などのコンポーネントを組み合わせて組み上げてください
displayDropdownCaret非推奨
falsetrue
ドロップダウンにキャレットを表示するかどうか @deprecated キャレットの省略は非推奨です
additionalArea
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal
追加の領域
AppNaviButton props
icon
FunctionComponent<BaseProps<T> & { selectedItems: (ComboboxItem<T> & { deletable?: boolean; })[]; selectedItemEllipsis?: boolean; inputValue?: string; onDelete?: (item: ComboboxItem<T>) => void; ... 4 more ...; noResultText?: ReactNode; }<T> & { selectedItems: (ComboboxItem<T> & { deletable?: boolean; })[]; selectedItemEllipsis?: boolean; inputValue?: string; onDelete?: (item: ComboboxItem<T>) => void; ... 4 more ...; noResultText?: ReactNode; } & Omit<...>>ComponentClass<BaseProps<T> & { selectedItems: (ComboboxItem<T> & { deletable?: boolean; })[]; selectedItemEllipsis?: boolean; inputValue?: string; onDelete?: (item: ComboboxItem<T>) => void; ... 4 more ...; noResultText?: ReactNode; }<T> & { selectedItems: (ComboboxItem<T> & { deletable?: boolean; })[]; selectedItemEllipsis?: boolean; inputValue?: string; onDelete?: (item: ComboboxItem<T>) => void; ... 4 more ...; noResultText?: ReactNode; } & Omit<...>, any>
表示するアイコンタイプ
current
falsetrue
アクティブ状態であるかどうか
onClick
(e: MouseEvent<HTMLButtonElement, MouseEvent>) => void
クリックイベントのハンドラ
AppNaviAnchor props
href
string
アンカーの href
icon
FunctionComponent<BaseProps<T> & { selectedItems: (ComboboxItem<T> & { deletable?: boolean; })[]; selectedItemEllipsis?: boolean; inputValue?: string; onDelete?: (item: ComboboxItem<T>) => void; ... 4 more ...; noResultText?: ReactNode; }<T> & { selectedItems: (ComboboxItem<T> & { deletable?: boolean; })[]; selectedItemEllipsis?: boolean; inputValue?: string; onDelete?: (item: ComboboxItem<T>) => void; ... 4 more ...; noResultText?: ReactNode; } & Omit<...>>ComponentClass<BaseProps<T> & { selectedItems: (ComboboxItem<T> & { deletable?: boolean; })[]; selectedItemEllipsis?: boolean; inputValue?: string; onDelete?: (item: ComboboxItem<T>) => void; ... 4 more ...; noResultText?: ReactNode; }<T> & { selectedItems: (ComboboxItem<T> & { deletable?: boolean; })[]; selectedItemEllipsis?: boolean; inputValue?: string; onDelete?: (item: ComboboxItem<T>) => void; ... 4 more ...; noResultText?: ReactNode; } & Omit<...>, any>
表示するアイコンタイプ
current
falsetrue
アクティブ状態であるかどうか
elementAs
"symbol""object"ComponentClass<any, any>FunctionComponent<any>"a""abbr""address""area""article""aside""audio""b""base""bdi""bdo""big""blockquote""body""br""button""canvas""caption""center""cite""code""col""colgroup""data""datalist""dd""del""details""dfn""dialog""div""dl""dt""em""embed""fieldset""figcaption""figure""footer""form""h1""h2""h3""h4""h5""h6""head""header""hgroup""hr""html""i""iframe""img""input""ins""kbd""keygen""label""legend""li""link""main""map""mark""menu""menuitem""meta""meter""nav""noindex""noscript""ol""optgroup""option""output""p""param""picture""pre""progress""q""rp""rt""ruby""s""samp""search""slot""script""section""select""small""source""span""strong""style""sub""summary""sup""table""template""tbody""td""textarea""tfoot""th""thead""time""title""tr""track""u""ul""var""video""wbr""webview""svg""animate""animateMotion""animateTransform""circle""clipPath""defs""desc""ellipse""feBlend""feColorMatrix""feComponentTransfer""feComposite""feConvolveMatrix""feDiffuseLighting""feDisplacementMap""feDistantLight""feDropShadow""feFlood""feFuncA""feFuncB""feFuncG""feFuncR""feGaussianBlur""feImage""feMerge""feMergeNode""feMorphology""feOffset""fePointLight""feSpecularLighting""feSpotLight""feTile""feTurbulence""filter""foreignObject""g""image""line""linearGradient""marker""mask""metadata""mpath""path""pattern""polygon""polyline""radialGradient""rect""set""stop""switch""text""textPath""tspan""use""view"
next/link などのカスタムコンポーネントを指定します。指定がない場合はデフォルトで a タグが使用されます。
ref
any
AppNaviDropdown props
dropdownContent必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal
ドロップダウンのコンテンツ
icon
FunctionComponent<BaseProps<T> & { selectedItems: (ComboboxItem<T> & { deletable?: boolean; })[]; selectedItemEllipsis?: boolean; inputValue?: string; onDelete?: (item: ComboboxItem<T>) => void; ... 4 more ...; noResultText?: ReactNode; }<T> & { selectedItems: (ComboboxItem<T> & { deletable?: boolean; })[]; selectedItemEllipsis?: boolean; inputValue?: string; onDelete?: (item: ComboboxItem<T>) => void; ... 4 more ...; noResultText?: ReactNode; } & Omit<...>>ComponentClass<BaseProps<T> & { selectedItems: (ComboboxItem<T> & { deletable?: boolean; })[]; selectedItemEllipsis?: boolean; inputValue?: string; onDelete?: (item: ComboboxItem<T>) => void; ... 4 more ...; noResultText?: ReactNode; }<T> & { selectedItems: (ComboboxItem<T> & { deletable?: boolean; })[]; selectedItemEllipsis?: boolean; inputValue?: string; onDelete?: (item: ComboboxItem<T>) => void; ... 4 more ...; noResultText?: ReactNode; } & Omit<...>, any>
表示するアイコンタイプ
current
falsetrue
アクティブ状態であるかどうか
displayCaret
falsetrue
AppNaviCustomTag props
tag必須
ComponentClass<any, any>FunctionComponent<any>
このボタンのカスタムタグ
icon
FunctionComponent<BaseProps<T> & { selectedItems: (ComboboxItem<T> & { deletable?: boolean; })[]; selectedItemEllipsis?: boolean; inputValue?: string; onDelete?: (item: ComboboxItem<T>) => void; ... 4 more ...; noResultText?: ReactNode; }<T> & { selectedItems: (ComboboxItem<T> & { deletable?: boolean; })[]; selectedItemEllipsis?: boolean; inputValue?: string; onDelete?: (item: ComboboxItem<T>) => void; ... 4 more ...; noResultText?: ReactNode; } & Omit<...>>ComponentClass<BaseProps<T> & { selectedItems: (ComboboxItem<T> & { deletable?: boolean; })[]; selectedItemEllipsis?: boolean; inputValue?: string; onDelete?: (item: ComboboxItem<T>) => void; ... 4 more ...; noResultText?: ReactNode; }<T> & { selectedItems: (ComboboxItem<T> & { deletable?: boolean; })[]; selectedItemEllipsis?: boolean; inputValue?: string; onDelete?: (item: ComboboxItem<T>) => void; ... 4 more ...; noResultText?: ReactNode; } & Omit<...>, any>
表示するアイコンタイプ
current
falsetrue
アクティブ状態であるかどうか
AppNaviDropdownMenuButton props
label必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal
引き金となるボタンラベル
onOpen
() => void
onClose
() => void