Lesson: 12 | Tabset

Represents a list of tabs.

HTML

<template>
    <lightning-tabset>
        <lightning-tab label="Item One">
            One Content !
        </lightning-tab>
        <lightning-tab label="Item Two">
            Two Content !
        </lightning-tab>
        <lightning-tab label="Item Three">
            Three Content !
        </lightning-tab>
    </lightning-tabset>
</template>

Tabset with scoped variant:

The scoped variant displays the tabset with a different visual styling than the default.

HTML

<template>
    <lightning-tabset variant="scoped">
        <lightning-tab label="Tab A">
            Content for Tab A
        </lightning-tab>
        <lightning-tab label="Tab B">
            Content for Tab B
        </lightning-tab>
        <lightning-tab label="Tab C">
            Content for Tab C
        </lightning-tab>
    </lightning-tabset>
</template>

Tabset with Default Selected Tab:

A tabset can display an active tab by default using the active-tab-value attribute.

HTML

<template>
    <lightning-tabset active-tab-value="two">
        <lightning-tab label="Tab A" value="one">
            Content for Tab A
        </lightning-tab>
        <lightning-tab label="Tab B" value="two">
            Content for Tab B
        </lightning-tab>
        <lightning-tab label="Tab C" value="three">
            Content for Tab C
        </lightning-tab>
    </lightning-tabset>
</template>

Prev You need to login to have access to the quizzes. Next

Mastered by 41 users.

Lightning Web Components

A. Component Reference (27 lessons)

B. Lightning Web Components | Utilities (11 lessons)

C. Lightning Web Component Guide (41 lessons)

D. Java Script Methods for LWC (23 lessons)

E. HTML (18 lessons)

F. JavaScript (19 lessons)

Go to top

Lesson: 12 | Tabset

Represents a list of tabs.

HTML

Preview

Video

Tabset with scoped variant:

HTML

Preview

Video

Tabset with Default Selected Tab:

HTML

Preview

Video

Lightning Web Components

Login to your account

Lesson: 12 | Tabset

Represents a list of tabs.

HTML

Tabset with scoped variant:

HTML

Tabset with Default Selected Tab:

HTML

Lightning Web Components