設定SettingsExperimental

ナビとフォームエリアのある設定ページレイアウトです。

プレビュー

状態とバリエーション

SettingsTemplate の差し替え口は title・description・navigation の3つです。左の項目一覧は省略でき、そのときは本文が全幅に広がります。

見出しは既定のまま

title と description を渡さないと、組み込みの英語の見出しが出ます。1画面しか無い設定にはこれで足ります。

Settings

プロフィール

ここで変えた内容は、あなたが参加している全ての場所に反映されます。

見出しを差し替える

title と description は文字列で受け取ります。組織の設定など、扱う対象が個人以外のときに言い換えます。

組織の設定

プロフィール

ここで変えた内容は、あなたが参加している全ての場所に反映されます。

項目一覧を添える

navigation に行を渡すと、広い画面では左に寄せた一覧になり、狭い画面では見出しの下に積まれます。設定が複数ページに分かれたら使います。

Settings

プロフィール

ここで変えた内容は、あなたが参加している全ての場所に反映されます。

Props

表は横にスクロールできます
プロパティ型初期値説明
titlestring"Settings"The main title displayed at the top of the settings page.
descriptionstring"Manage your account settings and preferences."A short description displayed below the title.
navigationReact.ReactNode-Navigation items displayed in the sidebar.
childrenReact.ReactNode-The main settings form content.
classNamestring-Additional classes for the root container.

Usage

import { SettingsTemplate, Button } from "@gunjo/ui";

export function SettingsPage() {
  return (
    <SettingsTemplate
        title="Settings"
        navigation={
            <nav className="flex flex-col space-y-1">
                <Button variant="ghost" className="justify-start">Profile</Button>
                <Button variant="ghost" className="justify-start">Account</Button>
            </nav>
        }
    >
        <div className="space-y-6">
            <h3 className="text-lg font-medium">Profile</h3>
            {/* Form Content */}
        </div>
    </SettingsTemplate>
  )
}

使用コンポーネント

SettingsTemplateButtonInputLabel

関連コンポーネント

DashboardTemplateFormNavRowTabs