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

ViewAttributeSelectionブロック

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

インストール​

npm install @nodeblocks/frontend-view-attribute-selection-block@0.1.0

必要なもの​

項目用途
labels.headerTitleヘッダーのセクションタイトル（デフォルト 職種）
data選択された属性。値のみの行には ReactNode[]、各行にラベルが必要な場合は Record<string, ReactNode>
labels.headerActionButton + headerAction（任意）アウトラインのヘッダーボタンのラベル（デフォルト 編集）とクリックハンドラー
labels.subheaderTitle（任意）ヘッダー下の補助行
layout（任意）one-column はキー/値の行を縦に積み、two-column は横並びに表示（デフォルト）
属性データはアプリ側で管理する

ViewAttributeSelection は選択状態を内部で保持しません — ページから labels、data、任意の headerAction を渡してください。行が値のみの場合（選択された職種のリストなど）は ReactNode[] を使用します。各属性カテゴリに独自のラベルが必要な場合（例: one-column レイアウトのスキル領域）はオブジェクトを使用します。ヘッダーの編集ボタンを表示するには labels.headerActionButton と headerAction を設定します。

コード例​

ライブエディター
function Example() {
  const data = [
    <Box key="roles" sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
      <Typography variant="body2">フロントエンドエンジニア（未選択）</Typography>
      <Typography variant="body2">バックエンドエンジニア（5年）</Typography>
      <Typography variant="body2">データベースエンジニア（5年）</Typography>
    </Box>,
  ];

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

主要プロパティ​

コアプロパティ​

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

コンテンツプロパティ​

プロパティ型必須デフォルト説明
labels.headerTitlestringいいえ職種ViewAttributeSelection.Header のメイン見出し
labels.subheaderTitlestringいいえ-ヘッダー下の補助行（ViewAttributeSelection.Subheader）
labels.headerActionButtonstringいいえ編集アウトラインのヘッダーボタンのラベル。labels.headerActionButton または headerAction が設定されている場合に表示されます。
headerAction() => voidいいえ-デフォルトのヘッダーアクションボタンがクリックされたときに呼び出されます。
layout'one-column' | 'two-column'いいえ'two-column'行レイアウト: キー/値を縦に積むか、横並びの列にするか

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

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

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

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

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

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

デフォルト UI ブロック​

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

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

TypeScript​

import * as React from 'react';
import { ViewAttributeSelection } from '@nodeblocks/frontend-view-attribute-selection-block';
import type { ReactNode } from 'react';

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

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

export function AttributeSelectionDetailView() {
  const labels: AttributeSelectionLabels = {
    headerTitle: '担当職種',
    headerActionButton: '職種を編集',
  };

  const data: AttributeSelectionData = [
    <div key="roles">
      <div>フロントエンドエンジニア（未選択）</div>
      <div>バックエンドエンジニア（5年）</div>
    </div>,
  ];

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