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> <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> </DocSectionText>
<div class="card flex align-items-center justify-content-center"> <div class="card flex align-items-center justify-content-center">
<Card style="width: 25em"> <Card style="width: 25rem; overflow: hidden">
<template #header> <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>
<template #title> Advanced Card </template> <template #title>Advanced Card</template>
<template #subtitle> Card subtitle </template> <template #subtitle>Card subtitle</template>
<template #content> <template #content>
<p class="m-0"> <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 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> </p>
</template> </template>
<template #footer> <template #footer>
<Button icon="pi pi-check" label="Save" /> <div class="flex gap-3 mt-1">
<Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" /> <Button label="Cancel" severity="secondary" outlined class="w-full" />
<Button label="Save" class="w-full" />
</div>
</template> </template>
</Card> </Card>
</div> </div>
@ -30,12 +32,12 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<Card style="width: 25em"> <Card style="width: 25rem; overflow: hidden">
<template #header> <template #header>
<img alt="user header" src="/images/usercard.png" /> <img alt="user header" src="/images/usercard.png" />
</template> </template>
<template #title> Advanced Card </template> <template #title>Advanced Card</template>
<template #subtitle> Card subtitle </template> <template #subtitle>Card subtitle</template>
<template #content> <template #content>
<p class="m-0"> <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 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> </p>
</template> </template>
<template #footer> <template #footer>
<Button icon="pi pi-check" label="Save" /> <div class="flex gap-3 mt-1">
<Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" /> <Button label="Cancel" severity="secondary" outlined class="w-full" />
<Button label="Save" class="w-full" />
</div>
</template> </template>
</Card> </Card>
`, `,
options: ` options: `
<template> <template>
<div class="card flex align-items-center justify-content-center"> <div class="card flex align-items-center justify-content-center">
<Card style="width: 25em"> <Card style="width: 25rem; overflow: hidden">
<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" />
</template> </template>
<template #title> Advanced Card </template> <template #title>Advanced Card</template>
<template #subtitle> Card subtitle </template> <template #subtitle>Card subtitle</template>
<template #content> <template #content>
<p class="m-0"> <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 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> </p>
</template> </template>
<template #footer> <template #footer>
<Button icon="pi pi-check" label="Save" /> <div class="flex gap-3 mt-1">
<Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" /> <Button label="Cancel" severity="secondary" outlined class="w-full" />
<Button label="Save" class="w-full" />
</div>
</template> </template>
</Card> </Card>
</div> </div>
@ -77,12 +83,12 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex align-items-center justify-content-center"> <div class="card flex align-items-center justify-content-center">
<Card style="width: 25em"> <Card style="width: 25rem; overflow: hidden">
<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" />
</template> </template>
<template #title> Advanced Card </template> <template #title>Advanced Card</template>
<template #subtitle> Card subtitle </template> <template #subtitle>Card subtitle</template>
<template #content> <template #content>
<p class="m-0"> <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 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> </p>
</template> </template>
<template #footer> <template #footer>
<Button icon="pi pi-check" label="Save" /> <div class="flex gap-3 mt-1">
<Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" /> <Button label="Cancel" severity="secondary" outlined class="w-full" />
<Button label="Save" class="w-full" />
</div>
</template> </template>
</Card> </Card>
</div> </div>