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

ViewOrganizationブロック

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

インストール​

npm install @nodeblocks/frontend-view-organization-block

必要なもの​

項目用途
labels.headerTitleヘッダーの組織名
data会社フィールドを Record<string, ReactNode>（行キーがラベルになる）または値のみの行用の ReactNode[] として渡す
labels.subheaderTitle (任意)ヘッダー下のセカンダリ行（例: 設立日やタグライン）
labels.headerActionButton + headerAction (任意)アウトラインのヘッダーボタンのラベルとクリックハンドラー
layout (任意)one-column はキー/バリュー行を縦に積む; two-column は横並びで表示（デフォルト）
組織データはアプリ側で管理する

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

コード例​

ライブエディター
function Example() {
  const labels = {
    headerTitle: 'Co-Lift Inc.',
  };

  const data = {
    業種: 'サービス',
    ウェブサイト: 'https://www.co-lift.com/',
    概要:
      'Co-Liftは、戦略から開発まで、ビジネス資産をプロダクトのアイデアに変える本質的な視点に焦点を当てています。',
    事業重点:
      'フルスタックエンジニアリングによるエンドツーエンドのプロダクト開発で、顧客の課題を解決します。',
    設立: '2017年9月11日',
    経営陣: '木下 寛太、CEO · 定島 螢吾、CEO',
  };

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

主要プロパティ​

コアプロパティ​

プロパティ型必須デフォルト説明
dataRecord<string, ReactNode> | ReactNode[]いいえundefined行コンテンツ: オブジェクトのキーがフィールドラベルになる; 配列は値のみの行をレンダリング
labels{ headerTitle?: string; headerActionButton?: string; subheaderTitle?: string }いいえundefinedヘッダータイトル、任意のアクションボタンラベル、サブヘッダーのテキスト

コンテンツプロパティ​

プロパティ型必須デフォルト説明
labels.headerTitlestringいいえundefinedViewOrganization.Header のメイン見出し
labels.subheaderTitlestringいいえundefinedヘッダー下のセカンダリ行（ViewOrganization.Subheader）
labels.headerActionButtonstringいいえundefinedアウトラインのヘッダーボタンのラベル; labels.headerActionButton または headerAction が設定されている場合（または ViewOrganization.HeaderActionButton に渡されている場合）に表示
headerAction() => voidいいえundefinedデフォルトのヘッダーアクションボタンがクリックされたときに呼び出される（ボタンの onClick の後）
layout'one-column' | 'two-column'いいえ'two-column'行レイアウト: キー/バリューを縦に積む vs 横並びの列

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

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

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

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

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

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

デフォルト UI ブロック​

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

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

TypeScript​

import * as React from 'react';
import { ViewOrganization } from '@nodeblocks/frontend-view-organization-block';
import type { ReactNode } from 'react';

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

type OrganizationData = Record<string, ReactNode>;

export function OrganizationDetailView() {
  const labels: OrganizationLabels = {
    headerTitle: 'Co-Lift Inc.',
    subheaderTitle: '2017年9月11日設立',
    headerActionButton: '組織を編集',
  };

  const data: OrganizationData = {
    本社: '東京都渋谷区',
    電話: '03-6821-0661',
    業種: 'サービス',
    ウェブサイト: 'https://www.co-lift.com/',
  };

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