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

New card demo

pull/5134/head
Cagatay Civici 2024-01-23 15:56:03 +03:00
parent 12611988ed
commit 229e491405
1 changed files with 29 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
doc/card/AdvancedDoc.vue
View File

@ -3,12 +3,12 @@
<p>Card provides <i>header</i>, <i>title</i>, <i>subtitle</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p>
</DocSectionText>
<div class="card flex align-items-center justify-content-center">
<Card style="width: 25em">
<Card style="width: 25rem; overflow: hidden">
<template #header>
<img alt="user header" class="w-full" src="https://primefaces.org/cdn/primevue/images/usercard.png" />
<img alt="user header" class="w-full" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" />
</template>
<template #title> Advanced Card </template>
<template #subtitle> Card subtitle </template>
<template #title>Advanced Card</template>
<template #subtitle>Card subtitle</template>
<template #content>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
@ -16,8 +16,10 @@
</p>
</template>
<template #footer>
<Button icon="pi pi-check" label="Save" />
<Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
<div class="flex gap-3 mt-1">
<Button label="Cancel" severity="secondary" outlined class="w-full" />
<Button label="Save" class="w-full" />
</div>
</template>
</Card>
</div>
@ -30,12 +32,12 @@ export default {
return {
code: {
basic: `
<Card style="width: 25em">
<Card style="width: 25rem; overflow: hidden">
<template #header>
<img alt="user header" src="/images/usercard.png" />
</template>
<template #title> Advanced Card </template>
<template #subtitle> Card subtitle </template>
<template #title>Advanced Card</template>
<template #subtitle>Card subtitle</template>
<template #content>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
@ -43,20 +45,22 @@ export default {
</p>
</template>
<template #footer>
<Button icon="pi pi-check" label="Save" />
<Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
<div class="flex gap-3 mt-1">
<Button label="Cancel" severity="secondary" outlined class="w-full" />
<Button label="Save" class="w-full" />
</div>
</template>
</Card>
`,
options: `
<template>
<div class="card flex align-items-center justify-content-center">
<Card style="width: 25em">
<Card style="width: 25rem; overflow: hidden">
<template #header>
<img alt="user header" src="https://primefaces.org/cdn/primevue/images/usercard.png" />
</template>
<template #title> Advanced Card </template>
<template #subtitle> Card subtitle </template>
<template #title>Advanced Card</template>
<template #subtitle>Card subtitle</template>
<template #content>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
@ -64,8 +68,10 @@ export default {
</p>
</template>
<template #footer>
<Button icon="pi pi-check" label="Save" />
<Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
<div class="flex gap-3 mt-1">
<Button label="Cancel" severity="secondary" outlined class="w-full" />
<Button label="Save" class="w-full" />
</div>
</template>
</Card>
</div>
@ -77,12 +83,12 @@ export default {
composition: `
<template>
<div class="card flex align-items-center justify-content-center">
<Card style="width: 25em">
<Card style="width: 25rem; overflow: hidden">
<template #header>
<img alt="user header" src="https://primefaces.org/cdn/primevue/images/usercard.png" />
</template>
<template #title> Advanced Card </template>
<template #subtitle> Card subtitle </template>
<template #title>Advanced Card</template>
<template #subtitle>Card subtitle</template>
<template #content>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
@ -90,8 +96,10 @@ export default {
</p>
</template>
<template #footer>
<Button icon="pi pi-check" label="Save" />
<Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
<div class="flex gap-3 mt-1">
<Button label="Cancel" severity="secondary" outlined class="w-full" />
<Button label="Save" class="w-full" />
</div>
</template>
</Card>
</div>