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

Search By Chipsブロック

SearchByChip は、MUI 上に構築されたチップベースのクイック検索ブロックで、タイトル、サブタイトル、1 つ以上のクリック可能なチップセクションを備えています。

インストール​

npm install @nodeblocks/frontend-search-by-chip-block@0.3.2

必要なもの​

項目用途
searchByChipTitleブロック上部のメイン見出し
subtitleタイトル下の補助テキスト
chipSections各チップグループ、そのラベル、チップ、onClickChip ハンドラーを定義する
アプリ側でチップクリックを処理する

各セクションは独自の onClickChip コールバックを提供します。検索状態の更新、ナビゲーション、API リクエストのトリガーに使用してください。

コード例​

ライブエディター
function Example() {
  const searchChips = [
    {value: 'electronics', label: '電子機器'},
    {value: 'clothing', label: '衣類'},
    {value: 'books', label: '書籍'},
    {value: 'home-garden', label: 'ホーム・ガーデン'},
    {value: 'sports', label: 'スポーツ'},
  ];

  const [selectedValue, setSelectedValue] = React.useState('');

  const handleChipClick = value => {
    setSelectedValue(value);
  };

  const chipSections = [
    {
      sectionTitle: 'カテゴリ',
      chips: searchChips,
      onClickChip: handleChipClick,
    },
  ];

  return (
    <>
      {selectedValue ? (
        <Typography variant="body2" sx={{mb: 2, textAlign: 'center'}}>
          選択中: <strong>{selectedValue}</strong>
        </Typography>
      ) : null}
      <SearchByChip
        searchByChipTitle="クイック検索"
        subtitle="お探しのものを見つけましょう"
        chipSections={chipSections}
      />
    </>
  );
}
結果
Loading...

主要プロパティ​

コアプロパティ​

プロパティ型必須デフォルト説明
searchByChipTitleReactNodeはい-SearchByChip.Title でレンダリングされるメインタイトル
subtitleReactNodeはい-SearchByChip.Subtitle でレンダリングされるサブタイトル
chipSectionsChipSection[]はい-チップグループ。各セクションに独自の onClickChip ハンドラがある

ChipSection の形状:

フィールド型必須説明
sectionTitleReactNodeはいチップグループの見出し
chipsChipOption[]はいセクションに表示するチップ
onClickChip(value: string) => voidはいこのセクションのチップがクリックされたときに呼び出される

ChipOption の形状:

フィールド型必須説明
valuestringはいonClickChip に渡される識別子
labelReactNodeはいチップボタンのラベル
iconReactNodeいいえチップボタンの任意の startIcon（デフォルトは SearchByChip.ChipIcon）

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

プロパティ型必須デフォルト説明
childrenBlocksOverride | ReactNodeいいえ-デフォルトブロックをオーバーライドする、または複合子をレンダリングする
classNamestringいいえ-ルートスタックのクラス名
sxSxPropsいいえ-ルートスタック用の MUI システムスタイル
spacingStackProps['spacing']いいえ{ xs: 0.5, sm: 1 }ルートスタックの垂直方向の間隔

SearchByChip は StackProps（children を除く）を継承します。デフォルトの defaultBlockOrder: subtitle、title、sectionTitle、chipIcon、chipItem、chipSection、chipSections（ルートは subtitle、title、chipSections のみをレンダリング）。

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

サブコンポーネントはルートとコンテキストを共有します。searchByChipTitle、subtitle、chipSections はデフォルトで適用されます。同じキーをサブコンポーネントに渡すとローカルで上書きできます。

サブコンポーネント主要プロパティ継承ベース
SearchByChip.TitlesearchByChipTitle、children、variant（h1）、component（h1）、className、sxTypographyPropsTypography
SearchByChip.Subtitlesubtitle、children、variant（h6）、component（h6）、className、sxTypographyPropsTypography
SearchByChip.ChipSectionschipSections、children、className、sxStackPropsStack
SearchByChip.ChipSectionsectionTitle、chips、onClickChip、children、classNameStackPropsStack + Divider + Box
SearchByChip.SectionTitlesectionTitle（必須）、children、variant（h5）、component（h5）、className、sxTypographyPropsTypography
SearchByChip.ChipItemonClickChip（必須）、value（必須）、label（必須）、startIcon（デフォルト ChipIcon）、className、sxButton props except childrenButton（variant="outlined"、size="small"）
SearchByChip.ChipIcon——Check アイコン

デフォルト UI ブロック​

ブロックベース備考
SearchByChip（ルート）Stackタイトル、サブタイトル、チップセクションのコンテキストを提供する中央揃えコンテナ
SearchByChip.TitleTypographyvariant="h1"、レスポンシブなフォントサイズ
SearchByChip.SubtitleTypographyプライマリカラー、レスポンシブなタイポグラフィ
SearchByChip.ChipSectionsStackchipSections を ChipSection ブロックにマッピングする

デフォルトのルートレンダリング順序: subtitle → title → chipSections。

chipSection、sectionTitle、chipItem、chipIcon は ChipSections 内で構成され、ルートのブロックレベルではレンダリングされません。

追加フィールドプリミティブ​

プリミティブベース備考
SearchByChip.SectionTitleTypographyチップセクション見出し 1 件。デフォルト variant="h5"、component="h5"
SearchByChip.ChipSectionStack + Divider + Box1 つのセクションタイトルとそのチップボタンをレンダリングする
SearchByChip.ChipItemButtonアウトラインのチップボタン 1 件。onClickChip(value) を呼び出す
SearchByChip.ChipIconCheck アイコンChipItem のデフォルト start アイコン

TypeScript​

import * as React from 'react';
import {SearchByChip} from '@nodeblocks/frontend-search-by-chip-block';
import type {ReactNode} from 'react';

type ChipOption = {
  value: string;
  label: string;
  icon?: ReactNode;
};

type ChipSection = {
  sectionTitle: ReactNode;
  chips: ChipOption[];
  onClickChip: (value: string) => void;
};

const categoryChips: ChipOption[] = [
  {value: 'electronics', label: '電子機器'},
  {value: 'clothing', label: '衣類'},
  {value: 'books', label: '書籍'},
];

export function QuickSearchByChips() {
  const [query, setQuery] = React.useState('');

  const chipSections: ChipSection[] = [
    {
      sectionTitle: 'カテゴリ',
      chips: categoryChips,
      onClickChip: value => setQuery(value),
    },
  ];

  return (
    <SearchByChip
      searchByChipTitle="クイック検索"
      subtitle={query ? `「${query}」の検索結果を表示中` : 'お探しのものを見つけましょう'}
      chipSections={chipSections}
    />
  );
}