Skip to main content

View Attribute Selection Block

ViewAttributeSelection is a key-value view block built on MUI with a header (title and optional action button), optional subheader.

Installation​

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

What You Need​

ItemWhy it matters
labels.headerTitleSection title in the header (default 職種)
dataSelected attributes as ReactNode[] for value-only rows, or Record<string, ReactNode> when each row needs a label
labels.headerActionButton + headerAction (optional)Outlined header button label (default 編集) and click handler
labels.subheaderTitle (optional)Secondary line under the header
layout (optional)one-column stacks key/value rows; two-column shows them side by side (default)
Attribute data lives in your app

ViewAttributeSelection does not own selection state — pass labels, data, and optional headerAction from your page. Use a ReactNode[] when rows are value-only (typical for a list of selected roles); use an object when each attribute category needs its own label (for example skill areas in one-column layout). Set labels.headerActionButton and headerAction to show the header edit button.

Code Examples​

Live Editor
function Example() {
  const data = [
    <Box key="roles" sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
      <Typography variant="body2">Frontend Engineer (not selected)</Typography>
      <Typography variant="body2">Backend Engineer (5 years)</Typography>
      <Typography variant="body2">Database Engineer (5 years)</Typography>
    </Box>,
  ];

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

Important Props​

Core Props​

PropTypeRequiredDefaultDescription
dataRecord<string, ReactNode> | ReactNode[]No[]Row content: object keys become field labels; arrays render value-only rows
labels{ headerTitle?: string; headerActionButton?: string; subheaderTitle?: string }No{} (merged with block defaults below)Header title, optional action button label, and subheader copy

Content Props​

PropTypeRequiredDefaultDescription
labels.headerTitlestringNo職種Main heading in ViewAttributeSelection.Header
labels.subheaderTitlestringNoundefinedSecondary line under the header (ViewAttributeSelection.Subheader)
labels.headerActionButtonstringNo編集Label for the outlined header button; shown when labels.headerActionButton or headerAction is set.
headerAction() => voidNoundefinedInvoked when the default header action button is clicked.
layout'one-column' | 'two-column'No'two-column'Row layout: stacked key/value vs side-by-side columns

Layout and Composition Props​

PropTypeRequiredDefaultDescription
childrenBlocksOverride | ReactNodeNoundefinedCompound JSX children or function override returning blocks and blockOrder
classNamestringNoundefinedClass name on the root stack (nbb-view-attribute-selection)
sxSxPropsNoundefinedMUI system styles for the root stack (default render includes margin: 'auto')

ViewAttributeSelection inherits StackProps (except children). Default defaultBlockOrder: header, subheader, itemList, item, itemKey, itemValue.

Sub-component props​

Sub-components read from context and accept the same content keys as props to override locally.

Sub-componentMain PropsInheritsBuilt on
ViewAttributeSelection.Headerlabels (headerTitle, headerActionButton), headerAction, children, className, sxStackPropsStack + Typography + optional 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 rows
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")

Default UI Blocks​

BlockBuilt onNotes
ViewAttributeSelection (root)StackColumn layout with spacing={3}, margin: 'auto' (nbb-view-attribute-selection)
header (ViewAttributeSelection.Header)StackRenders when labels.headerTitle, labels.headerActionButton, or custom children is set; includes ViewAttributeSelection.HeaderActionButton when headerAction or labels.headerActionButton is set
subheader (ViewAttributeSelection.Subheader)StackRenders when labels.subheaderTitle or custom children is set
itemList (ViewAttributeSelection.ItemList)ListMaps data object entries or array values to key/value rows

Default root render order: 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: 'Job roles',
    headerActionButton: 'Edit roles',
  };

  const data: AttributeSelectionData = [
    <div key="roles">
      <div>Frontend Engineer (not selected)</div>
      <div>Backend Engineer (5 years)</div>
    </div>,
  ];

  return (
    <ViewAttributeSelection
      labels={labels}
      data={data}
      headerAction={() => {
        /* navigate or open edit dialog */
      }}
    />
  );
}