UNi Tab Group

<uni-tab-group /> is a tab component designed to instantly apply uniopen's design elements to any child element assigned with [slot=tab], enabling rapid integration across multiple pages.

Let's see what can <uni-tab-group /> do ?

tab 1 tab 2 tab 3 tab 4 tab 5

  • size：

Basic Usage

<uni-tab-group /> is a web component. All we need to do is put the required script into your HTML document. Then follow <uni-tab-group />'s html structure and everything will be all set.

Required Script

<script type="module" src="https://unpkg.com/uni-tab-group/mjs/wc-uni-tab-group.js"> </script>

Structure

Put <uni-tab-group /> into HTML document. It will have different functions and looks with attribute mutation.

<uni-tab-group> <a href="#tab1" slot="tab" data-active>tab 1</a> <a href="#tab2" slot="tab">tab 2</a> <a href="#tab3" slot="tab">tab 3</a> <a href="#tab4" slot="tab">tab 4</a> <a href="#tab5" slot="tab">tab 5</a> </uni-tab-group>

JavaScript Instantiation

<uni-tab-group /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module"> import { UniTabGroup } from 'https://unpkg.com/uni-tab-group/mjs/wc-uni-tab-group.js'; const tabsTemplate = document.querySelector('.my-tabs-template'); // use DOM api const nodeA = document.createElement('uni-tab-group'); nodeA.appendChild(tabsTemplate.content.cloneNode(true)); document.body.appendChild(nodeA); // new instance with Class const nodeB = new UniTabGroup(); nodeB.appendChild(tabsTemplate.content.cloneNode(true)); document.body.appendChild(nodeB); </script>

Style Customization

Developers could apply styles to decorate <uni-tab-group />'s looking.

<style> uni-tab-group { --uni-tab-group-text-color-normal: var(--ct_text_main_general); --uni-tab-group-text-color-hover: var(--ct_text_moderate_subtlest); --uni-tab-group-text-color-active: var(--ct_text_inverse_general); --uni-tab-group-background-color-normal: transparent; --uni-tab-group-background-color-hover: transparent; --uni-tab-group-background-color-active: var(--ct_tab-segmented_unit_selected); --uni-tab-group-mask-size: 12px; } </style>

Additionally, a specific tab can be highlighted simply by applying the data-active attribute.

<uni-tab-group> <a href="#tab1" slot="tab" data-active>tab 1</a> <a href="#tab2" slot="tab">tab 2</a> <a href="#tab3" slot="tab">tab 3</a> </uni-tab-group>

Attribute

<uni-tab-group /> component exposes a curated set of attributes, enabling developers to dynamically adjust the user interface. This provides the flexibility to tailor the component’s appearance to seamlessly adapt to any given context.

size

The size attribute configures the overall dimensions of <uni-tab-group />. The component currently supports three standard options: large, medium, and small, defaulting to medium.

<uni-tab-group size="medium" > <a href="#tab1" slot="tab" data-active>tab 1</a> <a href="#tab2" slot="tab">tab 2</a> <a href="#tab3" slot="tab">tab 3</a> <a href="#tab4" slot="tab">tab 4</a> <a href="#tab5" slot="tab">tab 5</a> </uni-tab-group>

Property

Property Name Type Description
size String Getter / Setter size. size configures the overall dimensions of <uni-tab-group />. The component currently supports three standard options: large, medium, and small, defaulting to medium.

Mathod

Mathod Signature Description
refresh() Force a UI refresh on <uni-tab-group />.

Reference