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

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

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

解剖学

RequestResponse
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プリミティブコンポーネントの使用について説明しています。

スクリーンショット

Screenshot of a styled AccordionFacets primitive component.

APIリファレンス

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

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

子供：AccordionFacets.Facet

名前

形容

onFacetClick

ユーザーが任意のファセット値項目をクリックしたときに起動するコールバック。

facetTypesExpandedList

内容が展開されるアコーディオン項目の制御されたステートフル値。

defaultFacetTypesExpandedList

アコーディオンが最初にレンダリングされるときに内容が展開される項目の値。アコーディオンの状態を制御したくない場合は、defaultFacetTypesExpandedListを使用します。

onFacetTypesExpandedListChange

アコーディオンの状態が変化したときに起動するコールバック。

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

AccordionFacets.Facetコンポーネントには、折りたたみ可能なセクションのすべてのパーツが含まれています。

親： AccordionFacets.Root

子供: AccordionFacets.HeaderとAccordionFacets.Content

名前

形容

asChild

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

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

AccordionFacets.HeaderコンポーネントはAccordionFacets.Triggerをラップします。asChildプロパティを使用して、ページの適切な見出しレベルに更新します。

親： AccordionFacets.Facet

子供： AccordionFacets.Trigger

名前

形容

asChild

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

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

AccordionFacets.Triggerは、関連付けられているアイテムの折りたたまれた状態を切り替えます。

親： AccordionFacets.Header

名前

形容

asChild

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

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

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

親： AccordionFacets.Facet

子供： AccordionFacets.ValueList

名前

形容

asChild

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

アコーディオンファセット.バリューリスト

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.ItemCheckboxIndicatorは、チェックボックスが選択済みまたは不確定な状態にあるときにレンダリングされます。この要素のスタイルは、直接設定することも、アイコンを配置するラッパーとして使用することもできますし、その両方を使用することもできます。

親： AccordionFacets.Checkbox

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

AccordionFacets.ItemLabelは、コントロールに関連付けられたアクセス可能なラベルをレンダリングします。アイコンやテキストを含めることができます。

親： AccordionFacets.Item

AccordionFacets.ItemToggle(アコーディオンファセット.アイテムトグル)

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

親： AccordionFacets.Item

子供： AccordionFacets.ItemLabel

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、