AppNavi
プロダクト内の主要な機能を切り替えるためのコンポーネントです。機能の切り替えだけでなく、プロダクト全体に影響を及ぼす頻繁に行なう操作を埋め込めます。
レイアウトなどはデザインパターンのヘッダーを参照してください。
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
ドロップダウンにキャレットを表示するかどうか
AppNaviButton props
icon
FunctionComponent<Props> ComponentClass<Props, any>
表示するアイコンタイプ
current
false true
アクティブ状態であるかどうか
onClick
(e: MouseEvent<HTMLButtonElement, MouseEvent>) => void
クリックイベントのハンドラ
AppNaviAnchor props
href
string
アンカーの href
icon
FunctionComponent<Props> ComponentClass<Props, any>
表示するアイコンタイプ
current
false true
アクティブ状態であるかどうか
elementAs
"symbol" "object" "map" "filter" "base" "a" "abbr" "address" "area" "article" "aside" "audio" "b" "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" "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" "foreignObject" "g" "image" "line" "linearGradient" "marker" "mask" "metadata" "mpath" "path" "pattern" "polygon" "polyline" "radialGradient" "rect" "set" "stop" "switch" "text" "textPath" "tspan" "use" "view" ComponentClass<any, any> FunctionComponent<any>
next/link などのカスタムコンポーネントを指定します。指定がない場合はデフォルトで a タグが使用されます。
ref
any
AppNaviDropdown props
dropdownContent必須
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal
ドロップダウンのコンテンツ
icon
FunctionComponent<Props> ComponentClass<Props, any>
表示するアイコンタイプ
current
false true
アクティブ状態であるかどうか
displayCaret
false true
AppNaviCustomTag props
tag必須
ComponentClass<any, any> FunctionComponent<any>
このボタンのカスタムタグ
icon
FunctionComponent<Props> ComponentClass<Props, any>
表示するアイコンタイプ
current
false true
アクティブ状態であるかどうか