Unstyled demo fixes
parent
5d8c790836
commit
ef45334c22
|
@ -19,7 +19,7 @@ export default {
|
|||
</div>
|
||||
<BlockUI :blocked="blocked">
|
||||
<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
|
||||
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>
|
||||
|
|
|
@ -12,7 +12,7 @@ export default {
|
|||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex align-items-center justify-content-center">
|
||||
<div class="card flex items-center justify-center">
|
||||
<Card style="width: 25em">
|
||||
<template #header>
|
||||
<img alt="user header" src="https://primefaces.org/cdn/primevue/images/usercard.png" />
|
||||
|
|
|
@ -12,7 +12,7 @@ export default {
|
|||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card text-gray-700 dark:text-white/80">
|
||||
<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.
|
||||
|
|
|
@ -16,7 +16,7 @@ export default {
|
|||
<div class="flex flex-wrap gap-3 mb-5">
|
||||
<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" />
|
||||
<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 class="dock-window" style="backgroundimage: 'url(https://primefaces.org/cdn/primevue/images/dock/window.jpg))'">
|
||||
|
@ -71,6 +71,18 @@ const positions = ref([
|
|||
]);
|
||||
|
||||
<\/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>
|
||||
<div class="card">
|
||||
<Inplace>
|
||||
<template #display> View Content </template>
|
||||
<template #display>
|
||||
<span class="text-gray-700 dark:text-white/80"> View Content </span>
|
||||
</template>
|
||||
<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
|
||||
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>
|
||||
|
|
|
@ -14,19 +14,19 @@ export default {
|
|||
<template>
|
||||
<div class="card flex flex-wrap">
|
||||
<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" />
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -16,19 +16,19 @@ export default {
|
|||
<div class="flex flex-wrap gap-3">
|
||||
<div class="flex align-items-center">
|
||||
<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 class="flex align-items-center">
|
||||
<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 class="flex align-items-center">
|
||||
<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 class="flex align-items-center">
|
||||
<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>
|
||||
|
|
|
@ -14,15 +14,15 @@ export default {
|
|||
<template>
|
||||
<div class="card">
|
||||
<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.
|
||||
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 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
|
||||
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 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
|
||||
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>
|
||||
|
|
|
@ -32,7 +32,7 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 'off',
|
||||
value: 'Off',
|
||||
options: ['Off', 'On']
|
||||
}
|
||||
}
|
||||
|
@ -48,7 +48,7 @@ export default {
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref('off');
|
||||
const value = ref('Off');
|
||||
const options = ref(['Off', 'On']);
|
||||
<\/script>`
|
||||
}
|
||||
|
|
|
@ -20,7 +20,7 @@ export default {
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref('off');
|
||||
const value = ref('Off');
|
||||
const options = ref(['Off', 'On']);
|
||||
<\/script>`
|
||||
}
|
||||
|
|
|
@ -13,7 +13,7 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<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-left" @click="visibleRight = true" />
|
||||
<Button icon="pi pi-arrow-down" @click="visibleTop = true" />
|
||||
|
|
|
@ -12,8 +12,7 @@ export default {
|
|||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="">
|
||||
<div class="card text-gray-700 dark:text-white/80">
|
||||
<div class="w-full">
|
||||
<h5>Rectangle</h5>
|
||||
<Skeleton class="mb-2"></Skeleton>
|
||||
|
@ -49,7 +48,6 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
|
@ -112,7 +112,7 @@ const items = ref([
|
|||
tabName: 'HomeDemo',
|
||||
content: `
|
||||
<template>
|
||||
<div class="tabmenudemo-content">
|
||||
<div class="p-4">
|
||||
<h5>Home Component Content</h5>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -128,7 +128,7 @@ export default {
|
|||
tabName: 'CalendarDemo',
|
||||
content: `
|
||||
<template>
|
||||
<div class="tabmenudemo-content">
|
||||
<div class="p-4">
|
||||
<h5>Calendar Component Content</h5>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -144,7 +144,7 @@ export default {
|
|||
tabName: 'EditDemo',
|
||||
content: `
|
||||
<template>
|
||||
<div class="tabmenudemo-content">
|
||||
<div class="p-4">
|
||||
<h5>Edit Component Content</h5>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -160,7 +160,7 @@ export default {
|
|||
tabName: 'DocumentationDemo',
|
||||
content: `
|
||||
<template>
|
||||
<div class="tabmenudemo-content">
|
||||
<div class="p-4">
|
||||
<h5>Documentation Component Content</h5>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -176,7 +176,7 @@ export default {
|
|||
tabName: 'SettingsDemo',
|
||||
content: `
|
||||
<template>
|
||||
<div class="tabmenudemo-content">
|
||||
<div class="p-4">
|
||||
<h5>Settings Component Content</h5>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -55,7 +55,7 @@ const items = ref([
|
|||
tabName: 'HomeDemo',
|
||||
content: `
|
||||
<template>
|
||||
<div class="tabmenudemo-content">
|
||||
<div class="p-4">
|
||||
<h5>Home Component Content</h5>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -71,7 +71,7 @@ export default {
|
|||
tabName: 'CalendarDemo',
|
||||
content: `
|
||||
<template>
|
||||
<div class="tabmenudemo-content">
|
||||
<div class="p-4">
|
||||
<h5>Calendar Component Content</h5>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -87,7 +87,7 @@ export default {
|
|||
tabName: 'EditDemo',
|
||||
content: `
|
||||
<template>
|
||||
<div class="tabmenudemo-content">
|
||||
<div class="p-4">
|
||||
<h5>Edit Component Content</h5>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -103,7 +103,7 @@ export default {
|
|||
tabName: 'DocumentationDemo',
|
||||
content: `
|
||||
<template>
|
||||
<div class="tabmenudemo-content">
|
||||
<div class="p-4">
|
||||
<h5>Documentation Component Content</h5>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -119,7 +119,7 @@ export default {
|
|||
tabName: 'SettingsDemo',
|
||||
content: `
|
||||
<template>
|
||||
<div class="tabmenudemo-content">
|
||||
<div class="p-4">
|
||||
<h5>Settings Component Content</h5>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -12,7 +12,7 @@ export default {
|
|||
code: {
|
||||
composition: `
|
||||
<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 severity="success" value="Success"></Tag>
|
||||
<Tag severity="info" value="Info"></Tag>
|
||||
|
|
|
@ -12,8 +12,8 @@ export default {
|
|||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div>
|
||||
<p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
|
||||
<div class="card">
|
||||
<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" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -15,19 +15,25 @@ export default {
|
|||
<div class="card flex flex-wrap gap-6">
|
||||
<Timeline :value="events" class="w-full md:w-80">
|
||||
<template #content="slotProps">
|
||||
<span class="text-gray-700 dark:text-white/80">
|
||||
{{ slotProps.item.status }}
|
||||
</span>
|
||||
</template>
|
||||
</Timeline>
|
||||
|
||||
<Timeline :value="events" align="right" class="w-full md:w-80">
|
||||
<template #content="slotProps">
|
||||
<span class="text-gray-700 dark:text-white/80">
|
||||
{{ slotProps.item.status }}
|
||||
</span>
|
||||
</template>
|
||||
</Timeline>
|
||||
|
||||
<Timeline :value="events" align="alternate" class="w-full md:w-80">
|
||||
<template #content="slotProps">
|
||||
<span class="text-gray-700 dark:text-white/80">
|
||||
{{ slotProps.item.status }}
|
||||
</span>
|
||||
</template>
|
||||
</Timeline>
|
||||
</div>
|
||||
|
|
|
@ -17,7 +17,7 @@ export default {
|
|||
<template #start>
|
||||
<Button label="New" icon="pi pi-plus" 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>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -12,9 +12,9 @@ export default {
|
|||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-column align-center">
|
||||
<div class="card flex flex-col items-center">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="tabmenudemo-content">
|
||||
<div class="p-4">
|
||||
<h3>Calendar Component Content</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="tabmenudemo-content">
|
||||
<div class="p-4">
|
||||
<h3>Documentation Component Content</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="tabmenudemo-content">
|
||||
<div class="p-4">
|
||||
<h3>Edit Component Content</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="tabmenudemo-content">
|
||||
<div class="p-4">
|
||||
<h3>Settings Component Content</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="tabmenudemo-content">
|
||||
<div class="p-4">
|
||||
<h3>Home Component Content</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
|
Loading…
Reference in New Issue