Fixed template demo

pull/5161/head
Cagatay Civici 2024-01-24 14:03:00 +03:00
parent 1e00a6a2f1
commit 4f369ec8d5
1 changed files with 12 additions and 16 deletions

View File

@ -3,11 +3,10 @@
<p>Children of the component are passed as the content for templating.</p> <p>Children of the component are passed as the content for templating.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Tag style="background: linear-gradient(to right, var(--primary-300), var(--primary-700))"> <Tag style="background: linear-gradient(to right, var(--surface-900), var(--surface-700)); color: var(--surface-0)">
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2 px-1">
<img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" /> <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
<span class="text-base">Italy</span> <span class="text-base">Italy</span>
<i class="pi pi-times text-xs"></i>
</div> </div>
</Tag> </Tag>
</div> </div>
@ -20,22 +19,20 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<Tag style="background: linear-gradient(to right, var(--primary-300), var(--primary-700))"> <Tag style="background: linear-gradient(to right, var(--surface-900), var(--surface-700)); color: var(--surface-0)">
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2 px-1">
<img alt="Country" src="/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" /> <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
<span class="text-base">Italia</span> <span class="text-base">Italy</span>
<i class="pi pi-times text-xs"></i>
</div> </div>
</Tag> </Tag>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Tag style="background: linear-gradient(to right, var(--primary-300), var(--primary-700))"> <Tag style="background: linear-gradient(to right, var(--surface-900), var(--surface-700)); color: var(--surface-0)">
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2 px-1">
<img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" /> <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
<span class="text-base">Italia</span> <span class="text-base">Italy</span>
<i class="pi pi-times text-xs"></i>
</div> </div>
</Tag> </Tag>
</div> </div>
@ -47,11 +44,10 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Tag style="background: linear-gradient(to right, var(--primary-300), var(--primary-700))"> <Tag style="background: linear-gradient(to right, var(--surface-900), var(--surface-700)); color: var(--surface-0)">
<div class="flex align-items-center gap-2"> <div class="flex align-items-center gap-2 px-1">
<img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" /> <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
<span class="text-base">Italia</span> <span class="text-base">Italy</span>
<i class="pi pi-times text-xs"></i>
</div> </div>
</Tag> </Tag>
</div> </div>