Update tabview demo

pull/345/head
cagataycivici 2020-06-18 12:24:46 +03:00
parent cbd3e72426
commit 4b4d8ae073
2 changed files with 148 additions and 141 deletions

View File

@ -11,20 +11,20 @@
<div class="card">
<h5>Default</h5>
<TabView>
<TabPanel header="Godfather I">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
<TabPanel header="Header I">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</TabPanel>
<TabPanel header="Godfather II">
<p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
<TabPanel header="Header II">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
</TabPanel>
<TabPanel header="Godfather III">
<p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
<TabPanel header="Header III">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
</TabPanel>
</TabView>
</div>
@ -38,44 +38,43 @@
</div>
<TabView>
<TabPanel header="Godfather I" :active.sync="active[0]">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
<TabPanel header="Header I" :active.sync="active[0]">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</TabPanel>
<TabPanel header="Godfather II" :active.sync="active[1]">
<p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
<TabPanel header="Header II" :active.sync="active[1]">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
</TabPanel>
<TabPanel header="Godfather III" :active.sync="active[2]">
<p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
<TabPanel header="Header III" :active.sync="active[2]">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
</TabPanel>
</TabView>
</div>
<div class="card">
<h5>Disabled</h5>
<TabView>
<TabPanel header="Godfather I">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
<TabPanel header="Header I">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</TabPanel>
<TabPanel header="Godfather II">
<p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
<TabPanel header="Header II">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
</TabPanel>
<TabPanel header="Godfather III">
<p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
<TabPanel header="Header III">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
</TabPanel>
<TabPanel header="Godfather IV" :disabled="true"></TabPanel>
<TabPanel header="Header IV" :disabled="true"></TabPanel>
</TabView>
</div>
@ -85,30 +84,30 @@
<TabPanel>
<template slot="header">
<i class="pi pi-calendar"></i>
<span>Godfather I</span>
<span>Header I</span>
</template>
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</TabPanel>
<TabPanel>
<template slot="header">
<span>Godfather II</span>
<span>Header II</span>
<i class="pi pi-user"></i>
</template>
<p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
</TabPanel>
<TabPanel>
<template slot="header">
<i class="pi pi-search"></i>
<span>Godfather III</span>
<span>Header III</span>
<i class="pi pi-cog"></i>
</template>
<p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
</TabPanel>
</TabView>
</div>

View File

@ -236,101 +236,109 @@ export default {
</a>
<CodeHighlight>
<template v-pre>
&lt;h3&gt;Default&lt;/h3&gt;
&lt;TabView&gt;
&lt;TabPanel header="Godfather I"&gt;
&lt;p&gt;gThe story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel header="Godfather II"&gt;
&lt;p&gt;Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel header="Godfather III"&gt;
&lt;p&gt;The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;/TabView&gt;
&lt;h3&gt;Programmatic&lt;/h3&gt;
&lt;div style="padding: .5rem 0 1rem 0"&gt;
&lt;Button @click="activate(0)" class="p-button-secondary" label="Activate 1st" /&gt;
&lt;Button @click="activate(1)" class="p-button-secondary" label="Activate 2nd" /&gt;
&lt;Button @click="activate(2)" class="p-button-secondary" label="Activate 3rd" /&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Default&lt;/h5&gt;
&lt;TabView&gt;
&lt;TabPanel header="Header I"&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel header="Header II"&gt;
&lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel header="Header III"&gt;
&lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;/TabView&gt;
&lt;/div&gt;
&lt;TabView&gt;
&lt;TabPanel header="Godfather I" :active.sync="active[0]"&gt;
&lt;p&gt;The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel header="Godfather II" :active.sync="active[1]"&gt;
&lt;p&gt;Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel header="Godfather III" :active.sync="active[2]"&gt;
&lt;p&gt;The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;/TabView&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Programmatic&lt;/h5&gt;
&lt;div style="padding: .5rem 0 1rem 0"&gt;
&lt;Button @click="activate(0)" class="p-button-secondary" label="Activate 1st" /&gt;
&lt;Button @click="activate(1)" class="p-button-secondary" label="Activate 2nd" /&gt;
&lt;Button @click="activate(2)" class="p-button-secondary" label="Activate 3rd" /&gt;
&lt;/div&gt;
&lt;h3&gt;Disabled&lt;/h3&gt;
&lt;TabView&gt;
&lt;TabPanel header="Godfather I"&gt;
&lt;p&gt;The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel header="Godfather II"&gt;
&lt;p&gt;Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel header="Godfather III"&gt;
&lt;p&gt;The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel header="Godfather IV" :disabled="true"&gt;&lt;/TabPanel&gt;
&lt;/TabView&gt;
&lt;TabView&gt;
&lt;TabPanel header="Header I" :active.sync="active[0]"&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel header="Header II" :active.sync="active[1]"&gt;
&lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel header="Header III" :active.sync="active[2]"&gt;
&lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;/TabView&gt;
&lt;/div&gt;
&lt;h3&gt;Custom Headers&lt;/h3&gt;
&lt;TabView class="tabview-custom"&gt;
&lt;TabPanel&gt;
&lt;template slot="header"&gt;
&lt;i class="pi pi-calendar"&gt;&lt;/i&gt;
&lt;span&gt;Godfather I&lt;/span&gt;
&lt;/template&gt;
&lt;p&gt;The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel&gt;
&lt;template slot="header"&gt;
&lt;span&gt;Godfather II&lt;/span&gt;
&lt;i class="pi pi-user"&gt;&lt;/i&gt;
&lt;/template&gt;
&lt;p&gt;Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel&gt;
&lt;template slot="header"&gt;
&lt;i class="pi pi-search"&gt;&lt;/i&gt;
&lt;span&gt;Godfather III&lt;/span&gt;
&lt;i class="pi pi-cog"&gt;&lt;/i&gt;
&lt;/template&gt;
&lt;p&gt;The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
A decade earlier, he gave custody of his two children to Kay, who has since remarried.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;/TabView&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Disabled&lt;/h5&gt;
&lt;TabView&gt;
&lt;TabPanel header="Header I"&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel header="Header II"&gt;
&lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel header="Header III"&gt;
&lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel header="Header IV" :disabled="true"&gt;&lt;/TabPanel&gt;
&lt;/TabView&gt;
&lt;/div&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Custom Headers&lt;/h5&gt;
&lt;TabView class="tabview-custom"&gt;
&lt;TabPanel&gt;
&lt;template slot="header"&gt;
&lt;i class="pi pi-calendar"&gt;&lt;/i&gt;
&lt;span&gt;Header I&lt;/span&gt;
&lt;/template&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel&gt;
&lt;template slot="header"&gt;
&lt;span&gt;Header II&lt;/span&gt;
&lt;i class="pi pi-user"&gt;&lt;/i&gt;
&lt;/template&gt;
&lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;TabPanel&gt;
&lt;template slot="header"&gt;
&lt;i class="pi pi-search"&gt;&lt;/i&gt;
&lt;span&gt;Header III&lt;/span&gt;
&lt;i class="pi pi-cog"&gt;&lt;/i&gt;
&lt;/template&gt;
&lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.&lt;/p&gt;
&lt;/TabPanel&gt;
&lt;/TabView&gt;
&lt;/div&gt;
</template>
</CodeHighlight>