ソートセレクト

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

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

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

解剖学

RequestResponse

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

const MySortSelectComponent = () => (
  <SortSelect.Root>
        <SortSelect.Trigger>
          <SortSelect.SelectValue></SortSelect.SelectValue>
          <SortSelect.Icon></SortSelect.Icon>
        </SortSelect.Trigger>
        <SortSelect.Content>
          <SortSelect.Viewport>
            <SortSelect.Option value={option1}>
                <SortSelect.OptionText>{option1.label}</SortSelect.OptionText>
            </SortSelect.Option>
            <SortSelect.Option value={option2}>
                <SortSelect.OptionText>{option3.label}</SortSelect.OptionText>
            </SortSelect.Option>
          </SortSelect.Viewport>
        </SortSelect.Content>
      </SortSelect.Root>
);

コンポーネントの使用

次のタブでは、SortSelectプリミティブコンポーネントの使用について説明します。

プレーンコンポーネント

RequestResponse

() => {
  const [currentValue, setCurrentValue] = React.useState(undefined);

  return (
    <>
      <StyledP>
        <b>Select label:</b> {JSON.stringify(currentValue)}
      </StyledP>

      <SortSelect.Root onValueChange={(v) => setCurrentValue(v)}>
        <SortSelect.Trigger>
          <SortSelect.SelectValue></SortSelect.SelectValue>
          <SortSelect.Icon></SortSelect.Icon>
        </SortSelect.Trigger>
        <SortSelect.Content>
          <SortSelect.Viewport>
            {sortOptions.map((option) => (
              <SortSelect.Option value={option}>
                <SortSelect.OptionText>{option.label}</SortSelect.OptionText>
              </SortSelect.Option>
            ))}
          </SortSelect.Viewport>
        </SortSelect.Content>
      </SortSelect.Root>
    </>
  );
}

スタイル付きバリアント

APIリファレンス

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

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

SortSelect.Rootの

SortSelect.Rootコンポーネントには、ソート選択のすべての部分が含まれています。

名前	形容
children	SortSelect.Rootコンポーネントの内側の子
value	選択の値。
defaultValue	選択のデフォルト値。
onValueChange	select値が変更されたときに起動するコールバック。
open	ブーリアン。デフォルトはfalseです。選択を開いたままにするためのフラグ
defaultOpen	ブーリアン。デフォルトはfalseです。選択を開いたままにするためのフラグ
onOpenChange	オープンステータスが変更されたときにトリガーされる関数。
dir	糸。デフォルトはltrです。選択の向き。 ltrまたはrtl。
name	選択の名前。

SortSelect.Trigger

SortSelect.Triggerコンポーネントは、選択をトリガーするボタンです。

親：SortSelect.Root

子供: SortSelect.IconとSortSelect.SelectValue

名前	形容	デフォルト
asChild	コンポーネントをHTMLタグまたは唯一の子のカスタムコンポーネントに変更します。これにより、元のコンポーネントpropsが指定された要素/コンポーネントのpropsとマージされ、基になるDOMノードが変更されます。	false
children	SortSelect.Triggerコンポーネントの子

SortSelect.Icon (英語)

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

名前	形容	デフォルト
asChild	コンポーネントをHTMLタグまたは唯一の子のカスタムコンポーネントに変更します。これにより、元のコンポーネントpropsが指定された要素/コンポーネントのpropsとマージされ、基になるDOMノードが変更されます。	false
children	SortSelect.Iconコンポーネントの子

SortSelect.SelectValue (英語)

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

名前	形容	デフォルト
asChild	コンポーネントをHTMLタグまたは唯一の子のカスタムコンポーネントに変更します。これにより、元のコンポーネントpropsが指定された要素/コンポーネントのpropsとマージされ、基になるDOMノードが変更されます。	false
children	SortSelect.Iconコンポーネントの子
placeholder	値またはdefaultValueが設定されていない場合にSelect.Value内でレンダリングされるコンテンツ。

SortSelectです。Content

セレクトを開くと、SortSelect.Contentコンポーネントが飛び出します。

親：SortSelect.Root

子供： SortSelect.Viewport

名前	形容	デフォルト
asChild	コンポーネントをHTMLタグまたは唯一の子のカスタムコンポーネントに変更します。これにより、元のコンポーネントpropsが指定された要素/コンポーネントのpropsとマージされ、基になるDOMノードが変更されます。	false
children	SortSelect.Iconコンポーネントの子
onCloseAutoFocus	フォーカスが閉じた後にトリガーに移動したときに呼び出されるイベントハンドラー。これは、event.preventDefaultを呼び出すことで防ぐことができます。
onEscapeKeyDown	エスケープキーが押されたときに呼び出されるイベントハンドラ。これは、event.preventDefaultを呼び出すことで防ぐことができます。
onPointerDownOutside	ポインタイベントがコンポーネントの境界外で発生したときに呼び出されるイベントハンドラです。これは、event.preventDefaultを呼び出すことで防ぐことができます。

SortSelect.Viewport (英語)

スクロールSortSelect.Viewportコンポーネントには、すべてのアイテムが含まれています。

親：SortSelect.Content

子供： SortSelect.Option

名前	形容	デフォルト
asChild	コンポーネントをHTMLタグまたは唯一の子のカスタムコンポーネントに変更します。これにより、元のコンポーネントpropsが指定された要素/コンポーネントのpropsとマージされ、基になるDOMノードが変更されます。	false
children	SortSelect.Iconコンポーネントの子

SortSelect.OptionText (英語)

SortSelect.OptionTextコンポーネントは、アイテムのテキスト部分です。その項目が選択されたときにトリガーに表示するテキストのみを含める必要があります。正しい位置を確保するためのスタイルは設定しないでください。

親：SortSelect.Option

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

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

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