salla-tabs

Tabbed container. Put one salla-tab-header in the header slot and one salla-tab-content in the content slot for each tab, and give each pair the same name. The first header is selected on load, and clicking a header selects it and its content. The component only toggles the s-tabs-active class on the header and the s-tabs-content-selected class on the content; showing and hiding the content is done by styles for those classes. It adds no ARIA roles or keyboard handling.

Tabs are collected once when the component loads, so tabs added or removed later are not picked up. Re-render the whole salla-tabs element (for example by giving it a new key) to change the tabs.

Use itCopy Anchor Link

In HTML or JSX, use the tag <salla-tabs> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

import { SallaTabs } from '@salla.sa/twilight-components-react/tabs';

Try itCopy Anchor Link

ExampleCopy Anchor Link

import { SallaTabs } from '@salla.sa/twilight-components-react/tabs';
import { SallaTabHeader } from '@salla.sa/twilight-components-react/tab-header';
import { SallaTabContent } from '@salla.sa/twilight-components-react/tab-content';

export function Example() {
  return (
    <SallaTabs>
      <SallaTabHeader slot="header" name="description">Description</SallaTabHeader>
      <SallaTabHeader slot="header" name="reviews">Reviews</SallaTabHeader>
      <SallaTabContent slot="content" name="description">Product description</SallaTabContent>
      <SallaTabContent slot="content" name="reviews">Customer reviews</SallaTabContent>
    </SallaTabs>
  );
}

PropertiesCopy Anchor Link

SlotsCopy Anchor Link

RelatedCopy Anchor Link

Used inside: <salla-loyalty>, <salla-loyalty-panel>, <salla-loyalty-program>, <salla-product-size-guide>, <salla-reward-details>.