Header
アカウント設定やアプリ切替などSmartHR共通の横断機能を提供するヘッダーコンポーネントです。基本はAppHeaderの利用を推奨し、独自のヘッダー構成が必要なときのみHeader単体で使います。
複数のSmartHRのプロダクトを使っていたとしても同じSmartHRブランドの製品であることをユーザーが認知できるよう、共通のHeaderを提供します。
レイアウト
AppHeaderを参照してください。
モバイル
モバイルでの表示はAppHeaderコンポーネントが対応します。 AppHeaderのモバイルを参照してください。
Props
Header props
logo
ReactElement<any, string | JSXElementConstructor<any>>
ロゴ
logoHref
string
ロゴリンク
featureName
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal
機能名（enableNew と合わせて使います）
apps
Category[]
機能群（enableNew と合わせて使います）
tenants
Tenant[]
テナント一覧
currentTenantId
string
現在のテナント ID
onTenantSelect
(id: string) => void
テナントが選択された時に発火するコールバック関数
enableNew非推奨
false true
@deprecated internal-ui から利用するので使わないでください。
HeaderLink props
enableNew
false true
HeaderDropdownMenuButton props
trigger必須
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal { children: ReactNode; size?: ButtonProps; onlyIcon?: boolean | { component?: ComponentType<any>; }; }
引き金となるボタン
children必須
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal ReactElement<{ size?: "S" | "M"; disabledReason?: { icon?: FunctionComponent<{}>; message: ReactNode; }; prefix?: ReactNode; suffix?: ReactNode; wide?: boolean; variant?: Variant; loading?: boolean; } & { ...; } & Omit<...> & RefAttributes<...>, string | JSXElementConstructor<...>> ReactElement<Omit<any, "disabledReason" | "variant"> & { elementAs?: ElementType; variant?: "text" | "primary" | "secondary" | "danger" | "skeleton"; inactiveReason?: { ...; }; } & { form?: string; slot?: string; style?: CSSProperties; title?: string; ref?: Ref<HTMLButtonElement>; key?: Key; defaultChecked?: boolean; defaultValue?: string | ... 1 more ... | readonly string[]; ... 266 more ...; formTarget?: string; }<...> & ElementRefProps<...>, string | JSXElementConstructor<...>> ReactElement<{ targetId: string; onClick?: (open: () => void) => void; children: Omit<ReactElement<any, string | JSXElementConstructor<any>>, "aria-controls" | "aria-haspopup" | "onClick">; }, string | JSXElementConstructor<...>> ReactNode | ReactElement<any, string | JSXElementConstructor<any>> | ReactElement<any, string | JSXElementConstructor<any>> | ReactElement<...>[]
操作群
onOpen
() => void
ドロップダウンメニューが開かれた際のイベント
onClose
() => void
ドロップダウンメニューが閉じられた際のイベント
ref
(instance: HTMLButtonElement) => void RefObject<HTMLButtonElement>