TabView & TabPanel pt tab added
Tuğçe Küçükoğlu
parent
3a09904e8d
commit
ce832efb15
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card">
|
||||
<TabView>
|
||||
<TabPanel
|
||||
v-for="(tab, index) in scrollableTabs"
|
||||
:key="tab.title"
|
||||
:header="tab.title"
|
||||
:pt="{
|
||||
headeraction: ({ props, parent }) => ({
|
||||
class: panelClass(props, parent, index)
|
||||
})
|
||||
}"
|
||||
>
|
||||
<p>{{ tab.content }}</p>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollableTabs: Array.from({ length: 3 }, (_, i) => ({
|
||||
title: `Header ${i + 1}`,
|
||||
content: `Tab ${i + 1} Content`
|
||||
})),
|
||||
code: {
|
||||
basic: `
|
||||
<TabView>
|
||||
<TabPanel v-for="(tab, index) in scrollableTabs" :key="tab.title" :header="tab.title"
|
||||
:pt="{
|
||||
headeraction: ({ props, parent }) => ({
|
||||
class: panelClass(props, parent, index)
|
||||
})
|
||||
}">
|
||||
<p>{{ tab.content }}</p>
|
||||
</TabPanel>
|
||||
</TabView>`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<TabView>
|
||||
<TabPanel v-for="(tab, index) in scrollableTabs" :key="tab.title" :header="tab.title"
|
||||
:pt="{
|
||||
headeraction: ({ props, parent }) => ({
|
||||
class: panelClass(props, parent, index)
|
||||
})
|
||||
}">
|
||||
<p>{{ tab.content }}</p>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollableTabs: Array.from({ length: 3 }, (_, i) => ({
|
||||
title: \`Header \${i + 1}\`,
|
||||
content: \`Tab \${i + 1} Content\`
|
||||
}))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
panelClass(props, parent, index) {
|
||||
return [
|
||||
{
|
||||
'bg-primary': parent.state.d_activeIndex === index
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<TabView>
|
||||
<TabPanel v-for="(tab, index) in scrollableTabs" :key="tab.title" :header="tab.title"
|
||||
:pt="{
|
||||
headeraction: ({ props, parent }) => ({
|
||||
class: panelClass(props, parent, index)
|
||||
})
|
||||
}">
|
||||
<p>{{ tab.content }}</p>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const scrollableTabs = ref(Array.from({ length: 3 }, (_, i) => ({
|
||||
title: \`Header \${i + 1}\`,
|
||||
content: \`Tab \${i + 1} Content\`
|
||||
})));
|
||||
|
||||
const panelClass = (props, parent, index) => {
|
||||
return [
|
||||
{
|
||||
'bg-primary': parent.state.d_activeIndex === index
|
||||
}
|
||||
];
|
||||
};
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
panelClass(props, parent, index) {
|
||||
return [
|
||||
{
|
||||
'bg-primary': parent.state.d_activeIndex === index
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div>
|
||||
<img class="w-full" src="/images/pt/tabview.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>Panel Pass Through</h1>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Image',
|
||||
description: 'Pass Through Image',
|
||||
component: PTImage
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.accordion',
|
||||
label: 'TabView PT Options',
|
||||
description: 'Pass Through TabView',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('TabView')
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.tab',
|
||||
label: 'TabPanel PT Options',
|
||||
description: 'Pass Through TabPanel',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('TabPanel')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
description: 'Pass Through Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card">
|
||||
<Toolbar :pt="{ root: { class: 'p-1' }, groupleft: { class: 'p-2 text-primary' } }">
|
||||
<template #start>
|
||||
<span>PrimeVue</span>
|
||||
</template>
|
||||
<template #end>
|
||||
<Button label="Logout" />
|
||||
</template>
|
||||
</Toolbar>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<TabView>
|
||||
<Toolbar :pt="{ root: { class: 'p-1' }, groupleft: { class: 'p-2 text-primary' } }">
|
||||
<template #start>
|
||||
<span>PrimeVue</span>
|
||||
</template>
|
||||
<template #end>
|
||||
<Button label="Logout" />
|
||||
</template>
|
||||
</Toolbar>
|
||||
</TabView>`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Toolbar :pt="{ root: { class: 'p-1' }, groupleft: { class: 'p-2 text-primary' } }">
|
||||
<template #start>
|
||||
<span>PrimeVue</span>
|
||||
</template>
|
||||
<template #end>
|
||||
<Button label="Logout" />
|
||||
</template>
|
||||
</Toolbar>
|
||||
</div>
|
||||
</template>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Toolbar :pt="{ root: { class: 'p-1' }, groupleft: { class: 'p-2 text-primary' } }">
|
||||
<template #start>
|
||||
<span>PrimeVue</span>
|
||||
</template>
|
||||
<template #end>
|
||||
<Button label="Logout" />
|
||||
</template>
|
||||
</Toolbar>
|
||||
</div>
|
||||
</template>`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
panelClass(props, parent, index) {
|
||||
return [
|
||||
{
|
||||
'bg-primary': parent.state.d_activeIndex === index
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div>
|
||||
<img class="w-full" src="/images/pt/toolbar.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>Toolbar Pass Through</h1>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Image',
|
||||
description: 'Pass Through Image',
|
||||
component: PTImage
|
||||
},
|
||||
{
|
||||
id: 'pt.doc',
|
||||
label: 'Toolbar Elements',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Toolbar')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
description: 'Pass Through Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<DocComponent title="Vue Tabs Component" header="TabView" description="TabView is a container component to group content with tabs." :componentDocs="docs" :apiDocs="['TabView', 'TabPanel']" />
|
||||
<DocComponent title="Vue Tabs Component" header="TabView" description="TabView is a container component to group content with tabs." :componentDocs="docs" :apiDocs="['TabView', 'TabPanel']" :ptTabComponent="ptComponent" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -12,6 +12,8 @@ import ImportDoc from '@/doc/tabview/ImportDoc.vue';
|
|||
import ScrollableDoc from '@/doc/tabview/ScrollableDoc.vue';
|
||||
import StyleDoc from '@/doc/tabview/StyleDoc.vue';
|
||||
import TemplateDoc from '@/doc/tabview/TemplateDoc.vue';
|
||||
import PTComponent from '@/doc/tabview/pt/index.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -61,7 +63,8 @@ export default {
|
|||
label: 'Accessibility',
|
||||
component: AccessibilityDoc
|
||||
}
|
||||
]
|
||||
],
|
||||
ptComponent: PTComponent
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
<template>
|
||||
<DocComponent title="Vue Toolbar Component" header="Toolbar" description="Toolbar is a grouping component for buttons and other content." :componentDocs="docs" :apiDocs="['Toolbar']" />
|
||||
<DocComponent title="Vue Toolbar Component" header="Toolbar" description="Toolbar is a grouping component for buttons and other content." :componentDocs="docs" :apiDocs="['Toolbar']" :ptTabComponent="ptComponent" />
|
||||
</template>
|
||||
<script>
|
||||
import AccessibilityDoc from '@/doc/toolbar/AccessibilityDoc';
|
||||
import BasicDoc from '@/doc/toolbar/BasicDoc';
|
||||
import ImportDoc from '@/doc/toolbar/ImportDoc';
|
||||
import StyleDoc from '@/doc/toolbar/StyleDoc';
|
||||
import PTComponent from '@/doc/toolbar/pt/index.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -30,7 +32,8 @@ export default {
|
|||
label: 'Accessibility',
|
||||
component: AccessibilityDoc
|
||||
}
|
||||
]
|
||||
],
|
||||
ptComponent: PTComponent
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue