CardViewSwitcher

Primitive UI components in Search UI Components package, are headless, building blocks used to create the headless widget templates for React applications. You can use them to scaffold your custom widgets.

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

Anatomy

For a complete implementation, put together parts of the UI component as shown in the following code block.

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

In your React application, paste the following code block then modify the primitives to match your needs.

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

In your React application, paste the following code block then modify the primitives to match your needs.

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

In your React application, paste the following code block then modify the primitives to match your needs.

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. `tsx<br>(value) => { //do something }<br>`
`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.

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