CardViewSwitcher

This topic describes the anatomy, API reference, and variations of the CardViewSwitcher primitive component.

Anatomy

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>
);

Using the component

The following tabs describe use of the CardViewSwitcher primitive component.

Plain component

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 reference

This section describes the component or component parts displayed in the anatomy structure. For every component, you will find:

Components to which you can add it as a child.
Components you can add as its child.
Details of any properties you can set.

CardViewSwitcher.Root

The CardViewSwitcher.Root component contains all the components of the card view switcher.

Children: CardViewSwitcher.Item

Name	Description	Default
`onValueChange`	Event handler called when any item is clicked. RequestResponse `(value) => { //do something }`
`defaultValue`	String. The controlled stateful value of the item that is pressed. list or grid	grid

Name

Description

Default

onValueChange

Event handler called when any item is clicked.

RequestResponse

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

defaultValue

String.

The controlled stateful value of the item that is pressed.

list or grid

grid

CardViewSwitcher.Item

The CardViewSwitcher.Item component is an item in the group.

Parent: CardViewSwitcher.Root

Name	Description	Default
`value`	String. Card value type. list or grid	grid
`children`	Content to be displayed.

Name

Description

Default

value

String.

Card value type.

list or grid

grid

children

Content to be displayed.

Do you have some feedback for us?

If you have suggestions for improving this article,