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

ViewBasicInformationブロック

ViewBasicInformation は、MUI 上に構築されたキー・バリュー表示ブロックで、ヘッダー（タイトルと任意のアクションボタン）、任意のサブヘッダーを備えています。

インストール​

npm install @nodeblocks/frontend-view-basic-information-block

必要なもの​

項目用途
labels.headerTitleヘッダーのメイン見出し（デフォルト 基本情報）
dataフィールド行を Record<string, ReactNode>（行キーがラベルになる）または値のみの行用の ReactNode[] として渡す
labels.headerActionButton + headerAction (任意)アウトラインのヘッダーボタンのラベル（デフォルト 編集）とクリックハンドラー
labels.subheaderTitle (任意)ヘッダー下のセカンダリ行
基本情報データはアプリ側で管理する

ViewBasicInformation は状態を保持しません — ページから labels、data、任意の headerAction を渡してください。オブジェクト形式の data のキーが行ラベルになり、値は文字列または React ノード（複数行テキスト、リンク、カスタムレイアウト）にできます。labels.headerActionButton と headerAction を設定すると、ヘッダーアクションボタンが表示されます。

コード例​

ライブエディター
function Example() {
  const data = {
    氏名: (
      <div>
        <div>Hanako Iwata</div>
        <div>IWATA HANAKO</div>
      </div>
    ),
    住所: '1-1-1 Higashiyoshinocho, Tokushima-shi, Tokushima 771-0801',
    電話番号: '+81 90-1111-1111',
  };

  return <ViewBasicInformation data={data} />;
}
結果
Loading...

主要プロパティ​

コアプロパティ​

プロパティ型必須デフォルト説明
dataRecord<string, ReactNode> | ReactNode[]いいえ{ 氏名: <></>, 住所: <></>, 連絡先電話番号: <></> }行コンテンツ: オブジェクトのキーがフィールドラベルになる; 配列は値のみの行をレンダリング
labels{ headerTitle?: string; headerActionButton?: string; subheaderTitle?: string }いいえ{ headerTitle: '基本情報', headerActionButton: '編集' }ヘッダータイトル、任意のアクションボタンラベル、任意のサブヘッダーのテキスト

コンテンツプロパティ​

プロパティ型必須デフォルト説明
labels.headerTitlestringいいえ基本情報ViewBasicInformation.Header のメイン見出し
labels.subheaderTitlestringいいえundefinedヘッダー下のセカンダリ行（ViewBasicInformation.Subheader）
labels.headerActionButtonstringいいえ編集アウトラインのヘッダーボタンのラベル; labels.headerActionButton または headerAction が設定されている場合（または ViewBasicInformation.HeaderActionButton に渡されている場合）に表示
headerAction() => voidいいえundefinedデフォルトのヘッダーアクションボタンがクリックされたときに呼び出される

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

プロパティ型必須デフォルト説明
childrenBlocksOverride | ReactNodeいいえundefined複合 JSX の子、または blocks と blockOrder を返す関数オーバーライド
classNamestringいいえundefinedルートスタックのクラス名（nbb-view-basic-information）
sxSxPropsいいえ[{ margin: 'auto' }, ...sx]ルートスタック用の MUI システムスタイル; デフォルトレンダーは margin: 'auto' を先頭に追加

ViewBasicInformation は StackProps（children を除く）を継承します。デフォルトの defaultBlockOrder: header、subheader、itemList、item、itemKey、itemValue。

サブコンポーネントのプロパティ​

サブコンポーネントはコンテキストから読み取り、同じコンテンツキーをプロパティとして渡すとローカルで上書きできます。

サブコンポーネント主要プロパティ継承ベース
ViewBasicInformation.Headerlabels（headerTitle、headerActionButton）、headerAction、children、className、sxStackPropsStack + Typography + 任意の ViewBasicInformation.HeaderActionButton
ViewBasicInformation.HeaderActionButtonlabels（headerActionButton）、headerAction、children、className、onClickButtonPropsButton（variant="outlined"、size="medium"）
ViewBasicInformation.Subheaderlabels（subheaderTitle、headerTitle、headerActionButton）、children、className、sxStackPropsStack + Typography
ViewBasicInformation.ItemListdata、children、className、sxListPropsList（component="dl"）+ ViewBasicInformation.Item 行
ViewBasicInformation.Itemchildren、className、sxListItemPropsListItem
ViewBasicInformation.Item.Keychildren、className、sxTypographyPropsTypography（component="dt"、variant="subtitle1"）
ViewBasicInformation.Item.Valuechildren、className、sxTypographyPropsTypography（component="dd"、variant="body2"）

デフォルト UI ブロック​

ブロックベース備考
ViewBasicInformation（ルート）Stackspacing={3}、margin: 'auto' の縦レイアウト（nbb-view-basic-information）
header（ViewBasicInformation.Header）Stacklabels.headerTitle、labels.headerActionButton、またはカスタム children が設定されている場合にレンダリング; headerAction または labels.headerActionButton が設定されている場合は ViewBasicInformation.HeaderActionButton を含む
subheader（ViewBasicInformation.Subheader）Stacklabels.subheaderTitle またはカスタム children が設定されている場合にレンダリング
itemList（ViewBasicInformation.ItemList）Listdata オブジェクトのエントリまたは配列の値をキー/バリュー行にマッピング

デフォルトのルートレンダリング順序: header → subheader → itemList。

TypeScript​

import * as React from 'react';
import { ViewBasicInformation } from '@nodeblocks/frontend-view-basic-information-block';
import type { ReactNode } from 'react';

type BasicInformationLabels = {
  headerTitle?: string;
  headerActionButton?: string;
  subheaderTitle?: string;
};

type BasicInformationData = Record<string, ReactNode> | ReactNode[];

export function BasicInformationDetailView() {
  const labels: BasicInformationLabels = {
    headerTitle: '基本情報',
    headerActionButton: '編集',
  };

  const data: BasicInformationData = {
    氏名: 'Hanako Iwata',
    住所: '1-1-1 Higashiyoshinocho, Tokushima-shi, Tokushima 771-0801',
    電話番号: '+81 90-1111-1111',
  };

  return (
    <ViewBasicInformation
      labels={labels}
      data={data}
      headerAction={() => {
        /* 遷移または編集ダイアログを開く */
      }}
    />
  );
}