Visuals for buttons at the top
parent
ac73b801fe
commit
e7996f40ba
|
@ -4,9 +4,9 @@
|
|||
</DocSectionText>
|
||||
<div class="card">
|
||||
<div class="flex mb-2 gap-2 justify-content-end">
|
||||
<Button @click="active = 0" text plain rounded label="1" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 0 }]" />
|
||||
<Button @click="active = 1" text plain rounded label="2" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 1 }]" />
|
||||
<Button @click="active = 2" text plain rounded label="3" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 2 }]" />
|
||||
<Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
|
||||
<Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
|
||||
<Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
|
||||
</div>
|
||||
|
||||
<TabView v-model:activeIndex="active">
|
||||
|
@ -41,9 +41,9 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<div class="flex mb-2 gap-2 justify-content-end">
|
||||
<Button @click="active = 0" text plain rounded label="1" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 0 }]" />
|
||||
<Button @click="active = 1" text plain rounded label="2" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 1 }]" />
|
||||
<Button @click="active = 2" text plain rounded label="3" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 2 }]" />
|
||||
<Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
|
||||
<Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
|
||||
<Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
|
||||
</div>
|
||||
|
||||
<TabView v-model:activeIndex="active">
|
||||
|
@ -71,9 +71,9 @@ export default {
|
|||
<template>
|
||||
<div class="card">
|
||||
<div class="flex mb-2 gap-2 justify-content-end">
|
||||
<Button @click="active = 0" text plain rounded label="1" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 0 }]" />
|
||||
<Button @click="active = 1" text plain rounded label="2" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 1 }]" />
|
||||
<Button @click="active = 2" text plain rounded label="3" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 2 }]" />
|
||||
<Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
|
||||
<Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
|
||||
<Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
|
||||
</div>
|
||||
|
||||
<TabView v-model:activeIndex="active">
|
||||
|
@ -113,9 +113,9 @@ export default {
|
|||
<template>
|
||||
<div class="card">
|
||||
<div class="flex mb-2 gap-2 justify-content-end">
|
||||
<Button @click="active = 0" text plain rounded label="1" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 0 }]" />
|
||||
<Button @click="active = 1" text plain rounded label="2" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 1 }]" />
|
||||
<Button @click="active = 2" text plain rounded label="3" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 2 }]" />
|
||||
<Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
|
||||
<Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
|
||||
<Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
|
||||
</div>
|
||||
|
||||
<TabView v-model:activeIndex="active">
|
||||
|
|
Loading…
Reference in New Issue