1. Search JS SDK for React

アコーディオンファセット

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

パッケージ内のプリミティブUIコンポーネントはヘッドレスSearch UI Components、Reactアプリケーションのヘッドレスウィジェットテンプレートを作成するためのビルディングブロックです。カスタムウィジェットの足場として使うことができます。

解剖学

完全な実装のために、以下のコードブロックに示されているようにUIコンポーネントの一部を組み合わせます。

import { AccordionFacets } from '@sitecore-search/ui';

const MyAccordionFacetsComponent = () => ( <AccordionFacets.Root> <AccordionFacets.Facet> <AccordionFacets.Header> <AccordionFacets.Trigger>Header</AccordionFacets.Trigger> </AccordionFacets.Header> <AccordionFacets.Content> <AccordionFacets.ValueList> <AccordionFacets.Item> <AccordionFacets.ItemCheckbox> <AccordionFacets.ItemCheckboxIndicator></AccordionFacets.ItemCheckboxIndicator> </AccordionFacets.ItemCheckbox> <AccordionFacets.ItemLabel>Facet Value Checkbox Label</AccordionFacets.ItemLabel> </AccordionFacets.Item> </AccordionFacets.ValueList> </AccordionFacets.Content> </AccordionFacets.Facet>

<AccordionFacets.Facet> <AccordionFacets.Header> <AccordionFacets.Trigger>Header 2</AccordionFacets.Trigger> </AccordionFacets.Header> <AccordionFacets.Content> <AccordionFacets.ValueList> <AccordionFacets.Item> <AccordionFacets.ItemToggle> <AccordionFacets.ItemLabel>Facet Value Toggle Label</AccordionFacets.ItemLabel> </AccordionFacets.ItemToggle> </AccordionFacets.Item> </AccordionFacets.ValueList> </AccordionFacets.Content> </AccordionFacets.Facet> </AccordionFacets.Root> );

コンポーネントの使用

以下のタブはスクリーンショットを示し、プリミティブコンポーネントのAccordionFacetsの使い方を説明しています。

スクリーンショット

Screenshot of a styled AccordionFacets primitive component.

Plain component

Reactアプリケーションで以下のコードブロックを貼り付け、プリミティブを必要に応じて修正します。

() => ( <AccordionFacets.Root defaultFacetTypesExpandedList={facetList1.facetId} onFacetTypesExpandedListChange={onFacetTypesExpandedListChange} onFacetValueClick={onFacetValueClick}

<AccordionFacets.Facet facetId={facetList1.facetId}> <AccordionFacets.Header> <AccordionFacets.Trigger>Brands</AccordionFacets.Trigger> </AccordionFacets.Header> <AccordionFacets.Content> <AccordionFacets.ValueList> <AccordionFacets.Item {...createFacetValue(facetList1.facetId, 0, false)}> <AccordionFacets.ItemCheckbox> <AccordionFacets.ItemCheckboxIndicator> </AccordionFacets.ItemCheckboxIndicator> </AccordionFacets.ItemCheckbox> <AccordionFacets.ItemLabel>Brand 1</AccordionFacets.ItemLabel> </AccordionFacets.Item>

<AccordionFacets.Item {...createFacetValue(facetList1.facetId, 1, true)}> <AccordionFacets.ItemCheckbox> <AccordionFacets.ItemCheckboxIndicator> </AccordionFacets.ItemCheckboxIndicator> </AccordionFacets.ItemCheckbox> <AccordionFacets.ItemLabel>Brand 2</AccordionFacets.ItemLabel> </AccordionFacets.Item> </AccordionFacets.ValueList> </AccordionFacets.Content> </AccordionFacets.Facet>

<AccordionFacets.Facet facetId={facetList2.facetId}> <AccordionFacets.Header> <AccordionFacets.Trigger>Colors</AccordionFacets.Trigger> </AccordionFacets.Header> <AccordionFacets.Content> <AccordionFacets.ValueList> <AccordionFacets.Item {...createFacetValue(facetList2.facetId, 0, false)}> <AccordionFacets.ItemToggle> <AccordionFacets.ItemLabel>Blue</AccordionFacets.ItemLabel> </AccordionFacets.ItemToggle> </AccordionFacets.Item>

<AccordionFacets.Item {...createFacetValue(facetList2.facetId, 1, true)}> <AccordionFacets.ItemToggle> <AccordionFacets.ItemLabel>Red</AccordionFacets.ItemLabel> </AccordionFacets.ItemToggle> </AccordionFacets.Item> </AccordionFacets.ValueList> </AccordionFacets.Content> </AccordionFacets.Facet> </AccordionFacets.Root> )

Styled component

Reactアプリケーションで以下のコードブロックを貼り付け、スタイル付きプリミティブを必要に応じて修正します。

() => { const FacetStyled = styled(AccordionFacets.Facet)` max-width: 300px; font-family: ${theme.vars.typography.fontFamilySystem}; `;

const ItemCheckboxStyled = styled(AccordionFacets.ItemCheckbox)` all: unset; background-color: ${theme.vars.palette.grey'100'}; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border: 1px solid ${theme.vars.palette.grey'400'};

&

{ background-color: ${theme.vars.palette.grey'200'}; } &
{ box-shadow: 0 0 0 2px ${theme.vars.palette.grey'900'}; } `;

const ItemToggleStyled = styled(AccordionFacets.ItemToggle)` all: unset; background-color: ${theme.vars.palette.grey'100'}; width: 40px; height: 35px; display: flex; align-items: center; justify-content: center; border: 1px solid ${theme.vars.palette.grey'400'}; font-size: ${theme.vars.typography.fontSize1.fontSize}; margin-right: ${theme.vars.spacing.s};

&

{ background-color: ${theme.vars.palette.primary.main}; color: ${theme.vars.palette.primary.contrastText}; } &
{ box-shadow: 0 0 0 2px ${theme.vars.palette.grey'900'}; }

&data-state='on' { background-color: ${theme.vars.palette.primary.main}; color: ${theme.vars.palette.primary.contrastText}; } `;

const ItemCheckboxIndicatorStyled = styled(AccordionFacets.ItemCheckboxIndicator)` color: ${theme.vars.palette.primary.main}; width: 15px; height: 15px; `;

const ValueListStyled = styled(AccordionFacets.ValueList)` list-style: none; li { padding: ${theme.vars.spacing.xs} 0; }

&data-orientation='horizontal' { display: flex; flex-direction: row; } `;

const ItemCheckboxLabelStyled = styled(AccordionFacets.ItemLabel)` padding-left: ${theme.vars.spacing.xs}; `; const ItemStyled = styled(AccordionFacets.Item)` display: flex; align-items: center; `;

const HeaderStyled = styled(AccordionFacets.Header)` display: flex; `; const TriggerStyled = styled(AccordionFacets.Trigger)` align-items: center; color: ${theme.vars.palette.primary.main}; //var(--sdc-palette-primary-main); display: flex; font-size: ${theme.vars.typography.fontSize1.fontSize}; height: 45px; justify-content: space-between; line-height: 1; padding: 0 ${theme.vars.spacing.m}; flex: 1 1 0; `;

const ChevronStyled = styled(ChevronDownIcon)` color: ${theme.vars.palette.primary.main}; transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1) 0s;

data-state='open' & { transform: rotate(180deg); } `;

const RangeFacetRootStyled = styled(RangeFacet.Root)` position: relative; display: flex; align-items: center; user-select: none; touch-action: none; width: 100%; height: 20px; `;

const RangeFacetTrackStyled = styled(RangeFacet.Track)` background-color: lightgrey; position: relative; flex-grow: 1; border-radius: 9999px; height: 3px; `;

const RangeFacetRangeStyled = styled(RangeFacet.Range)` position: absolute; background-color: black; border-radius: 9999px; height: 100%; `;

const RangeFacetThumbStyled = styled(RangeFacet.Thumb)` display: block; width: 20px; height: 20px; background-color: white; box-shadow: 0 2px 10px grey; border-radius: 10px; font-family: 'Raleway', 'Helvetica Neue', Verdana, Arial, sans-serif; font-size: 10px; line-height: 20px; text-align: center; cursor: pointer;

&

{ background-color: violet; }

&

{ outline: none; box-shadow: 0 0 0 5px grey; } `;

const AccordionTrigger = React.forwardRef(({ children, ...props }, forwardedRef) => ( <TriggerStyled {...props} ref={forwardedRef}> {children} ));

return ( <AccordionFacets.Root defaultFacetTypesExpandedList={facetList1.facetId} onFacetTypesExpandedListChange={onFacetTypesExpandedListChange} onFacetValueClick={onFacetValueClick}

Brands (checkbox) Brand 1

<ItemStyled {...createFacetValue(facetList1.facetId, 1, true)}> Brand 2 </AccordionFacets.Content>

Size (toggle) M

<ItemStyled {...createFacetValue(facetList2.facetId, 1, true)}> <AccordionFacets.ItemLabel>L</AccordionFacets.ItemLabel>

<ItemStyled {...createFacetValue(facetList2.facetId, 2, true)}> <AccordionFacets.ItemLabel>XL</AccordionFacets.ItemLabel> </AccordionFacets.Content> Price <AccordionFacets.Content> <RangeFacetRootStyled facetId="facetId3" defaultValue={0, 100} max={100} min={0} onRangeChange={() => {}}> </AccordionFacets.Content> </AccordionFacets.Root> ); }

API参照

このセクションでは、解剖構造に表示されるコンポーネントやコンポーネントについて説明します。各コンポーネントについて、以下の内容が見つかります:

  • 子供の時に追加できるComponents。
  • Componentsは子として追加できます。
  • 設定できるプロパティの詳細。

アコーディオンフェイゼッツ.ルート

AccordionFacets.Rootのコンポーネントにはアコーディオンのすべてのパーツが含まれています。

子供

.Facet

名称

概要

onFacetClick

ユーザーが任意のファセットバリューアイテムをクリックしたときに発動するコールバックです。

facetTypesExpandedList

内容が拡張されるアコーディオン項目の制御された状態値。

defaultFacetTypesExpandedList

アコーディオンが最初にレンダリングされたときに内容が拡大されるアイテムの価値です。アコーディオンの状態を制御したくない場合はdefaultFacetTypesExpandedListを使いましょう。

onFacetTypesExpandedListChange

アコーディオンの状態が変わったときに発電するコールバックです。

アコーディオンファセット。ファセット

AccordionFacets.Facetコンポーネントは折りたたみ可能なセクションのすべての部品を含みます。

親御さん: AccordionFacets.Root

子供: AccordionFacets.Header歳AccordionFacets.Content

名称

概要

asChild

コンポーネントを唯一の子のHTMLタグまたはカスタムコンポーネントに変更します。これにより元のコンポーネントプロップが提供された要素やコンポーネントのプロップとマージされ、基盤となるDOMノードが変更されます。

アコーディオンファセット・ヘッダー

AccordionFacets.HeaderコンポーネントはAccordionFacets.Triggerをラップします。asChildプロパティを使って、ページに適した見出しレベルに更新してください。

親御さん: AccordionFacets.Facet

子供: AccordionFacets.Trigger

名称

概要

asChild

コンポーネントを唯一の子のHTMLタグまたはカスタムコンポーネントに変更します。これにより元のコンポーネントプロップが提供された要素やコンポーネントのプロップとマージされ、基盤となるDOMノードが変更されます。

アコーディオンフェイゼッツ.トリガー

AccordionFacets.Triggerは関連するアイテムの崩壊状態を切り替えます。

親御さん: AccordionFacets.Header

名称

概要

asChild

コンポーネントを唯一の子のHTMLタグまたはカスタムコンポーネントに変更します。これにより元のコンポーネントプロップが提供された要素やコンポーネントのプロップとマージされ、基盤となるDOMノードが変更されます。

アコーディオンファセット。Content

AccordionFacets.Contentにはアイテムの折りたたみ可能な内容が含まれています。

親御さん: AccordionFacets.Facet

子供: AccordionFacets.ValueList

名称

概要

asChild

コンポーネントを唯一の子のHTMLタグまたはカスタムコンポーネントに変更します。これにより元のコンポーネントプロップが提供された要素やコンポーネントのプロップとマージされ、基盤となるDOMノードが変更されます。

AccordionFacets.ValueList

AccordionFacets.ValueListにはファセット値の完全なリストが含まれています。

親御さん: AccordionFacets.Content

子供: AccordionFacets.Item

アコーディオンファセット.アイテム

AccordionFacets.Itemには面値項目のロジックが含まれています。

親御さん: AccordionFacets.ValueList

子供: AccordionFacets.Checkbox、AccordionFacets.ItemLabel、AccordionFacets.ItemToggle

アコーディオンフェイゼッツ.アイテムチェックボックス

AccordionFacets.ItemCheckboxにはチェックボックスのすべての部分が含まれています。

親御さん: AccordionFacets.ValueList

子供: AccordionFacets.Checkbox

アコーディオンフェイセッツ.アイテムチェックボックスインジケーター

AccordionFacets.ItemCheckboxIndicatorはチェックボックスが選択または不確定の状態にあるときにレンダリングされます。この要素を直接スタイリングすることもできますし、アイコンを置くラッパーとして使うか、あるいはその両方が可能です。

親御さん: AccordionFacets.Checkbox

アコーディオンフェイゼッツ.アイテムラベル

AccordionFacets.ItemLabelはコントロールに関連付けられたアクセス可能なラベルを生成します。アイコンやテキストを含むことがあります。

親御さん: AccordionFacets.Item

アコーディオンフェイゼッツ.アイテムトグル

AccordionFacets.ItemToggleにはアイコンやテキストを含めることができます。

親御さん: AccordionFacets.Item

子供: AccordionFacets.ItemLabel

この記事を改善するための提案がある場合は、 お知らせください!