---
title: "アコーディオンファセット"
slug: "accordionfacets"
abstract: "Search AccordionFacetsのプリミティブUIコンポーネントの解剖学、使用法、API参照を説明します。"
---
# アコーディオンファセット

パッケージ内のプリミティブ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><CheckIcon /></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の使い方を説明しています。

### スクリーンショット { .notintoc }

![Screenshot of a styled AccordionFacets primitive component.](https://doc.sitecore.com/api/markdown-image/search/ja/developers/search-js-sdk-for-react/images/accordion-styled.png)

### Plain component { .notintoc }

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>
 <CheckIcon />
 </AccordionFacets.ItemCheckboxIndicator>
 </AccordionFacets.ItemCheckbox>
 <AccordionFacets.ItemLabel>Brand 1</AccordionFacets.ItemLabel>
 </AccordionFacets.Item>

 <AccordionFacets.Item {...createFacetValue(facetList1.facetId, 1, true)}>
 <AccordionFacets.ItemCheckbox>
 <AccordionFacets.ItemCheckboxIndicator>
 <CheckIcon />
 </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 { .notintoc }

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'};

 &:hover {
 background-color: ${theme.vars.palette.grey'200'};
 }
 &:focus {
 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};

 &:hover {
 background-color: ${theme.vars.palette.primary.main};
 color: ${theme.vars.palette.primary.contrastText};
 }
 &:focus {
 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;

 &:hover {
 background-color: violet;
 }

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

 const AccordionTrigger = React.forwardRef(({ children, ...props }, forwardedRef) => (
 <HeaderStyled>
 <TriggerStyled {...props} ref={forwardedRef}>
 {children}
 <ChevronStyled aria-hidden />
 </TriggerStyled>
 </HeaderStyled>
 ));

 return (
 <AccordionFacets.Root
 defaultFacetTypesExpandedList={facetList1.facetId}
 onFacetTypesExpandedListChange={onFacetTypesExpandedListChange}
 onFacetValueClick={onFacetValueClick}
 >
 <FacetStyled facetId={facetList1.facetId}>
 <AccordionTrigger>Brands (checkbox)</AccordionTrigger>
 <AccordionFacets.Content>
 <ValueListStyled>
 <ItemStyled {...createFacetValue(facetList1.facetId, 0, false)}>
 <ItemCheckboxStyled>
 <ItemCheckboxIndicatorStyled>
 <CheckIcon />
 </ItemCheckboxIndicatorStyled>
 </ItemCheckboxStyled>
 <ItemCheckboxLabelStyled>Brand 1</ItemCheckboxLabelStyled>
 </ItemStyled>

 <ItemStyled {...createFacetValue(facetList1.facetId, 1, true)}>
 <ItemCheckboxStyled>
 <ItemCheckboxIndicatorStyled>
 <CheckIcon />
 </ItemCheckboxIndicatorStyled>
 </ItemCheckboxStyled>
 <ItemCheckboxLabelStyled>Brand 2</ItemCheckboxLabelStyled>
 </ItemStyled>
 </ValueListStyled>
 </AccordionFacets.Content>
 </FacetStyled>

 <FacetStyled facetId={facetList2.facetId}>
 <AccordionTrigger>Size (toggle)</AccordionTrigger>
 <AccordionFacets.Content>
 <ValueListStyled orientation="horizontal">
 <ItemStyled {...createFacetValue(facetList2.facetId, 0, false)}>
 <ItemToggleStyled>
 <AccordionFacets.ItemLabel>M</AccordionFacets.ItemLabel>
 </ItemToggleStyled>
 </ItemStyled>

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

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

## API参照

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

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

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

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

子供:AccordionFacets.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