Merge branch 'master' of https://github.com/primefaces/primevue
commit
35412df95c
|
@ -19,7 +19,7 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
<BlockUI :blocked="blocked">
|
<BlockUI :blocked="blocked">
|
||||||
<Panel header="Basic">
|
<Panel header="Basic">
|
||||||
<p class="m-0">
|
<p class="text-gray-700 dark:text-white/80 m-0">
|
||||||
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
|
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.
|
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>
|
</p>
|
||||||
|
|
|
@ -12,7 +12,7 @@ export default {
|
||||||
code: {
|
code: {
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card flex align-items-center justify-content-center">
|
<div class="card flex items-center justify-center">
|
||||||
<Card style="width: 25em">
|
<Card style="width: 25em">
|
||||||
<template #header>
|
<template #header>
|
||||||
<img alt="user header" src="https://primefaces.org/cdn/primevue/images/usercard.png" />
|
<img alt="user header" src="https://primefaces.org/cdn/primevue/images/usercard.png" />
|
||||||
|
|
|
@ -12,7 +12,7 @@ export default {
|
||||||
code: {
|
code: {
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card text-gray-700 dark:text-white/80">
|
||||||
<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
|
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.
|
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.
|
||||||
|
|
|
@ -16,7 +16,7 @@ export default {
|
||||||
<div class="flex flex-wrap gap-3 mb-5">
|
<div class="flex flex-wrap gap-3 mb-5">
|
||||||
<div v-for="pos of positions" :key="pos.label" class="flex items-center">
|
<div v-for="pos of positions" :key="pos.label" class="flex items-center">
|
||||||
<RadioButton v-model="position" :value="pos.value" :inputId="pos.label" name="dock" />
|
<RadioButton v-model="position" :value="pos.value" :inputId="pos.label" name="dock" />
|
||||||
<label :for="pos.label" class="ml-2"> {{ pos.label }} </label>
|
<label :for="pos.label" class="text-gray-700 dark:text-white/80 ml-2"> {{ pos.label }} </label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dock-window" style="backgroundimage: 'url(https://primefaces.org/cdn/primevue/images/dock/window.jpg))'">
|
<div class="dock-window" style="backgroundimage: 'url(https://primefaces.org/cdn/primevue/images/dock/window.jpg))'">
|
||||||
|
@ -71,6 +71,18 @@ const positions = ref([
|
||||||
]);
|
]);
|
||||||
|
|
||||||
<\/script>
|
<\/script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.dock-demo > .dock-window {
|
||||||
|
width: 100%;
|
||||||
|
height: 450px;
|
||||||
|
position: relative;
|
||||||
|
background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -14,9 +14,11 @@ export default {
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Inplace>
|
<Inplace>
|
||||||
<template #display> View Content </template>
|
<template #display>
|
||||||
|
<span class="text-gray-700 dark:text-white/80"> View Content </span>
|
||||||
|
</template>
|
||||||
<template #content>
|
<template #content>
|
||||||
<p class="m-0">
|
<p class="text-gray-700 dark:text-white/80 m-0">
|
||||||
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
|
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.
|
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>
|
</p>
|
||||||
|
|
|
@ -14,19 +14,19 @@ export default {
|
||||||
<template>
|
<template>
|
||||||
<div class="card flex flex-wrap">
|
<div class="card flex flex-wrap">
|
||||||
<div class="flex-auto">
|
<div class="flex-auto">
|
||||||
<label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
|
<label for="integeronly" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Integer Only </label>
|
||||||
<InputNumber v-model="value1" inputId="integeronly" />
|
<InputNumber v-model="value1" inputId="integeronly" />
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-auto">
|
<div class="flex-auto">
|
||||||
<label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
|
<label for="withoutgrouping" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Without Grouping </label>
|
||||||
<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" />
|
<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" />
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-auto">
|
<div class="flex-auto">
|
||||||
<label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
|
<label for="minmaxfraction" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Min-Max Fraction Digits </label>
|
||||||
<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" />
|
<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" />
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-auto">
|
<div class="flex-auto">
|
||||||
<label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
|
<label for="minmax" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Min-Max Boundaries </label>
|
||||||
<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" />
|
<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -16,19 +16,19 @@ export default {
|
||||||
<div class="flex flex-wrap gap-3">
|
<div class="flex flex-wrap gap-3">
|
||||||
<div class="flex align-items-center">
|
<div class="flex align-items-center">
|
||||||
<RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
|
<RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
|
||||||
<label for="ingredient1" class="ml-2">Cheese</label>
|
<label for="ingredient1" class="text-gray-700 dark:text-white/80 ml-2">Cheese</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex align-items-center">
|
<div class="flex align-items-center">
|
||||||
<RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
|
<RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
|
||||||
<label for="ingredient2" class="ml-2">Mushroom</label>
|
<label for="ingredient2" class="text-gray-700 dark:text-white/80 ml-2">Mushroom</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex align-items-center">
|
<div class="flex align-items-center">
|
||||||
<RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
|
<RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
|
||||||
<label for="ingredient3" class="ml-2">Pepper</label>
|
<label for="ingredient3" class="text-gray-700 dark:text-white/80 ml-2">Pepper</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex align-items-center">
|
<div class="flex align-items-center">
|
||||||
<RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
|
<RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
|
||||||
<label for="ingredient4" class="ml-2">Onion</label>
|
<label for="ingredient4" class="text-gray-700 dark:text-white/80 ml-2">Onion</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -14,15 +14,15 @@ export default {
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<ScrollPanel style="width: 100%; height: 200px">
|
<ScrollPanel style="width: 100%; height: 200px">
|
||||||
<p>
|
<p class="text-gray-700 dark:text-white/80">
|
||||||
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.
|
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.
|
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>
|
</p>
|
||||||
<p>
|
<p class="text-gray-700 dark:text-white/80">
|
||||||
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
|
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.
|
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>
|
</p>
|
||||||
<p class="m-0">
|
<p class="text-gray-700 dark:text-white/80 m-0">
|
||||||
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
|
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.
|
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>
|
</p>
|
||||||
|
|
|
@ -32,7 +32,7 @@ export default {
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
value: 'off',
|
value: 'Off',
|
||||||
options: ['Off', 'On']
|
options: ['Off', 'On']
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -48,7 +48,7 @@ export default {
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
|
||||||
const value = ref('off');
|
const value = ref('Off');
|
||||||
const options = ref(['Off', 'On']);
|
const options = ref(['Off', 'On']);
|
||||||
<\/script>`
|
<\/script>`
|
||||||
}
|
}
|
||||||
|
|
|
@ -20,7 +20,7 @@ export default {
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
|
||||||
const value = ref('off');
|
const value = ref('Off');
|
||||||
const options = ref(['Off', 'On']);
|
const options = ref(['Off', 'On']);
|
||||||
<\/script>`
|
<\/script>`
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,7 +13,7 @@ export default {
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="flex gap-2 justify-content-center">
|
<div class="flex gap-2 justify-center">
|
||||||
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
|
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
|
||||||
<Button icon="pi pi-arrow-left" @click="visibleRight = true" />
|
<Button icon="pi pi-arrow-left" @click="visibleRight = true" />
|
||||||
<Button icon="pi pi-arrow-down" @click="visibleTop = true" />
|
<Button icon="pi pi-arrow-down" @click="visibleTop = true" />
|
||||||
|
|
|
@ -12,41 +12,39 @@ export default {
|
||||||
code: {
|
code: {
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card text-gray-700 dark:text-white/80">
|
||||||
<div class="">
|
<div class="w-full">
|
||||||
<div class="w-full">
|
<h5>Rectangle</h5>
|
||||||
<h5>Rectangle</h5>
|
<Skeleton class="mb-2"></Skeleton>
|
||||||
<Skeleton class="mb-2"></Skeleton>
|
<Skeleton width="10rem" class="mb-2"></Skeleton>
|
||||||
<Skeleton width="10rem" class="mb-2"></Skeleton>
|
<Skeleton width="5rem" class="mb-2"></Skeleton>
|
||||||
<Skeleton width="5rem" class="mb-2"></Skeleton>
|
<Skeleton height="2rem" class="mb-2"></Skeleton>
|
||||||
<Skeleton height="2rem" class="mb-2"></Skeleton>
|
<Skeleton width="10rem" height="4rem"></Skeleton>
|
||||||
<Skeleton width="10rem" height="4rem"></Skeleton>
|
</div>
|
||||||
|
<div class="w-full">
|
||||||
|
<h5>Rounded</h5>
|
||||||
|
<Skeleton class="mb-2" borderRadius="16px"></Skeleton>
|
||||||
|
<Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
|
||||||
|
<Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
|
||||||
|
<Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
|
||||||
|
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
|
||||||
|
</div>
|
||||||
|
<div class="w-full">
|
||||||
|
<h5 class="mt-3">Square</h5>
|
||||||
|
<div class="flex items-end">
|
||||||
|
<Skeleton size="2rem" class="mr-2"></Skeleton>
|
||||||
|
<Skeleton size="3rem" class="mr-2"></Skeleton>
|
||||||
|
<Skeleton size="4rem" class="mr-2"></Skeleton>
|
||||||
|
<Skeleton size="5rem"></Skeleton>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full">
|
</div>
|
||||||
<h5>Rounded</h5>
|
<div class="w-full">
|
||||||
<Skeleton class="mb-2" borderRadius="16px"></Skeleton>
|
<h5 class="mt-3">Circle</h5>
|
||||||
<Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
|
<div class="flex items-end">
|
||||||
<Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
|
<Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
|
||||||
<Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
|
<Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
|
||||||
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
|
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
|
||||||
</div>
|
<Skeleton shape="circle" size="5rem"></Skeleton>
|
||||||
<div class="w-full">
|
|
||||||
<h5 class="mt-3">Square</h5>
|
|
||||||
<div class="flex items-end">
|
|
||||||
<Skeleton size="2rem" class="mr-2"></Skeleton>
|
|
||||||
<Skeleton size="3rem" class="mr-2"></Skeleton>
|
|
||||||
<Skeleton size="4rem" class="mr-2"></Skeleton>
|
|
||||||
<Skeleton size="5rem"></Skeleton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="w-full">
|
|
||||||
<h5 class="mt-3">Circle</h5>
|
|
||||||
<div class="flex items-end">
|
|
||||||
<Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
|
|
||||||
<Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
|
|
||||||
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
|
|
||||||
<Skeleton shape="circle" size="5rem"></Skeleton>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -112,7 +112,7 @@ const items = ref([
|
||||||
tabName: 'HomeDemo',
|
tabName: 'HomeDemo',
|
||||||
content: `
|
content: `
|
||||||
<template>
|
<template>
|
||||||
<div class="tabmenudemo-content">
|
<div class="p-4">
|
||||||
<h5>Home Component Content</h5>
|
<h5>Home Component Content</h5>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -128,7 +128,7 @@ export default {
|
||||||
tabName: 'CalendarDemo',
|
tabName: 'CalendarDemo',
|
||||||
content: `
|
content: `
|
||||||
<template>
|
<template>
|
||||||
<div class="tabmenudemo-content">
|
<div class="p-4">
|
||||||
<h5>Calendar Component Content</h5>
|
<h5>Calendar Component Content</h5>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -144,7 +144,7 @@ export default {
|
||||||
tabName: 'EditDemo',
|
tabName: 'EditDemo',
|
||||||
content: `
|
content: `
|
||||||
<template>
|
<template>
|
||||||
<div class="tabmenudemo-content">
|
<div class="p-4">
|
||||||
<h5>Edit Component Content</h5>
|
<h5>Edit Component Content</h5>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -160,7 +160,7 @@ export default {
|
||||||
tabName: 'DocumentationDemo',
|
tabName: 'DocumentationDemo',
|
||||||
content: `
|
content: `
|
||||||
<template>
|
<template>
|
||||||
<div class="tabmenudemo-content">
|
<div class="p-4">
|
||||||
<h5>Documentation Component Content</h5>
|
<h5>Documentation Component Content</h5>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -176,7 +176,7 @@ export default {
|
||||||
tabName: 'SettingsDemo',
|
tabName: 'SettingsDemo',
|
||||||
content: `
|
content: `
|
||||||
<template>
|
<template>
|
||||||
<div class="tabmenudemo-content">
|
<div class="p-4">
|
||||||
<h5>Settings Component Content</h5>
|
<h5>Settings Component Content</h5>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -55,7 +55,7 @@ const items = ref([
|
||||||
tabName: 'HomeDemo',
|
tabName: 'HomeDemo',
|
||||||
content: `
|
content: `
|
||||||
<template>
|
<template>
|
||||||
<div class="tabmenudemo-content">
|
<div class="p-4">
|
||||||
<h5>Home Component Content</h5>
|
<h5>Home Component Content</h5>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -71,7 +71,7 @@ export default {
|
||||||
tabName: 'CalendarDemo',
|
tabName: 'CalendarDemo',
|
||||||
content: `
|
content: `
|
||||||
<template>
|
<template>
|
||||||
<div class="tabmenudemo-content">
|
<div class="p-4">
|
||||||
<h5>Calendar Component Content</h5>
|
<h5>Calendar Component Content</h5>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -87,7 +87,7 @@ export default {
|
||||||
tabName: 'EditDemo',
|
tabName: 'EditDemo',
|
||||||
content: `
|
content: `
|
||||||
<template>
|
<template>
|
||||||
<div class="tabmenudemo-content">
|
<div class="p-4">
|
||||||
<h5>Edit Component Content</h5>
|
<h5>Edit Component Content</h5>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -103,7 +103,7 @@ export default {
|
||||||
tabName: 'DocumentationDemo',
|
tabName: 'DocumentationDemo',
|
||||||
content: `
|
content: `
|
||||||
<template>
|
<template>
|
||||||
<div class="tabmenudemo-content">
|
<div class="p-4">
|
||||||
<h5>Documentation Component Content</h5>
|
<h5>Documentation Component Content</h5>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -119,7 +119,7 @@ export default {
|
||||||
tabName: 'SettingsDemo',
|
tabName: 'SettingsDemo',
|
||||||
content: `
|
content: `
|
||||||
<template>
|
<template>
|
||||||
<div class="tabmenudemo-content">
|
<div class="p-4">
|
||||||
<h5>Settings Component Content</h5>
|
<h5>Settings Component Content</h5>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -12,7 +12,7 @@ export default {
|
||||||
code: {
|
code: {
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-wrap justify-content-center gap-2">
|
<div class="card flex flex-wrap justify-center gap-2">
|
||||||
<Tag value="Primary"></Tag>
|
<Tag value="Primary"></Tag>
|
||||||
<Tag severity="success" value="Success"></Tag>
|
<Tag severity="success" value="Success"></Tag>
|
||||||
<Tag severity="info" value="Info"></Tag>
|
<Tag severity="info" value="Info"></Tag>
|
||||||
|
|
|
@ -12,8 +12,8 @@ export default {
|
||||||
code: {
|
code: {
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="card">
|
||||||
<p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
|
<p class="text-gray-700 dark:text-white/80">Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
|
||||||
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
|
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -15,19 +15,25 @@ export default {
|
||||||
<div class="card flex flex-wrap gap-6">
|
<div class="card flex flex-wrap gap-6">
|
||||||
<Timeline :value="events" class="w-full md:w-80">
|
<Timeline :value="events" class="w-full md:w-80">
|
||||||
<template #content="slotProps">
|
<template #content="slotProps">
|
||||||
{{ slotProps.item.status }}
|
<span class="text-gray-700 dark:text-white/80">
|
||||||
|
{{ slotProps.item.status }}
|
||||||
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</Timeline>
|
</Timeline>
|
||||||
|
|
||||||
<Timeline :value="events" align="right" class="w-full md:w-80">
|
<Timeline :value="events" align="right" class="w-full md:w-80">
|
||||||
<template #content="slotProps">
|
<template #content="slotProps">
|
||||||
{{ slotProps.item.status }}
|
<span class="text-gray-700 dark:text-white/80">
|
||||||
|
{{ slotProps.item.status }}
|
||||||
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</Timeline>
|
</Timeline>
|
||||||
|
|
||||||
<Timeline :value="events" align="alternate" class="w-full md:w-80">
|
<Timeline :value="events" align="alternate" class="w-full md:w-80">
|
||||||
<template #content="slotProps">
|
<template #content="slotProps">
|
||||||
{{ slotProps.item.status }}
|
<span class="text-gray-700 dark:text-white/80">
|
||||||
|
{{ slotProps.item.status }}
|
||||||
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</Timeline>
|
</Timeline>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -17,7 +17,7 @@ export default {
|
||||||
<template #start>
|
<template #start>
|
||||||
<Button label="New" icon="pi pi-plus" class="mr-2" />
|
<Button label="New" icon="pi pi-plus" class="mr-2" />
|
||||||
<Button label="Upload" icon="pi pi-upload" severity="success" class="mr-2" />
|
<Button label="Upload" icon="pi pi-upload" severity="success" class="mr-2" />
|
||||||
<i class="pi pi-bars p-toolbar-separator mr-2" />
|
<i class="pi pi-bars text-gray-700 dark:text-white/80 mr-2" />
|
||||||
<SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
|
<SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -12,9 +12,9 @@ export default {
|
||||||
code: {
|
code: {
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card flex flex-column align-center">
|
<div class="card flex flex-col items-center">
|
||||||
<TriStateCheckbox v-model="value" />
|
<TriStateCheckbox v-model="value" />
|
||||||
<label for="checkbox">{{ value == null ? 'null' : value }}</label>
|
<label for="checkbox" class="text-gray-700 dark:text-white/80 mt-1">{{ value == null ? 'null' : value }}</label>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="tabmenudemo-content">
|
<div class="p-4">
|
||||||
<h3>Calendar Component Content</h3>
|
<h3>Calendar Component Content</h3>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="tabmenudemo-content">
|
<div class="p-4">
|
||||||
<h3>Documentation Component Content</h3>
|
<h3>Documentation Component Content</h3>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="tabmenudemo-content">
|
<div class="p-4">
|
||||||
<h3>Edit Component Content</h3>
|
<h3>Edit Component Content</h3>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="tabmenudemo-content">
|
<div class="p-4">
|
||||||
<h3>Settings Component Content</h3>
|
<h3>Settings Component Content</h3>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="tabmenudemo-content">
|
<div class="p-4">
|
||||||
<h3>Home Component Content</h3>
|
<h3>Home Component Content</h3>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
Loading…
Reference in New Issue