# salla-tab-content (https://docs.salla.dev/twilight/react/web-components/salla-tab-content)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

<Callout title="Used inside salla-tabs">
  [`<salla-tabs>`](https://docs.salla.dev/twilight/react/web-components/salla-tabs) renders this component for you. You rarely use it directly.
</Callout>

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 [#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).

```tsx
import { SallaTabContent } from '@salla.sa/twilight-components-react/tab-content';
```

## Example [#example]

```tsx
import { SallaTabContent } from '@salla.sa/twilight-components-react/tab-content';

export function Example() {
  return (
    <SallaTabContent slot="content" name="reviews">Customer reviews</SallaTabContent>
  );
}
```

```html
<salla-tab-content slot="content" name="reviews">Customer reviews</salla-tab-content>
```

## Properties [#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 [#methods]

Call these on the element or a React ref.

### `getChild() => Promise<{ selected: any; unselect: any; name: string; }>` [#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 [#slots]

| Slot      | Description             |
| --------- | ----------------------- |
| (default) | The content of the tab. |

## Related [#related]

Used inside: [`<salla-loyalty>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty), [`<salla-loyalty-panel>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-panel), [`<salla-loyalty-program>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-program), [`<salla-product-size-guide>`](https://docs.salla.dev/twilight/react/web-components/salla-product-size-guide), [`<salla-reward-details>`](https://docs.salla.dev/twilight/react/web-components/salla-reward-details).