salla-tab-header
The clickable title of one tab.
Used inside salla-tabs
<salla-tabs> renders this component for you. You rarely use it directly.
The clickable title of one tab. Place it inside salla-tabs with slot="header" and give it the
same name as its salla-tab-content so the two stay in sync. Clicking it selects the tab.
It is a plain div with a click handler, so it has no keyboard or ARIA handling.
Use it
In HTML or JSX, use the tag <salla-tab-header> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaTabHeader } from '@salla.sa/twilight-components-react/tab-header';Example
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="details">Details</SallaTabHeader>
<SallaTabHeader slot="header" name="reviews">Reviews</SallaTabHeader>
<SallaTabContent slot="content" name="details">Product details</SallaTabContent>
<SallaTabContent slot="content" name="reviews">Customer reviews</SallaTabContent>
</SallaTabs>
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
activeClass | active-class | The class applied to the currently active(selected) tab Deprecated: Not read by the component, so it has no effect. It will be removed in the next major version. | string | undefined |
centered | centered | Center tab items in the given flex. Deprecated: Not read by the component, so it has no effect. It will be removed in the next major version. | boolean | false |
height | height | Set the height of the tab bar Deprecated: Not read by the component, so it has no effect. It will be removed in the next major version. | number | string | undefined |
name | name | Header identifier name to sync with the content. | string |
Events
Listen with addEventListener, or the on prop of the React wrapper (for example onModalBack).
| Event | Description | Detail |
|---|---|---|
tabSelected | Fires when the header is clicked. event.detail is the object returned by getChild(): { selected, unselect, name, id }. The parent salla-tabs listens for it to switch tabs. | any |
Methods
Call these on the element or a React ref.
getChild() => Promise<{ selected: any; unselect: any; name: string; id: string; }>
Expose self for the parent.
Returns Promise<{ selected: any; unselect: any; name: string; id: string; }>: A Promise that resolves to { selected, unselect, name, id }: functions that mark this header selected or unselected, its name and its generated id.
Slots
| Slot | Description |
|---|---|
| (default) | The tab title content. |
Related
Used inside: <salla-loyalty>, <salla-loyalty-panel>, <salla-loyalty-program>, <salla-product-size-guide>, <salla-reward-details>.