メインコンテンツまでスキップ

Settingsブロック

Settings は、MUI 上に構築された設定メニューレイアウトで、アカウントや設定に関する操作のためのクリック可能な行を備えています。

インストール​

npm install @nodeblocks/frontend-settings-block

必要なもの​

項目用途
settingsTitleタイトルブロックに表示される見出しで、コンテキスト経由で渡される
itemsレンダリングする行（アイコン、タイトル、任意の value、クリックハンドラー）
children (任意)BlocksOverride | ReactNode

items の各項目は次をサポートします:

フィールド型必須説明
iconSvgIconComponentはい行の左側に表示する MUI アイコンコンポーネント
titlestringはい行のプライマリラベル
valuestringいいえタイトル下に表示するセカンダリテキスト
onClick() => voidはい行がクリックされたときに呼び出される
MUI アイコンを渡す

@mui/icons-material のアイコンコンポーネントを渡してください（例: PersonOutlined）。

コード例​

ライブエディター
function Example() {
  const [lastEvent, setLastEvent] = React.useState('準備完了');
  const items = [
    {
      icon: PersonOutlined,
      title: 'ユーザー名',
      value: 'johndoe',
      onClick: () => setLastEvent('ユーザー名がクリックされました'),
    },
    {
      icon: EmailOutlined,
      title: 'メール',
      value: 'john.doe@example.com',
      onClick: () => setLastEvent('メールがクリックされました'),
    },
    {
      icon: LockOutlined,
      title: 'パスワード',
      value: '••••••••',
      onClick: () => setLastEvent('パスワードがクリックされました'),
    },
  ];

  return (
    <>
      <Settings settingsTitle="アカウント設定" items={items} />
      <div style={{marginTop: 8, fontSize: 12, color: '#666'}}>{lastEvent}</div>
    </>
  );
}
結果
Loading...

主要プロパティ​

コアプロパティ​

プロパティ型必須デフォルト説明
settingsTitlestringはい-設定セクションのタイトル。children を省略したときに Settings.Title で使用される
itemsSettingsItem[]はい-Settings.SettingsRows でレンダリングされる行（上記の形状を参照）

レイアウトと構成プロパティ​

プロパティ型必須デフォルト説明
childrenBlocksOverride | ReactNodeいいえundefined複合サブコンポーネント、またはブロックオーバーライド関数
classNamestringいいえundefinedルートコンテナのクラス名（nbb-settings も適用されます）
sxSxPropsいいえパネルのパディングと #F3F3F3 背景ルート Stack 用の MUI システムスタイル

Settings は StackProps（children を除く）を継承するため、ルートでは標準のレイアウトプロパティをサポートします。デフォルトのブロック順序は title → settingsRows → settingsRow です。ルートは settingsRow をデフォルト描画から除外します。これはオーバーライド用のテンプレート行だからです。

サブコンポーネントはコンテキストから値を読み取り、部分的なオーバーライドを受け付けます:

  • Settings.Title — Typography のプロパティ。children のデフォルトはコンテキストの settingsTitle（variant="h6"、component="h4"）
  • Settings.SettingsRows — Stack のプロパティ。任意の items でコンテキストをオーバーライド可能。children で自動生成行を置き換え可能
  • Settings.SettingsRow — Button のプロパティに加え、必須の icon（SvgIconComponent）と label。任意の value と children でカスタム行コンテンツを指定可能

デフォルト UI ブロック​

ブロックベース備考
Settings (ルート)Stackレスポンシブな間隔、パディング、#F3F3F3 背景を持つ設定パネルラッパー
Settings.TitleTypographyセクション見出し（variant="h6"、component="h4"）
Settings.SettingsRowsStackitems を Settings.SettingsRow インスタンスにマッピング
Settings.SettingsRowButton + Stack + Typography + ChevronRightアイコン、ラベル、任意の value、末尾のシェブロンを備えたアウトライン行

TypeScript​

import {Settings} from '@nodeblocks/frontend-settings-block';
import type {SvgIconComponent} from '@mui/icons-material';

type SettingsItem = {
  icon: SvgIconComponent;
  title: string;
  value?: string;
  onClick: () => void;
};

function AccountSettingsPanel({rows}: {rows: SettingsItem[]}) {
  return <Settings settingsTitle="アカウント設定" items={rows} />;
}