smarthr-ui-side-nav · Design

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

import

import { SideNavItemButton, SideNavItemAnchor, SideNav } from 'smarthr-ui'

Props 名	型	デフォルト値	必須	説明
title	ReactNode	-	-	アイテムのタイトル @deprecated SideNav で items を使う時の props です。children を使ってください。
size	"S" \| "M"	-	-	アイテムの大きさ
prefix	ReactNode	-	-	タイトルのプレフィックスの内容。通常、StatusLabelやIconの配置に用います。
current	boolean	-	-	選択されているアイテムかどうか
suffix	ReactNode	-	-	タイトルのサフィックスの内容。通常、Prefixを使用済みの場合にStatusLabelやChipの配置に用います。
onClick	(e: MouseEvent<HTMLButtonElement, MouseEvent>) => void	-	-	-

Props 名	型	デフォルト値	必須	説明
title	ReactNode	-	-	アイテムのタイトル @deprecated SideNav で items を使う時の props です。children を使ってください。
size	"S" \| "M"	-	-	アイテムの大きさ
prefix	ReactNode	-	-	タイトルのプレフィックスの内容。通常、StatusLabelやIconの配置に用います。
current	boolean	-	-	選択されているアイテムかどうか
suffix	ReactNode	-	-	タイトルのサフィックスの内容。通常、Prefixを使用済みの場合にStatusLabelやChipの配置に用います。
onClick	(e: MouseEvent<HTMLAnchorElement, MouseEvent>) => void	-	-	-
href	string	-	✓	-
elementAs	ElementType	-	-	next/link などのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。

Props 名	型	デフォルト値	必須	説明
items	SideNavItemButtonProps[]	-	-	各アイテムのデータの配列 @deprecated SideNavItemButton を使ってください
size	"S" \| "M"	M	-	各アイテムの大きさ
onClick	(e: MouseEvent<HTMLAnchorElement \| HTMLButtonElement, MouseEvent>, id: string) => void	-	-	アイテムを押下したときに発火するコールバック関数
className	string	-	-	コンポーネントに適用するクラス名
rounded	boolean \| "all" \| "top" \| "bottom" \| "left" \| "right"	-	-	-

SideNav に直接関連する eslint-plugin-smarthr のルールは現時点ではありません。

[avoid] SideNav の影響範囲内のビューで SideNav を使わない
- SideNav 内のビューを分割したい場合は TabBar を使う
- TabBar 内でビューを分割したい場合は SideNav を使う