範囲ファセット

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

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

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

解剖学

RequestResponse
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.
RequestResponse
() => {
  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リファレンス

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は、開始点のドラッグ可能なつまみです。値をパラメータとして持つ関数を受け取り、レイアウトの内容を返します。

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

RangeFacet.End (英語)

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

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

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

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