pcm-libraries/pcm-badge-bundle
Public Access
3
0
Fork 0
Code Issues 4 Packages Releases Activity

Update showcase

Browse Source
This commit is contained in:
brabli
2026-04-30 15:52:00 +01:00
parent 1e8ac58578
commit 3fb9714010
1 changed files with 28 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dev/templates/showcase.html.twig
+27 -49
View File
@@ -25,7 +25,25 @@
<p class="text-zinc-600 mb-8">Local dev preview. Edit <code class="bg-zinc-200 px-1 rounded">dev/templates/showcase.html.twig</code> to add new variants.</p> <p class="text-zinc-600 mb-8">Local dev preview. Edit <code class="bg-zinc-200 px-1 rounded">dev/templates/showcase.html.twig</code> to add new variants.</p>
<section class="mb-10"> <section class="mb-10">
<h2 class="text-lg font-semibold mb-3">Solid (all colours)</h2> <h2 class="text-lg font-semibold mb-3">Solid</h2>
<div class="flex flex-wrap gap-2">
{% for colour in colours %}
<twig:Pcm:Badge colour="{{ colour }}">{{ colour }}</twig:Pcm:Badge>
{% endfor %}
</div>
</section>
<section class="mb-10">
<h2 class="text-lg font-semibold mb-3">Outline</h2>
<div class="flex flex-wrap gap-2">
{% for colour in colours %}
<twig:Pcm:Badge colour="{{ colour }}" outline>{{ colour }}</twig:Pcm:Badge>
{% endfor %}
</div>
</section>
<section class="mb-10">
<h2 class="text-lg font-semibold mb-3">Solid glossy</h2>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
{% for colour in colours %} {% for colour in colours %}
<twig:Pcm:Badge glossy colour="{{ colour }}">{{ colour }}</twig:Pcm:Badge> <twig:Pcm:Badge glossy colour="{{ colour }}">{{ colour }}</twig:Pcm:Badge>
@@ -34,71 +52,31 @@
</section> </section>
<section class="mb-10"> <section class="mb-10">
<h2 class="text-lg font-semibold mb-3">Outline (all colours)</h2> <h2 class="text-lg font-semibold mb-3">Solid icon</h2>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
{% for colour in colours %} {% for colour in colours %}
<twig:Pcm:Badge colour="{{ colour }}" glossy outline>{{ colour }}</twig:Pcm:Badge> <twig:Pcm:Badge icon="material-symbols:add" colour="{{ colour }}">{{ colour }}</twig:Pcm:Badge>
{% endfor %} {% endfor %}
</div> </div>
</section> </section>
<section class="mb-10"> <section class="mb-10">
<h2 class="text-lg font-semibold mb-3">No icons</h2> <h2 class="text-lg font-semibold mb-3">Outline icon</h2>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
{% for sample in samples %} {% for colour in colours %}
<twig:Pcm:Badge :obj="sample">{{ sample.label }}</twig:Pcm:Badge> <twig:Pcm:Badge icon="material-symbols:add" colour="{{ colour }}" outline>{{ colour }}</twig:Pcm:Badge>
{% endfor %} {% endfor %}
</div> </div>
</section> </section>
<section class="mb-10"> <section class="mb-10">
<h2 class="text-lg font-semibold mb-3">Icons</h2> <h2 class="text-lg font-semibold mb-3">Solid icon glossy</h2>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<div class="flex gap-2 flex-col"> {% for colour in colours %}
{% for icon_sample in icon_samples %} <twig:Pcm:Badge glossy icon="material-symbols:edit-outline" colour="{{ colour }}">{{ colour }}</twig:Pcm:Badge>
<twig:Pcm:Badge icon :obj="icon_sample" class="text-[8px]">{{ icon_sample.label }}</twig:Pcm:Badge>
{% endfor %} {% endfor %}
</div> </div>
<div class="flex gap-2 flex-col">
{% for icon_sample in icon_samples %}
<twig:Pcm:Badge icon :obj="icon_sample">{{ icon_sample.label }}</twig:Pcm:Badge>
{% endfor %}
</div>
<div class="flex gap-2 flex-col">
{% for icon_sample in icon_samples %}
<twig:Pcm:Badge icon :obj="icon_sample" class="text-xl">{{ icon_sample.label }}</twig:Pcm:Badge>
{% endfor %}
</div>
<div class="flex gap-2 flex-col">
{% for icon_sample in icon_samples %}
<twig:Pcm:Badge outline icon :obj="icon_sample" class="text-[8px]">{{ icon_sample.label }}</twig:Pcm:Badge>
{% endfor %}
</div>
<div class="flex gap-2 flex-col">
{% for icon_sample in icon_samples %}
<twig:Pcm:Badge outline icon :obj="icon_sample">{{ icon_sample.label }}</twig:Pcm:Badge>
{% endfor %}
</div>
<div class="flex gap-2 flex-col">
{% for icon_sample in icon_samples %}
<twig:Pcm:Badge outline icon :obj="icon_sample" class="text-xl">{{ icon_sample.label }}</twig:Pcm:Badge>
{% endfor %}
</div>
</div>
</section> </section>
<section class="mb-10">
<h2 class="text-lg font-semibold mb-3">Custom classes</h2>
<div class="flex flex-wrap gap-2 items-center">
<twig:Pcm:Badge colour="green" class="rounded-full" label="Sale 20% off" />
<twig:Pcm:Badge class="text-xl p-2" colour="maroon" outline>Danger!</twig:Pcm:Badge>
<twig:Pcm:Badge icon="material-symbols:add-alert" class="rounded-full text-xl" colour="maroon" outline>Danger!</twig:Pcm:Badge>
</div>
</section>
</body> </body>
</html> </html>