V3-Tab

Appearance

Component Mode ​

This is the component mode of the tabs. It is the most flexible mode. You can use it to create any kind of tabbed interface. You can use it to create a tabbed interface for a form, a tabbed interface for a wizard, or a tabbed interface for a settings page.

Hello this is component 1
Hello this is component 2
Hello this is component 3
Preview the code
vue
<script setup>
import v3Tab from "../../src/components/v3-tab.vue";
import Tab1 from "./components/Tab1.vue";
import Tab2 from "./components/Tab2.vue";
import Tab3 from "./components/Tab3.vue";
// import v3Tab from "v3-tab";
</script>
<template>
  <v3Tab
    :tabHead="['Tab 1', 'Tab 2', 'Tab 3']"
    :tabData="[Tab1, Tab2, Tab3]"
    :componentMode="true"
  />
</template>
<style>
/* reseting buttons */
button {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
}

:root {
  --dark-bg-zinc-900: #272a2f; /* Dark mode background color */
  --dark-border-zinc-700: #31313a; /* Dark mode border color */
  --dark-text-zinc-200: #ccc; /* Dark mode text color */
}

/* .tabList */
.tabList {
  padding: 0.75rem;
  display: flex;
  gap: 0.25rem;
  background-color: #f3f4f6;
  border-radius: 8px;
  overflow-x: auto;
}
.dark .tabList {
  background-color: var(--dark-bg-zinc-900);
}

/* .tabListButton */
.tabListButton {
  font-weight: normal;
  white-space: nowrap;
  outline: none;
  transition: all 300ms ease-in-out;
  cursor: pointer;
  padding: 0.75rem;
  font-size: 1rem;
  border-radius: 0.3125rem;
  line-height: 1.25rem;
  outline: none;
}
.dark .tabListButton {
  color: var(--dark-text-zinc-200);
}

/* .tabListButtonSelected */
.tabListButtonSelected {
  background-color: #aee4fd;
  color: #0b74dd;
  outline: none;
}
.dark .tabListButtonSelected {
  background-color: var(--dark-border-zinc-700);
  color: #aee4fd;
  outline: none;
}

/* .tabListButtonUnSelected */
.tabListButtonUnSelected {
  color: black;
}

/* .tabPanelContainer */
.tabPanelContainer {
  margin-top: 0.5rem;
  height: auto;
  width: 100%;
  overflow: auto;
}

/* .tabPanel */
.tabPanel {
  padding: 0.75rem;
  background: #f3f4f6;
  border-radius: 8px;
}
.dark .tabPanel {
  background: var(--dark-bg-zinc-900);
}
</style>
<script setup>
import v3Tab from "../../src/components/v3-tab.vue";
import Tab1 from "./components/Tab1.vue";
import Tab2 from "./components/Tab2.vue";
import Tab3 from "./components/Tab3.vue";
// import v3Tab from "v3-tab";
</script>
<template>
  <v3Tab
    :tabHead="['Tab 1', 'Tab 2', 'Tab 3']"
    :tabData="[Tab1, Tab2, Tab3]"
    :componentMode="true"
  />
</template>
<style>
/* reseting buttons */
button {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
}

:root {
  --dark-bg-zinc-900: #272a2f; /* Dark mode background color */
  --dark-border-zinc-700: #31313a; /* Dark mode border color */
  --dark-text-zinc-200: #ccc; /* Dark mode text color */
}

/* .tabList */
.tabList {
  padding: 0.75rem;
  display: flex;
  gap: 0.25rem;
  background-color: #f3f4f6;
  border-radius: 8px;
  overflow-x: auto;
}
.dark .tabList {
  background-color: var(--dark-bg-zinc-900);
}

/* .tabListButton */
.tabListButton {
  font-weight: normal;
  white-space: nowrap;
  outline: none;
  transition: all 300ms ease-in-out;
  cursor: pointer;
  padding: 0.75rem;
  font-size: 1rem;
  border-radius: 0.3125rem;
  line-height: 1.25rem;
  outline: none;
}
.dark .tabListButton {
  color: var(--dark-text-zinc-200);
}

/* .tabListButtonSelected */
.tabListButtonSelected {
  background-color: #aee4fd;
  color: #0b74dd;
  outline: none;
}
.dark .tabListButtonSelected {
  background-color: var(--dark-border-zinc-700);
  color: #aee4fd;
  outline: none;
}

/* .tabListButtonUnSelected */
.tabListButtonUnSelected {
  color: black;
}

/* .tabPanelContainer */
.tabPanelContainer {
  margin-top: 0.5rem;
  height: auto;
  width: 100%;
  overflow: auto;
}

/* .tabPanel */
.tabPanel {
  padding: 0.75rem;
  background: #f3f4f6;
  border-radius: 8px;
}
.dark .tabPanel {
  background: var(--dark-bg-zinc-900);
}
</style>
vue
<script setup>

</script>
<template>
    <div>
        Hello this is component 1
    </div>

</template>
<style scoped>

</style>
<script setup>

</script>
<template>
    <div>
        Hello this is component 1
    </div>

</template>
<style scoped>

</style>
vue
<script setup>

</script>
<template>
 <div>
        Hello this is component 2
    </div>
</template>
<style scoped>

</style>
<script setup>

</script>
<template>
 <div>
        Hello this is component 2
    </div>
</template>
<style scoped>

</style>
vue
<script setup></script>
<template>
  <div>Hello this is component 3</div>
</template>
<style scoped></style>
<script setup></script>
<template>
  <div>Hello this is component 3</div>
</template>
<style scoped></style>