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