vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Visuals for controlled demo

pull/4683/head
Cagatay Civici 2023-10-23 17:43:42 +03:00
parent a176a50933
commit c1f0884aa6
1 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
doc/tabview/ControlledDoc.vue
View File

@ -3,10 +3,10 @@
<p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p> <p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<div class="py-2"> <div class="flex mb-2 gap-2 justify-content-end">
<Button @click="active = 0" text label="Activate 1st" /> <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 class="mr-2" label="Activate 2nd" /> <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 class="mr-2" label="Activate 3rd" /> <Button @click="active = 2" text plain rounded label="3" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 2 }]" />
</div> </div>
<TabView v-model:activeIndex="active"> <TabView v-model:activeIndex="active">
@ -40,10 +40,10 @@ export default {
active: 0, active: 0,
code: { code: {
basic: ` basic: `
<div class="py-2"> <div class="flex mb-2 gap-2 justify-content-end">
<Button @click="active = 0" text label="Activate 1st" /> <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 class="mr-2" label="Activate 2nd" /> <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 class="mr-2" label="Activate 3rd" /> <Button @click="active = 2" text plain rounded label="3" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 2 }]" />
</div> </div>
<TabView v-model:activeIndex="active"> <TabView v-model:activeIndex="active">
@ -70,10 +70,10 @@ export default {
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<div class="py-2"> <div class="flex mb-2 gap-2 justify-content-end">
<Button @click="active = 0" text label="Activate 1st" /> <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 class="mr-2" label="Activate 2nd" /> <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 class="mr-2" label="Activate 3rd" /> <Button @click="active = 2" text plain rounded label="3" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 2 }]" />
</div> </div>
<TabView v-model:activeIndex="active"> <TabView v-model:activeIndex="active">
@ -112,10 +112,10 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card"> <div class="card">
<div class="py-2"> <div class="flex mb-2 gap-2 justify-content-end">
<Button @click="active = 0" text label="Activate 1st" /> <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 class="mr-2" label="Activate 2nd" /> <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 class="mr-2" label="Activate 3rd" /> <Button @click="active = 2" text plain rounded label="3" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 2 }]" />
</div> </div>
<TabView v-model:activeIndex="active"> <TabView v-model:activeIndex="active">