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

Demo fixes

pull/3714/head
Tuğçe Küçükoğlu 2023-03-09 14:39:38 +03:00
parent ef1adfafe8
commit 4eb73f5df2
8 changed files with 55 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
doc/datatable/ColumnGroupDoc.vue
View File

@ -196,7 +196,7 @@ export default {
}
}
}
<\\/script>
<\/script>
`,
composition: `
<template>

4
doc/datatable/ExportDoc.vue
View File

@ -73,7 +73,7 @@ export default {
}
}
}
<\\/script>
<\/script>
`,
composition: `
<template>
@ -105,7 +105,7 @@ const products = ref();
const exportCSV = () => {
dt.value.exportCSV();
};
<\\/script>
<\/script>
`
}
};

12
doc/tabview/BasicDoc.vue
View File

@ -3,7 +3,7 @@
<p>TabView consists of one or more TabPanel elements.</p>
</DocSectionText>
<div class="card">
<TabView ref="tabview1">
<TabView>
<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
@ -33,7 +33,7 @@ export default {
return {
code: {
basic: `
<TabView ref="tabview1">
<TabView>
<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
@ -57,7 +57,7 @@ export default {
options: `
<template>
<div class="card">
<TabView ref="tabview1">
<TabView>
<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
@ -81,12 +81,12 @@ export default {
</template>
<script>
<\\/script>
<\/script>
`,
composition: `
<template>
<div class="card">
<TabView ref="tabview1">
<TabView>
<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
@ -110,7 +110,7 @@ export default {
</template>
<script setup>
<\\/script>
<\/script>
`
}
};

47
doc/tabview/ControlledDoc.vue
View File

@ -4,12 +4,12 @@
</DocSectionText>
<div class="card">
<div class="py-2">
<Button @click="active1 = 0" text label="Activate 1st" />
<Button @click="active1 = 1" text class="mr-2" label="Activate 2nd" />
<Button @click="active1 = 2" text class="mr-2" label="Activate 3rd" />
<Button @click="active = 0" text label="Activate 1st" />
<Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
<Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
</div>
<TabView ref="tabview2" v-model:activeIndex="active1">
<TabView v-model:activeIndex="active">
<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
@ -37,16 +37,16 @@
export default {
data() {
return {
active1: 0,
active: 0,
code: {
basic: `
<div class="py-2">
<Button @click="active1 = 0" text label="Activate 1st" />
<Button @click="active1 = 1" text class="mr-2" label="Activate 2nd" />
<Button @click="active1 = 2" text class="mr-2" label="Activate 3rd" />
<Button @click="active = 0" text label="Activate 1st" />
<Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
<Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
</div>
<TabView ref="tabview2" v-model:activeIndex="active1">
<TabView v-model:activeIndex="active">
<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
@ -65,18 +65,17 @@ export default {
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>
`,
</TabView>`,
options: `
<template>
<div class="card">
<div class="py-2">
<Button @click="active1 = 0" text label="Activate 1st" />
<Button @click="active1 = 1" text class="mr-2" label="Activate 2nd" />
<Button @click="active1 = 2" text class="mr-2" label="Activate 3rd" />
<Button @click="active = 0" text label="Activate 1st" />
<Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
<Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
</div>
<TabView ref="tabview2" v-model:activeIndex="active1">
<TabView v-model:activeIndex="active">
<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
@ -103,22 +102,21 @@ export default {
export default {
data() {
return {
active1: 0
active: 0
};
}
};
<\\/script>
`,
<\/script>`,
composition: `
<template>
<div class="card">
<div class="py-2">
<Button @click="active1 = 0" text label="Activate 1st" />
<Button @click="active1 = 1" text class="mr-2" label="Activate 2nd" />
<Button @click="active1 = 2" text class="mr-2" label="Activate 3rd" />
<Button @click="active = 0" text label="Activate 1st" />
<Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
<Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
</div>
<TabView ref="tabview2" v-model:activeIndex="active1">
<TabView v-model:activeIndex="active">
<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
@ -144,9 +142,8 @@ export default {
<script setup>
import { ref } from 'vue';
const active1 = ref(0);
<\\/script>
`
const active = ref(0);
<\/script>`
}
};
}

17
doc/tabview/DisabledDoc.vue
View File

@ -3,7 +3,7 @@
<p>Enabling <i>disabled</i> property of a TabPanel prevents user interaction.</p>
</DocSectionText>
<div class="card">
<TabView ref="tabview3">
<TabView>
<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
@ -34,7 +34,7 @@ export default {
return {
code: {
basic: `
<TabView ref="tabview3">
<TabView>
<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
@ -55,12 +55,11 @@ export default {
</p>
</TabPanel>
<TabPanel header="Header IV" :disabled="true"></TabPanel>
</TabView>
`,
</TabView>`,
options: `
<template>
<div class="card">
<TabView ref="tabview3">
<TabView>
<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
@ -85,12 +84,11 @@ export default {
</template>
<script>
<\\/script>
`,
<\/script>`,
composition: `
<template>
<div class="card">
<TabView ref="tabview3">
<TabView>
<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
@ -115,8 +113,7 @@ export default {
</template>
<script setup>
<\\/script>
`
<\/script>`
}
};
}

13
doc/tabview/DynamicDoc.vue
View File

@ -27,11 +27,10 @@ export default {
<TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
<p>{{ tab.content }}</p>
</TabPanel>
</TabView>
`,
</TabView>`,
options: `
<template>
<div class="card">
<div class="card">
<TabView>
<TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
<p>{{ tab.content }}</p>
@ -52,11 +51,10 @@ export default {
};
}
};
<\\/script>
`,
<\/script>`,
composition: `
<template>
<div class="card">
<div class="card">
<TabView>
<TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
<p>{{ tab.content }}</p>
@ -73,8 +71,7 @@ const tabs = ref([
{ title: 'Tab 2', content: 'Tab 2 Content' },
{ title: 'Tab 3', content: 'Tab 3 Content' }
]);
<\\/script>
`
<\/script>`
}
};
}

13
doc/tabview/ScrollableDoc.vue
View File

@ -23,11 +23,10 @@ export default {
<TabPanel v-for="tab in scrollableTabs" :key="tab.title" :header="tab.title">
<p>{{ tab.content }}</p>
</TabPanel>
</TabView>
`,
</TabView>`,
options: `
<template>
<div class="card">
<div class="card">
<TabView :scrollable="true">
<TabPanel v-for="tab in scrollableTabs" :key="tab.title" :header="tab.title">
<p>{{ tab.content }}</p>
@ -44,11 +43,10 @@ export default {
};
}
};
<\\/script>
`,
<\/script>`,
composition: `
<template>
<div class="card">
<div class="card">
<TabView :scrollable="true">
<TabPanel v-for="tab in scrollableTabs" :key="tab.title" :header="tab.title">
<p>{{ tab.content }}</p>
@ -61,8 +59,7 @@ export default {
import { ref } from 'vue';
const scrollableTabs = ref(Array.from({ length: 50 }, (_, i) => ({ title: \`Tab \${i + 1}\`, content: \`Tab \${i + 1} Content\` })));
<\\/script>
`
<\/script>`
}
};
}

17
doc/tabview/TemplateDoc.vue
View File

@ -3,7 +3,7 @@
<p>Custom content for the title section of a panel is defined using the header template.</p>
</DocSectionText>
<div class="card">
<TabView ref="tabview4" class="tabview-custom">
<TabView class="tabview-custom">
<TabPanel>
<template #header>
<i class="pi pi-calendar mr-2"></i>
@ -46,7 +46,7 @@ export default {
return {
code: {
basic: `
<TabView ref="tabview4" class="tabview-custom">
<TabView class="tabview-custom">
<TabPanel>
<template #header>
<i class="pi pi-calendar mr-2"></i>
@ -78,12 +78,11 @@ export default {
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>
`,
</TabView>`,
options: `
<template>
<div class="card">
<TabView ref="tabview4" class="tabview-custom">
<TabView class="tabview-custom">
<TabPanel>
<template #header>
<i class="pi pi-calendar mr-2"></i>
@ -120,12 +119,11 @@ export default {
</template>
<script>
<\\/script>
`,
<\/script>`,
composition: `
<template>
<div class="card">
<TabView ref="tabview4" class="tabview-custom">
<TabView class="tabview-custom">
<TabPanel>
<template #header>
<i class="pi pi-calendar ml-2"></i>
@ -162,8 +160,7 @@ export default {
</template>
<script setup>
<\\/script>
`
<\/script>`
}
};
}