範囲ファセット

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

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

このトピックでは、RangeFacetプリミティブコンポーネントの解剖学、APIリファレンス、およびバリエーションについて説明します。

解剖学

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

const MyRangeSliderComponent = () => (
  <RangeFacet.Root>
    <RangeFacet.Track>
      <RangeFacet.Range />
    </RangeFacet.Track>
    <RangeFacet.Start />
    <RangeFacet.End />
  </RangeFacet.Root>
);

コンポーネントの使用

このセクションでは、RangeFacetプリミティブコンポーネントの使用方法について説明します。コードブロックをコピーしてReactアプリケーションに貼り付けることができます。

Screenshot of a plain RangeFacet primitive component.

() => {
  const { StyledRoot, AccordionTrigger, FacetStyled, StyledThumb, StyledStart, StyledEnd, StyledRange, StyledTrack } =
    buildStoryComponents();

  return (
    <>
      <AccordionFacets.Root>
        <FacetStyled facetId="facetId3">
          <AccordionTrigger>Price</AccordionTrigger>
          <AccordionFacets.Content>
            <StyledRoot defaultValue={DEFAULT_VALUE} min={0} max={100} steps={1}>
              <StyledTrack>
                <StyledRange />
              </StyledTrack>
              <StyledStart>{(value) => <span>{value}</span>}</StyledStart>
              <StyledEnd>{(value) => <span>{value}</span>}</StyledEnd>
            </StyledRoot>
          </AccordionFacets.Content>
        </FacetStyled>
      </AccordionFacets.Root>
    </>
  );
}

APIリファレンス

このセクションでは、解剖学的構造に表示されるコンポーネントまたはコンポーネントパーツについて説明します。すべてのコンポーネントについて、次の情報があります。

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

RangeFacet.ルート

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

名前	形容
children	RangeFacet.Rootコンポーネントの内側の子
min	数スライダーがサポートできる最小値。
max	数スライダーがサポートできる最大値。
defaultValue	数値の配列。最初にレンダリングされたときのスライダーの値。
steps	数ステップ間隔。
autoAdjustValues	ブーリアンデフォルト： true 最小値と最大値に応じて制限を調整します

RangeFacet.Track (英語)

RangeFacet.Trackコンポーネントには、RangeFacet.Rangeが含まれています。

RangeFacet.Range

範囲部分。RangeFacet.Trackの中に住んでいる必要があります。

RangeFacet.Start

RangeFacet.Startは、開始点のドラッグ可能なつまみです。値をパラメータとして持つ関数を受け取り、レイアウトの内容を返します。

<RangeFacet.Start>{(value) => <span>{value}</span>}</RangeFacet.Start>

RangeFacet.End (英語)

RangeFacet.Endは、終点のドラッグ可能なつまみです。値をパラメータとして持つ関数を受け取り、レイアウトの内容を返します。

<RangeFacet.End>{(value) => <span>{value}</span>}</RangeFacet.End>

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