Tabs

Documentation and examples for how to use Tabs components.

Basic tabs

Use UxfTabs, UxtTabsHeader, UxfTabsContent components to construct tabs interface.
Basic example:

Link

This is some placeholder 1 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Active

This is some placeholder 2 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Link

This is some placeholder 3 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Disabled

This is some placeholder 4 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Web Component

<uxf-tabs>  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 1 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Active</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 2 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 3 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header" disabled>Disabled</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 4 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content></uxf-tabs>

React

<UxfTabs>  <UxfTabsHeader slot="header">Link</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 1 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent>  <UxfTabsHeader slot="header">Active</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 2 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent>  <UxfTabsHeader slot="header">Link</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 3 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent>  <UxfTabsHeader slot="header" disabled>Disabled</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 4 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent></UxfTabs>

Angular

<uxf-tabs>  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 1 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Active</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 2 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 3 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header" disabled>Disabled</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 4 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content></uxf-tabs>

Center tabs

Set property align to 'center' to center tabs horizontally:

Link

This is some placeholder 1 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Active

This is some placeholder 2 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Link

This is some placeholder 3 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Disabled

This is some placeholder 4 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Web Component

<uxf-tabs align="center">  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 1 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Active</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 2 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 3 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header" disabled>Disabled</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 4 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content></uxf-tabs>

React

<UxfTabs align="center">  <UxfTabsHeader slot="header">Link</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 1 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent>  <UxfTabsHeader slot="header">Active</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 2 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent>  <UxfTabsHeader slot="header">Link</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 3 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent>  <UxfTabsHeader slot="header" disabled>Disabled</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 4 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent></UxfTabs>

Angular

<uxf-tabs align="center">  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 1 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Active</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 2 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 3 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header" disabled>Disabled</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 4 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content></uxf-tabs>

Right tabs

Set property align to 'end' to align items on right:

Link

This is some placeholder 1 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Active

This is some placeholder 2 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Link

This is some placeholder 3 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Disabled

This is some placeholder 4 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Web Component

<uxf-tabs align="end">  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 1 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Active</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 2 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 3 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header" disabled>Disabled</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 4 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content></uxf-tabs>

React

<UxfTabs align="end">  <UxfTabsHeader slot="header">Link</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 1 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent>  <UxfTabsHeader slot="header">Active</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 2 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent>  <UxfTabsHeader slot="header">Link</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 3 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent>  <UxfTabsHeader slot="header" disabled>Disabled</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 4 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent></UxfTabs>

Angular

<uxf-tabs align="end">  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 1 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Active</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 2 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 3 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header" disabled>Disabled</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 4 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content></uxf-tabs>

Pills

Set property pills to 'true' to display tabs as pills:

Link

This is some placeholder 1 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Active

This is some placeholder 2 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Link

This is some placeholder 3 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Disabled

This is some placeholder 4 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Web Component

<uxf-tabs pills>  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 1 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Active</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 2 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 3 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header" disabled>Disabled</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 4 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content></uxf-tabs>

React

<UxfTabs pills>  <UxfTabsHeader slot="header">Link</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 1 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent>  <UxfTabsHeader slot="header">Active</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 2 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent>  <UxfTabsHeader slot="header">Link</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 3 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent>  <UxfTabsHeader slot="header" disabled>Disabled</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 4 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent></UxfTabs>

Angular

<uxf-tabs pills>  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 1 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Active</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 2 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 3 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header" disabled>Disabled</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 4 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content></uxf-tabs>

Vertical

Set property vertical to 'true' to display tabs vertically:

Link

This is some placeholder 1 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Active

This is some placeholder 2 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Link

This is some placeholder 3 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Disabled

This is some placeholder 4 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Web Component

<uxf-tabs pills vertical align="right">  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 1 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Active</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 2 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 3 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header" disabled>Disabled</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 4 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content></uxf-tabs>

React

<UxfTabs pills vertical align="right">  <UxfTabsHeader slot="header">Link</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 1 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent>  <UxfTabsHeader slot="header">Active</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 2 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent>  <UxfTabsHeader slot="header">Link</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 3 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent>  <UxfTabsHeader slot="header" disabled>Disabled</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 4 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent></UxfTabs>

Angular

<uxf-tabs pills vertical align="right">  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 1 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Active</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 2 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 3 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header" disabled>Disabled</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 4 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content></uxf-tabs>

Set initially active tab

Set property active to index (starting from 1) of the tab you want to be initially opened:

Link

This is some placeholder 1 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Active

This is some placeholder 2 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Link

This is some placeholder 3 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Disabled

This is some placeholder 4 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Web Component

<uxf-tabs active="2">  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 1 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Active</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 2 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 3 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header" disabled>Disabled</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 4 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content></uxf-tabs>

React

<UxfTabs active="2">  <UxfTabsHeader slot="header">Link</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 1 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent>  <UxfTabsHeader slot="header">Active</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 2 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent>  <UxfTabsHeader slot="header">Link</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 3 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent>  <UxfTabsHeader slot="header" disabled>Disabled</UxfTabsHeader>  <UxfTabsContent slot="content">    <p class="mt-2"><strong>This is some placeholder 4 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </UxfTabsContent></UxfTabs>

Angular

<uxf-tabs active="2">  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 1 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Active</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 2 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 3 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header" disabled>Disabled</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 4 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content></uxf-tabs>

Set active tab

Set property active to index (starting from 1) of the tab you want to be opened:

Link

This is some placeholder 1 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Active

This is some placeholder 2 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Link

This is some placeholder 3 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Disabled

This is some placeholder 4 content the Home tab's associated content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.

Set second tab active

Web Component

<uxf-tabs id="tabs">  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 1 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Active</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 2 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header">Link</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 3 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content>  <uxf-tabs-header slot="header" disabled>Disabled</uxf-tabs-header>  <uxf-tabs-content slot="content">    <p class="mt-2"><strong>This is some placeholder 4 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>  </uxf-tabs-content></uxf-tabs><uxf-button id="setSecondTabActiveButton" variant="primary">  Toggle Offcanvas</uxf-button>
<script>  const setSecondTabActiveButton = document.getElementById('setSecondTabActiveButton');  const tabs = document.getElementById('tabs');  setSecondTabActiveButton.addEventListener('click', function (event) {    tabs.active = 2;  });</script>

React

export const LiveDemo = () => {  const tabsRef = React.createRef();  return (    <>      <UxfTabs ref={tabsRef}>        <UxfTabsHeader slot="header">Link</UxfTabsHeader>        <UxfTabsContent slot="content">          <p class="mt-2"><strong>This is some placeholder 1 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>        </UxfTabsContent>        <UxfTabsHeader slot="header">Active</UxfTabsHeader>        <UxfTabsContent slot="content">          <p class="mt-2"><strong>This is some placeholder 2 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>        </UxfTabsContent>        <UxfTabsHeader slot="header">Link</UxfTabsHeader>        <UxfTabsContent slot="content">          <p class="mt-2"><strong>This is some placeholder 3 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>        </UxfTabsContent>        <UxfTabsHeader slot="header" disabled>Disabled</UxfTabsHeader>        <UxfTabsContent slot="content">          <p class="mt-2"><strong>This is some placeholder 4 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>        </UxfTabsContent>      </UxfTabs>      <UxfButton variant="primary" onClick={ () => { tabsRef.current.active = 2; } }>        Set second tab active      </UxfButton>    </>  );};
<LiveDemo />

Angular

import { Component } from '@angular/core';
@Component({    selector: 'app-root',    template: `    <uxf-tabs #tabs>      <uxf-tabs-header slot="header">Link</uxf-tabs-header>      <uxf-tabs-content slot="content">        <p class="mt-2"><strong>This is some placeholder 1 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>      </uxf-tabs-content>      <uxf-tabs-header slot="header">Active</uxf-tabs-header>      <uxf-tabs-content slot="content">        <p class="mt-2"><strong>This is some placeholder 2 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>      </uxf-tabs-content>      <uxf-tabs-header slot="header">Link</uxf-tabs-header>      <uxf-tabs-content slot="content">        <p class="mt-2"><strong>This is some placeholder 3 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>      </uxf-tabs-content>      <uxf-tabs-header slot="header" disabled>Disabled</uxf-tabs-header>      <uxf-tabs-content slot="content">        <p class="mt-2"><strong>This is some placeholder 4 content the Home tab's associated content.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, nisl in efficitur pellentesque, eros felis aliquam felis, venenatis fringilla augue massa id augue. Quisque eros nisi, pharetra id malesuada sit amet, pellentesque non tellus.</p>      </uxf-tabs-content>    </uxf-tabs>    <uxf-button (click)="handleClick(tabs)" variant="primary">      Toggle Offcanvas    </uxf-button>  `})
export class AppComponent {    handleClick(tabs: any)  {        tabs.el.active = 2;    }}