Tabs

Properties

• Label
• State
• Content

Shoelace

https://shoelace.style/components/tab

<sl-tab>Tab</sl-tab>
<sl-tab active>Active</sl-tab>
<sl-tab closable>Closable</sl-tab>
<sl-tab disabled>Disabled</sl-tab>

vue-dsfr

https://vue-dsfr.netlify.app/?path=/docs/composants-dsfrtabs--docs

This is a simple tab panel, you can reference a more complex one following the docs to the documentation

<template>
  <DsfrTabs
    :tab-list-name="tabListName"
    :tab-titles="tabTitles"
    :tab-contents="tabContents"
    :initial-selected-index="initialSelectedIndex"
  />
</template>

Vuetify

https://vuetifyjs.com/en/components/tabs/

<template>
  <v-card>
    <v-tabs
    v-model="tab"
    bg-color="primary"
    >
      <v-tab value="one">Item One</v-tab>
      <v-tab value="two">Item Two</v-tab>
      <v-tab value="three">Item Three</v-tab>
    </v-tabs>

    <v-card-text>
      <v-window v-model="tab">
        <v-window-item value="one">
          One
        </v-window-item>

        <v-window-item value="two">
          Two
        </v-window-item>

        <v-window-item value="three">
          Three
        </v-window-item>
      </v-window>
    </v-card-text>
  </v-card>
</template>