Fixed template demo
parent
1e00a6a2f1
commit
4f369ec8d5
|
@ -3,11 +3,10 @@
|
|||
<p>Children of the component are passed as the content for templating.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Tag style="background: linear-gradient(to right, var(--primary-300), var(--primary-700))">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<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 px-1">
|
||||
<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>
|
||||
<i class="pi pi-times text-xs"></i>
|
||||
</div>
|
||||
</Tag>
|
||||
</div>
|
||||
|
@ -20,22 +19,20 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Tag style="background: linear-gradient(to right, var(--primary-300), var(--primary-700))">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<img alt="Country" src="/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
|
||||
<span class="text-base">Italia</span>
|
||||
<i class="pi pi-times text-xs"></i>
|
||||
<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 px-1">
|
||||
<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>
|
||||
</div>
|
||||
</Tag>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Tag style="background: linear-gradient(to right, var(--primary-300), var(--primary-700))">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<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 px-1">
|
||||
<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>
|
||||
<i class="pi pi-times text-xs"></i>
|
||||
<span class="text-base">Italy</span>
|
||||
</div>
|
||||
</Tag>
|
||||
</div>
|
||||
|
@ -47,11 +44,10 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Tag style="background: linear-gradient(to right, var(--primary-300), var(--primary-700))">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<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 px-1">
|
||||
<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>
|
||||
<i class="pi pi-times text-xs"></i>
|
||||
<span class="text-base">Italy</span>
|
||||
</div>
|
||||
</Tag>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue