SmartHR Design System

SideNav

同一画面内のビューを縦方向に並べて切り替えるためのナビゲーションコンポーネントです。「コレクションとシングルの2カラム」ページレイアウトのコレクション領域で一覧から選んだオブジェクトの詳細を切り替えるとき、設定画面などで1つの画面内に並ぶビューを切り替えるときに使います。

使用上の注意

TabBarで代用できないか検討する

SideNavは、異なるオブジェクトやビューを縦方向にスタックし、切り替えるためのコンポーネントです。スタックするアイテムが多いときやナビゲーション機能を持たせたいときに適していますが、そうでない場合はTabBarの使用を検討してください。

入れ子で使用しない

SideNavの影響範囲内のビューでは、SideNavの使用を避けてください。SideNav内のビューを分割したい場合はTabBarを使用してください。また、TabBar内でビューを分割したい場合はSideNavを使用してください。

モバイル

SideNavをドロワーで表示できるよう、smarthr-uiでの対応を検討中です。

SideNavを使った2カラムのレイアウトは広い横幅を必要とするため、画面の横幅が狭いモバイルには適していません。ページを分割するか、SideNavをドロワーで表示してください。詳しくは、ページレイアウトを参照してください。

Props

SideNav props

items非推奨
SideNavItemButtonProps[]

各アイテムのデータの配列 @deprecated SideNavItemButton を使ってください

size
"S" "M"

各アイテムの大きさ

onClick
(e: MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>, id: string) => void

アイテムを押下したときに発火するコールバック関数

className
string

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

rounded
false true "all" "top" "bottom" "left" "right"

SideNavItemAnchor props

title非推奨
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

アイテムのタイトル @deprecated SideNav で items を使う時の props です。children を使ってください。

size
"S" "M"

アイテムの大きさ

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

タイトルのプレフィックスの内容。通常、StatusLabelやIconの配置に用います。

current
false true

選択されているアイテムかどうか

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

タイトルのサフィックスの内容。通常、Prefixを使用済みの場合にStatusLabelやChipの配置に用います。

onClick
(e: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
href必須
string
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 タグが使用されます。

SideNavItemButton props

title非推奨
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

アイテムのタイトル @deprecated SideNav で items を使う時の props です。children を使ってください。

size
"S" "M"

アイテムの大きさ

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

タイトルのプレフィックスの内容。通常、StatusLabelやIconの配置に用います。

current
false true

選択されているアイテムかどうか

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

タイトルのサフィックスの内容。通常、Prefixを使用済みの場合にStatusLabelやChipの配置に用います。

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