CardViewSwitcher

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

Anatomy

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.

() => {
  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>
  );
}

Styled component with default list

Screenshot of a styled CardViewSwitcher primitive component with default list.

() => {
  const StyledCardViewSwitcher = styled(CardViewSwitcher.Root)`
    display: inline-flex;
    background-color: ${theme.vars.palette.common.white};
  `;

  const StyledCardViewSwitcherItem = styled(CardViewSwitcher.Item)`
    all: unset;
    align-items: center;
    background-color: ${theme.vars.palette.common.white};
    color: ${theme.vars.palette.grey[500]};
    display: flex;
    height: 30px;
    justify-content: center;
    margin-left: ${theme.vars.spacing.s};
    width: 30px;

    &:first-child {
      margin-left: 0;
    }

    &:hover {
      background-color: ${theme.vars.palette.primary.light};
    }
    &[data-state='on'] {
      background-color: ${theme.vars.palette.primary.main};
      color: ${theme.vars.palette.primary.contrastText};
    }

    &:focus {
      position: 'relative';
      border: solid 1px ${theme.vars.palette.primary.main};
    }
  `;

  return (
    <StyledCardViewSwitcher onValueChange={onValueChange} defaultValue="list">
      <StyledCardViewSwitcherItem value="grid">
        <GridIcon />
      </StyledCardViewSwitcherItem>
      <StyledCardViewSwitcherItem value="list">
        <ListBulletIcon />
      </StyledCardViewSwitcherItem>
    </StyledCardViewSwitcher>
  );
}

Styled component with text

Screenshot of a styled CardViewSwitcher primitive component with text.

() => {
  const StyledCardViewSwitcher = styled(CardViewSwitcher.Root)`
    display: inline-flex;
    background-color: ${theme.vars.palette.common.white};
  `;

  const StyledCardViewSwitcherItem = styled(CardViewSwitcher.Item)`
    all: unset;
    align-items: center;
    background-color: ${theme.vars.palette.common.white};
    color: ${theme.vars.palette.grey[500]};
    display: flex;
    height: 30px;
    justify-content: center;
    margin-left: ${theme.vars.spacing.s};
    padding: ${theme.vars.spacing.m};

    &:first-child {
      margin-left: 0;
    }

    &:hover {
      background-color: ${theme.vars.palette.primary.light};
    }
    &[data-state='on'] {
      background-color: ${theme.vars.palette.primary.main};
      color: ${theme.vars.palette.primary.contrastText};
    }

    &:focus {
      position: relative;
      border: solid 1px ${theme.vars.palette.primary.main};
    }
  `;

  return (
    <StyledCardViewSwitcher onValueChange={onValueChange}>
      <StyledCardViewSwitcherItem value="grid">Grid</StyledCardViewSwitcherItem>
      <StyledCardViewSwitcherItem value="list">List</StyledCardViewSwitcherItem>
    </StyledCardViewSwitcher>
  );
}

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. `(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.

(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.

If you have suggestions for improving this article, let us know!