# tab-content<a name="EN-US_TOPIC_0000001173164727"></a>

**<tab-content\>**  is a child component of  [<tabs\>](js-components-container-tabs.md)  and is used to provide the area for displaying the tab content. By default, its height is such that all the remaining space of the  **<tabs\>**  component is filled. The child components are arranged horizontally. When  **<tab-content\>**  is used as a child element in a container, the length on the main axis direction must be specified. Otherwise, the child element cannot be displayed.

## Permission List<a name="section11257113618419"></a>

None

## Child Component<a name="s6831289f2fac48a892746bd57f336c26"></a>

Supported

## Attribute<a name="s623ab9c704b24c329d0e91e85a30263e"></a>

In addition to the attributes in  [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.

<a name="table20633101642315"></a>
<table><thead align="left"><tr id="row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="aa872998ac2d84843a3c5161889afffef"><a name="aa872998ac2d84843a3c5161889afffef"></a><a name="aa872998ac2d84843a3c5161889afffef"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="ab2111648ee0e4f6d881be8954e7acaab"><a name="ab2111648ee0e4f6d881be8954e7acaab"></a><a name="ab2111648ee0e4f6d881be8954e7acaab"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="ab377d1c90900478ea4ecab51e9a058af"><a name="ab377d1c90900478ea4ecab51e9a058af"></a><a name="ab377d1c90900478ea4ecab51e9a058af"></a>Default Value</p>
</th>
<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="p824610360217"><a name="p824610360217"></a><a name="p824610360217"></a>Mandatory</p>
</th>
<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="a1d574a0044ed42ec8a2603bc82734232"><a name="a1d574a0044ed42ec8a2603bc82734232"></a><a name="a1d574a0044ed42ec8a2603bc82734232"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row0117609300"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p126261111307"><a name="p126261111307"></a><a name="p126261111307"></a>scrollable</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p206261816301"><a name="p206261816301"></a><a name="p206261816301"></a>boolean</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p46261615305"><a name="p46261615305"></a><a name="p46261615305"></a>true</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p116261914304"><a name="p116261914304"></a><a name="p116261914304"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="p1062618163010"><a name="p1062618163010"></a><a name="p1062618163010"></a>Whether the tabs can be switched by swiping left or right. The default value is <strong id="b84843195512"><a name="b84843195512"></a><a name="b84843195512"></a>true</strong>. If this attribute is set to <strong id="b1775133913552"><a name="b1775133913552"></a><a name="b1775133913552"></a>false</strong>, tab switching is implemented only through the association with <strong id="b6395111416560"><a name="b6395111416560"></a><a name="b6395111416560"></a>tab-bar</strong>.</p>
</td>
</tr>
</tbody>
</table>

## Style<a name="section15751323144115"></a>

Styles in  [Universal Styles](js-components-common-styles.md)  are supported.

## Event<a name="s0c39d3f35b9d4af69a19456ae743c675"></a>

Events in  [Universal Events](js-components-common-events.md)  are supported.

## Example Code<a name="section11929165914411"></a>

For details, see the  [tabs example code](js-components-container-tabs.md#section14993155318710).