上に戻るリンク

一階層上のコンテンツに誘導する役割を持ち、コンテンツ間の階層構造を認知させるためのナビゲーションです。

正しくは「上階層に戻るリンク」ですが、呼びにくいため「上に戻るリンク」としています。

構成

上に戻るリンクは、次の要素で構成されています。

  1. リンクテキスト
  2. アイコンで伝える。

上に戻るリンクの構成の紐付け図

1. リンクテキスト

基本的に「{一階層上の画面名}に戻る」と表記し、TextLinkを用います。

パーマリンクで直接遷移してきた場合など、一階層上のコンテンツの特定や類推が難しい場合は、下記のように「{一階層上の画面名}{一階層上のコンテンツの種類}に戻る」と表記します。

一階層上のコンテンツリンクテキスト
コレクション
よくあるテーブル
{一階層上の画面名}一覧に戻る「権限一覧に戻る」
(「権限に戻る」だけでは、上の階層に権限に関するどのコンテンツかを類推しにくいため)

2. アイコン

階層構造を認知させるためにTextLinkprefixを使い、リンクテキストの左側に 左矢印 アイコン(FaArrowLeftIcon)を置きます。
TextLinkが使えない場合は、アイコンの色にTEXT_LINKを使います。

レイアウト

上に戻るリンクのレイアウトは次の通りです。
※ヘッダーとの間隔は余白を参照してください。

ドラッグして幅を変更
ドラッグして高さを変更
import styled, { css } from 'styled-components'
import { FaArrowLeftIcon, Heading, Stack, Text, TextLink } from 'smarthr-ui'
type Props = {
withAppNavi: boolean
withUpwardLink: boolean
}
export const UpwardNavigation: React.FC<Props> = ({ withAppNavi, withUpwardLink }) => (
<Wrapper>
{withUpwardLink && (
<UpwardLinkWrapper withAppNavi={withAppNavi}>
<TextLink href="#" prefix={<FaArrowLeftIcon />}>
分析レポートに戻る
</TextLink>
</UpwardLinkWrapper>
)}
<Stack>
<Heading>分析対象の従業員項目</Heading>
<Text as="p">
一部の数値データにおいて、クロス集計する際の集計単位を変更できます例えば「年齢」を「60」以上をまとめる、「20」以下をまとめる、「10」単位でまとめるのように設定すると、以下のように出力されます。
</Text>
</Stack>
</Wrapper>
)
const Wrapper = styled(Stack).attrs({ gap: 1.5 })`
${({ theme: { space } }) => css`
margin-inline: auto;
padding: ${space(2)} ${space(1.5)};
max-width: 80em;
`}
`
export const UpwardLinkWrapper = styled.div<{ withAppNavi?: boolean }>`
${({ withAppNavi = true, theme: { leading, space } }) => css`
/* アイコン(1)とその間隔(0.25)分をずらしている */
transform: translateX(${space(-1.25)});
/* Stack の margin を上書くために詳細度を上げる
* https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity */
&&& {
/* UpwardLink がない場合にレイアウトが崩れないように negative margin で制御 */
margin-block-start: ${space(withAppNavi ? -0.5 : -1)};
}
line-height: ${leading.NONE};
@media (max-width: 480px) {
transform: revert;
}
`}
`
render(<UpwardNavigation withAppNavi="false" withUpwardLink="true" />)

余白

画面タイトル24pxの余白をとります。 ヘッダーとの余白は、周囲のナビゲーションを考慮して以下から選択します。

画面パターンヘッダーとの余白画面例備考
A. ヘッダーのみ16px申請、給与明細
B. ヘッダー+AppNavi24pxオプション機能ヘッダーとAppNaviとは異なるグループであることを強調するため
C. 基本機能の共通設定22px基本機能の共通設定基本機能のサイドナビゲーションとヘッダーの余白と揃えるため(画面例

インデント

基本的に、リンクテキストとメインコンテンツの左端を揃えます。

左矢印 アイコンとリンクテキストとの余白(4px)分だけ、メインコンテンツより左に飛び出して配置します。 これは「一階層上に遷移するリンクである」ことをユーザーに示し、認知を促すための装飾です。

ただし、以下に示すように、左矢印 アイコンのインデント分の余白を十分に確保できない場合は例外とします。

例外1. メインコンテンツにサイドナビゲーションが隣接する場合

基本機能の共通設定のように、メインコンテンツにサイドナビゲーションが隣接する場合は、左矢印 アイコンをメインコンテンツの左端に合わせて配置します。

スクリーンショット:見出しや本文といったメインコンテンツの左端とアイコンの左端が揃っている

例外2. モバイルでの表示

モバイル(スマートフォンや画面幅が狭い場合)では、左矢印 アイコンをメインコンテンツの左端に合わせて配置します。 (参考:メディアクエリ

画面幅が狭い場合のスクリーンショット:見出しや本文といったメインコンテンツの左端とアイコンの左端が揃っている