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

ドロップダウンにキャレットを表示するかどうか @deprecated キャレットの省略は非推奨です

additionalArea
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

追加の領域

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

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