salla-tab-content
The content panel of one tab.
Used inside salla-tabs
<salla-tabs> renders this component for you. You rarely use it directly.
The content panel of one tab. Place it in the content slot of salla-tabs and give it the same name as its
salla-tab-header. The parent adds the s-tabs-content-selected class to it while its tab is selected. It must be
used inside salla-tabs; on its own it is never selected.
Use it
In HTML or JSX, use the tag <salla-tab-content> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaTabContent } from '@salla.sa/twilight-components-react/tab-content';Example
import { SallaTabContent } from '@salla.sa/twilight-components-react/tab-content';
export function Example() {
return (
<SallaTabContent slot="content" name="reviews">Customer reviews</SallaTabContent>
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
name | name | Name of the tab content. It is matched with the name of a salla-tab-header to link the content with its header, so use the same value on both. | string |
Methods
Call these on the element or a React ref.
getChild() => Promise<{ selected: any; unselect: any; name: string; }>
Used by salla-tabs to control this panel. Resolves to { selected, unselect, name }, where selected and
unselect are functions that show or hide the panel.
Returns Promise<{ selected: any; unselect: any; name: string; }>
Slots
| Slot | Description |
|---|---|
| (default) | The content of the tab. |
Related
Used inside: <salla-loyalty>, <salla-loyalty-panel>, <salla-loyalty-program>, <salla-product-size-guide>, <salla-reward-details>.