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

Settingsブロック

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

🚀 インストール​

npm install @nodeblocks/frontend-settings-block

📖 使用法​

import {Settings} from '@nodeblocks/frontend-settings-block';
ライブエディター
function BasicSettings() {
  const settingsItems = [
    {
      icon: 'person' as const,
      title: 'プロファイル設定',
      onClick: () => console.log('プロファイルがクリックされました'),
    },
    {
      icon: 'lock' as const,
      title: 'セキュリティ',
      onClick: () => console.log('セキュリティがクリックされました'),
    },
    {
      icon: 'notifications' as const,
      title: '通知',
      onClick: () => console.log('通知がクリックされました'),
    },
  ];

  return (
    <Settings settingsTitle="アカウント設定" items={settingsItems}>
      <Settings.Title>私の設定</Settings.Title>
      <Settings.SettingsRows />
    </Settings>
  );
}
結果
Loading...

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

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

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

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

サブコンポーネント​

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

Settings.Title​

プロパティ型デフォルト説明
childrenReactNodeコンテキストのsettingsTitleタイトルコンテンツ - 提供されない場合はsettingsTitleにフォールバック
classNamestringundefinedタイトルのスタイリング用の追加CSSクラス名

注意: このコンポーネントは標準HTML h4要素のすべてのプロパティを継承します。

Settings.SettingsRow​

プロパティ型デフォルト説明
iconIconType必須設定行の左側に表示するアイコン
onClick() => void必須行のクリックインタラクションを処理する関数
childrenReactNodeundefined設定行テキストとして表示するコンテンツ

注意: このコンポーネントは標準HTML div要素のすべてのプロパティを継承します。

Settings.SettingsRows​

プロパティ型デフォルト説明
itemsSettingsItem[]コンテキストのアイテムレンダリングする設定項目の配列 - 提供されない場合はコンテキストアイテムにフォールバック
childrenReactNode自動生成された行デフォルト設定行レンダリングをオーバーライドするカスタムコンテンツ
classNamestringundefined行コンテナのスタイリング用の追加CSSクラス名

注意: このコンポーネントは標準HTML div要素のすべてのプロパティを継承します。

🔧 TypeScriptサポート​

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

import {Settings} from '@nodeblocks/frontend-settings-block';

// 設定項目構造
interface SettingsItem {
  icon: ComponentProps<typeof Settings.SettingsRow>['icon'];
  title: string;
  onClick: () => void;
}

// 追加機能付きカスタム設定
interface CustomSettingsProps {
  settingsTitle: string;
  items: SettingsItem[];
  onSettingClick?: (item: SettingsItem) => void;
}

const MySettingsPanel = () => {
  const handleProfileSettings = () => {
    console.log('プロファイル設定を開いています');
    // プロファイル設定に移動
  };

  const handleSecuritySettings = () => {
    console.log('セキュリティ設定を開いています');
    // セキュリティ設定に移動
  };

  const settingsItems: SettingsItem[] = [
    {
      icon: 'person',
      title: 'プロファイル情報',
      onClick: handleProfileSettings
    },
    {
      icon: 'lock',
      title: 'プライバシーとセキュリティ',
      onClick: handleSecuritySettings
    },
    {
      icon: 'notifications',
      title: '通知設定',
      onClick: () => console.log('通知')
    }
  ];

  return (
    <Settings
      settingsTitle="アカウント設定"
      items={settingsItems}
      className="custom-settings-container">
      <Settings.Title className="custom-title">
        アカウントを管理
      </Settings.Title>
      <Settings.SettingsRows className="custom-rows" />
    </Settings>
  );
};

// 個別制御付きカスタム設定行
const CustomSettingsExample = () => {
  return (
    <Settings
      settingsTitle="高度な設定"
      items={[]}>
      <Settings.Title>カスタム設定</Settings.Title>
      <div className="custom-settings-section">
        <Settings.SettingsRow
          icon="person"
          onClick={() => console.log('カスタムプロファイルアクション')}>
          プロファイル管理
        </Settings.SettingsRow>
        <Settings.SettingsRow
          icon="notifications"
          onClick={() => console.log('カスタム設定アクション')}>
          アプリケーション設定
        </Settings.SettingsRow>
        </div>
    </Settings>
  );
};

React、TypeScript、モダンWebスタンダードを使用して❤️で構築されました。