mirror of
https://github.com/tabler/tabler.git
synced 2026-08-07 20:02:23 +04:00
Paweł Kuna
35 lines
877 B
Plaintext
35 lines
877 B
Plaintext
---
|
|
// Port of preview/pages/colorpicker.html (layout: default).
|
|
// Liquid: {% for color in site.colors %} — forloop.index (1-based) → id,
|
|
// color[1].hex → value.
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
|
import Colorpicker from '@shared/components/ui/Colorpicker.astro';
|
|
import site from '@data/site.json';
|
|
|
|
const colors = Object.values(site.colors) as { hex: string }[];
|
|
---
|
|
|
|
<DefaultLayout
|
|
title="Color picker"
|
|
pageHeader="Color picker"
|
|
pageMenu="plugins.colorpicker"
|
|
pageLibs={['coloris.js']}
|
|
>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h3 class="card-title">Basic</h3>
|
|
<div class="row g-3">
|
|
{
|
|
colors.map((color, index) => (
|
|
<div class="col-2">
|
|
<div>
|
|
<Colorpicker value={color.hex} id={index + 1} format="hex" />
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DefaultLayout>
|