AppNavi
アプリケーション内の主要機能を切り替えるグローバルナビゲーションコンポーネントです。機能間を行き来するとき、機能切替以外でアプリ全体に関わる頻繁な操作を常設するときに使います。
レイアウトなどはAppHeaderを参照してください。
モバイル
モバイルでの表示はAppHeaderコンポーネントが対応します。 AppHeaderのモバイルを参照してください。
Props
AppNavi props
label
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal
ラベルのテキスト
buttons非推奨
(AppNaviDropdownProps | AppNaviCustomTagProps | AppNaviButtonProps | AppNaviAnchorProps)[]
表示するボタンの Props の配列 @deprecated AppNaviButton などのコンポーネントを組み合わせて組み上げてください
displayDropdownCaret非推奨
false true
ドロップダウンにキャレットを表示するかどうか @deprecated キャレットの省略は非推奨です
additionalArea
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal
追加の領域
AppNaviButton props
icon
FunctionComponent<any> ComponentClass<any, any>
表示するアイコンタイプ
current
false true
アクティブ状態であるかどうか
onClick
(e: MouseEvent<HTMLButtonElement, MouseEvent>) => void
クリックイベントのハンドラ
AppNaviAnchor props
href
string
アンカーの href
icon
FunctionComponent<any> ComponentClass<any, any>
表示するアイコンタイプ
current
false true
アクティブ状態であるかどうか
elementAs
"symbol" "object" ComponentClass<any, any> FunctionComponent<any> "input" "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" "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必須
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal
ドロップダウンのコンテンツ
icon
FunctionComponent<any> ComponentClass<any, any>
表示するアイコンタイプ
current
false true
アクティブ状態であるかどうか
displayCaret
false true
AppNaviCustomTag props
tag必須
ComponentClass<any, any> FunctionComponent<any>
このボタンのカスタムタグ
icon
FunctionComponent<any> ComponentClass<any, any>
表示するアイコンタイプ
current
false true
アクティブ状態であるかどうか