CardViewSwitcher(カードビュースイッチャー)

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

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

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

解剖学

RequestResponse
import { CardViewSwitcher } from '@sitecore-search/ui';
const MyCardViewSwitcher = () => (
    <CardViewSwitcher.Root>
      <CardViewSwitcher.Item value="grid">
        Use icon or text as children
      </CardViewSwitcher.Item>
      <CardViewSwitcher.Item value="list">
        Use icon or text as children
      </CardViewSwitcher.Item>
    </CardViewSwitcher.Root>
);

コンポーネントの使用

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

プレーンコンポーネント

Screenshot of a plain CardViewSwitcher primitive component.
RequestResponse
() => {
  return (
    <CardViewSwitcher.Root onValueChange={onValueChange}>
      <CardViewSwitcher.Item value="grid" aria-label="Grid View">
        <GridIcon />
      </CardViewSwitcher.Item>
      <CardViewSwitcher.Item value="list" aria-label="List View">
        <ListBulletIcon />
      </CardViewSwitcher.Item>
    </CardViewSwitcher.Root>
  );
}

APIリファレンス

CardViewSwitcher.ルート

CardViewSwitcher.Rootコンポーネントには、カード ビュー スイッチャーのすべてのコンポーネントが含まれています。

子供：CardViewSwitcher.Item

名前

形容

デフォルト

onValueChange

アイテムがクリックされたときに呼び出されるイベント ハンドラー。

RequestResponse
(value) =&gt; { //do something }

defaultValue

糸。

押された項目の制御されたステートフル値。

list又は grid

grid

CardViewSwitcher.アイテム

CardViewSwitcher.Itemコンポーネントは、グループ内のアイテムです。

親：CardViewSwitcher.Root

名前

形容

デフォルト

value

糸。

カードの価値タイプ。

list又は grid

grid

children

表示するContent。

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

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