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

設定ブロック

Settingsコンポーネントは、ReactとTypeScriptで構築された完全にカスタマイズ可能でアクセシブルな設定インターフェースです。モダンなデザインパターン、柔軟なカスタマイズオプション、設定項目を整理するためのクリーンな階層構造を備えた完全な設定メニューを提供します。

🚀 インストール​

npm install @nodeblocks/frontend-settings-block@0.2.0

📖 使用法​

import {Settings} from '@nodeblocks/frontend-settings-block';
ライブエディター
function SimpleSettings() {
  const items = [
    {
      icon: AccountCircleIcon,
      title: 'プロファイル設定',
      value: '山田太郎',
      onClick: () => console.log('プロファイルがクリックされました'),
    },
    {
      icon: NotificationsIcon,
      title: '通知',
      value: 'オン',
      onClick: () => console.log('通知がクリックされました'),
    },
    {
      icon: LockIcon,
      title: 'パスワードとセキュリティ',
      onClick: () => console.log('セキュリティがクリックされました'),
    },
    {
      icon: LanguageIcon,
      title: '言語',
      value: '日本語',
      onClick: () => console.log('言語がクリックされました'),
    },
    {
      icon: DarkModeIcon,
      title: 'テーマ',
      value: 'ライト',
      onClick: () => console.log('テーマがクリックされました'),
    },
  ];

  return (
    <Settings settingsTitle="設定" items={items}>
      <Settings.Title />
      <Settings.SettingsRows />
    </Settings>
  );
}
結果
Loading...

🔧 プロパティリファレンス​

メインコンポーネントプロパティ​

プロパティ型デフォルト説明
settingsTitlestring必須コンテキストとデフォルトタイトルレンダリングで使用される設定セクションのタイトル
itemsSettingsItem[]必須表示する設定項目の配列
spacingnumber | ResponsiveValue1子要素間のスペーシング
classNamestringundefined設定コンテナのスタイリング用の追加CSSクラス名
sxSxProps<Theme>下記参照カスタムスタイリング用のMUIシステムプロパティ
childrenBlocksOverrideundefinedデフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

デフォルトsx:

{
  bgcolor: 'grey.50',
  p: 2
}

注意: このコンポーネントはすべてのMUI Stackプロパティを継承します。

サブコンポーネント​

Settingsコンポーネントは複数のサブコンポーネントを提供します。すべてのサブコンポーネントは、メインコンポーネントのコンテキストからデフォルト値を受け取り、プロパティを通じてこれらの値をオーバーライドできます。

Settings.Title​

設定セクションのタイトルをレンダリングします。

プロパティ型デフォルト説明
childrenReactNodeコンテキストのsettingsTitleタイトルコンテンツ - 提供されない場合はsettingsTitleにフォールバック
settingsTitlestringコンテキストからタイトルテキスト（コンテキストをオーバーライド）
variantstring'h6'Typographyバリアント
componentElementType'h4'ルートノードに使用されるコンポーネント
sxSxProps<Theme>undefinedカスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Typographyプロパティを継承します。

Settings.SettingsRow​

個々の設定行アイテムをクリック可能なボタンとしてレンダリングします。

プロパティ型デフォルト説明
iconSvgIconComponent必須左側に表示するMUIアイコンコンポーネント
labelstring必須設定行のプライマリテキスト
valuestringundefinedラベルの下に表示されるオプションのセカンダリテキスト
childrenReactNodeデフォルトのラベル/値レンダリングデフォルトのテキストレンダリングをオーバーライドするカスタムコンテンツ
onClick() => voidundefinedクリックハンドラー（ButtonPropsから）
variant'text' | 'outlined' | 'contained''outlined'ボタンバリアント
size'small' | 'medium' | 'large''large'ボタンサイズ
sxSxProps<Theme>下記参照カスタムスタイリング用のMUIシステムプロパティ

デフォルトsx:

{
  border: 0,
  display: 'flex',
  alignItems: 'center',
  px: 2,
  py: 1.5,
  bgcolor: 'background.paper',
  borderRadius: 0,
  borderTop: '1px solid',
  borderColor: theme.palette.divider,
  '&:first-of-type': {
    borderTopLeftRadius: theme.shape.borderRadius * 2,
    borderTopRightRadius: theme.shape.borderRadius * 2,
    borderTop: '1px solid transparent'
  },
  '&:last-of-type': {
    borderBottomLeftRadius: theme.shape.borderRadius * 2,
    borderBottomRightRadius: theme.shape.borderRadius * 2
  },
  '&:hover': {
    outline: '1px solid',
    outlineColor: 'primary.main',
    borderColor: 'transparent',
    zIndex: 1
  }
}

注意: このコンポーネントはすべてのMUI Buttonプロパティを継承します。アイコンはcolor: 'primary.main'でレンダリングされ、右側にChevronRightアイコンが自動的に追加されます。

Settings.SettingsRows​

すべての設定行のコンテナをレンダリングします。

プロパティ型デフォルト説明
itemsSettingsItem[]コンテキストからレンダリングする設定項目の配列 - コンテキストアイテムにフォールバック
childrenReactNode自動生成された行デフォルト設定行レンダリングをオーバーライドするカスタムコンテンツ
sxSxProps<Theme>undefinedカスタムスタイリング用のMUIシステムプロパティ

注意: このコンポーネントはすべてのMUI Stackプロパティを継承します。childrenが提供されない場合、itemsをSettings.SettingsRowコンポーネントにマッピングします。

🎨 設定例​

カスタムタイトルスタイリング​

<Settings.Title 
  variant="h5"
  sx={{ color: 'primary.main', fontWeight: 700 }} 
/>

カスタム設定行スタイリング​

<Settings.SettingsRow
  icon={Person}
  label="プロファイル"
  value="山田太郎"
  onClick={() => console.log('プロファイルがクリックされました')}
  sx={{ 
    bgcolor: 'grey.50',
    '&:hover': { bgcolor: 'primary.light' }
  }}
/>

カスタム設定行コンテナ​

<Settings.SettingsRows
  sx={{
    boxShadow: 1,
    borderRadius: 2,
  }}
/>

カスタムスタイリング​

import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import LanguageIcon from '@mui/icons-material/Language';
import SecurityIcon from '@mui/icons-material/Security';

function CustomStyledSettings() {
  const items = [
    {
      icon: AccountCircleIcon,
      title: '表示名',
      value: '山田太郎',
      onClick: () => console.log('表示名がクリックされました'),
    },
    {
      icon: LanguageIcon,
      title: 'タイムゾーン',
      value: 'UTC-5',
      onClick: () => console.log('タイムゾーンがクリックされました'),
    },
    {
      icon: SecurityIcon,
      title: 'プライバシー',
      value: '公開',
      onClick: () => console.log('プライバシーがクリックされました'),
    },
  ];

  return (
    <Settings
      settingsTitle="一般設定"
      items={items}
      sx={{
        bgcolor: 'grey.900',
        color: 'grey.100',
        p: 3,
        borderRadius: 2,
      }}
    >
      <Settings.Title
        sx={{
          color: 'grey.100',
          fontWeight: 700,
          mb: 2,
        }}
      />
      <Settings.SettingsRows
        sx={{
          '& .MuiButton-root': {
            bgcolor: 'grey.800',
            color: 'grey.100',
            borderRadius: 2,
            justifyContent: 'flex-start',
            p: 2,
            mb: 1,
            '&:hover': {
              bgcolor: 'grey.700',
            },
          },
          '& .MuiTypography-root': {
            color: 'grey.100',
          },
          '& .MuiSvgIcon-root': {
            color: 'primary.light',
          },
        }}
      />
    </Settings>
  );
}

個別設定行​

import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import SecurityIcon from '@mui/icons-material/Security';
import NotificationsIcon from '@mui/icons-material/Notifications';

function SettingsWithIndividualRows() {
  const items = [
    {
      icon: AccountCircleIcon,
      title: 'アカウント',
      onClick: () => console.log('アカウント'),
    },
    {
      icon: SecurityIcon,
      title: 'セキュリティ',
      value: '2FA有効',
      onClick: () => console.log('セキュリティ'),
    },
  ];

  return (
    <Settings settingsTitle="クイック設定" items={items} sx={{p: 3}}>
      <Settings.Title />
      <Settings.SettingsRow icon={AccountCircleIcon} label="アカウント" onClick={() => console.log('アカウント')} />
      <Settings.SettingsRow
        icon={SecurityIcon}
        label="セキュリティ"
        value="2FA有効"
        onClick={() => console.log('セキュリティ')}
      />
      <Settings.SettingsRow
        icon={NotificationsIcon}
        label="通知"
        value="オン"
        onClick={() => console.log('通知')}
        sx={{
          bgcolor: 'primary.light',
          color: 'primary.contrastText',
          '&:hover': {
            bgcolor: 'primary.main',
          },
        }}
      />
    </Settings>
  );
}

🔧 TypeScriptサポート​

包括的な型定義による完全なTypeScriptサポート：

import {Settings} from '@nodeblocks/frontend-settings-block';
import {SvgIconComponent} from '@mui/icons-material';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import LockIcon from '@mui/icons-material/Lock';
import NotificationsIcon from '@mui/icons-material/Notifications';
import DarkModeIcon from '@mui/icons-material/DarkMode';
import LanguageIcon from '@mui/icons-material/Language';
import React from 'react';

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

function TypedSettings() {
  const settingsItems: SettingsItem[] = [
    {
      icon: AccountCircleIcon,
      title: 'プロファイル情報',
      value: '個人情報を編集',
      onClick: (): void => console.log('プロファイルがクリックされました'),
    },
    {
      icon: LockIcon,
      title: 'パスワード',
      value: '30日前に変更',
      onClick: (): void => console.log('パスワードがクリックされました'),
    },
    {
      icon: NotificationsIcon,
      title: '通知',
      value: 'すべて有効',
      onClick: (): void => console.log('通知がクリックされました'),
    },
    {
      icon: DarkModeIcon,
      title: '外観',
      value: 'システムデフォルト',
      onClick: (): void => console.log('外観がクリックされました'),
    },
    {
      icon: LanguageIcon,
      title: '言語',
      value: '日本語 (JP)',
      onClick: (): void => console.log('言語がクリックされました'),
    },
  ];

  return (
    <Settings settingsTitle="ユーザー設定" items={settingsItems} spacing={2} sx={{maxWidth: 500}}>
      <Settings.Title />
      <Settings.SettingsRows />
    </Settings>
  );
}

📝 注意事項​

  • メインコンポーネントはspacing={1}とデフォルトの背景/パディングスタイリングを持つMUI Stackを使用します。
  • Settings.Titleはデフォルトでvariant="h6"とcomponent="h4"を持つMUI Typographyを使用します。
  • Settings.SettingsRowはデフォルトでvariant="outlined"とsize="large"を持つMUI Buttonを使用します。
  • 各行にはアイコン（color: 'primary.main'）、ラベル、オプションの値、およびChevronRight矢印が表示されます。
  • 行のスタイリングにより、最初/最後のアイテムに角丸を持つシームレスなリストが作成されます。
  • ホバー効果には、視覚的なフィードバックのためのプライマリカラーのアウトラインが含まれます。
  • iconプロパティには、実際のMUI SvgIconComponent（@mui/icons-materialからのPerson、Lock、Notificationsなど）が必要です。
  • コンテキスト値（settingsTitle、items）はReact Contextを介して共有され、サブコンポーネントレベルでオーバーライドできます。

React、TypeScript、MUIを使用して❤️で構築されました。