mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
34 lines
1.1 KiB
Plaintext
34 lines
1.1 KiB
Plaintext
---
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
|
|
import Card from '@ui/Card.astro'
|
|
import CardBody from '@ui/CardBody.astro'
|
|
import CardTitle from '@ui/CardTitle.astro'
|
|
import CardSubtitle from '@ui/CardSubtitle.astro'
|
|
import Colorpicker from '@ui/Colorpicker.astro'
|
|
import site from '@data/site.json'
|
|
import DocsLink from '@ui/DocsLink.astro'
|
|
|
|
const colors = Object.values(site.colors) as { hex: string; title: string }[]
|
|
---
|
|
|
|
<DefaultLayout title="Color picker" pageMenu="plugins.colorpicker" pageLibs={['coloris.js']}>
|
|
<DocsLink slot="page-header-actions" path="/ui/plugins/color-picker" />
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>Basic</CardTitle>
|
|
<CardSubtitle>Click a swatch to open the picker and choose any color.</CardSubtitle>
|
|
<div class="row g-3">
|
|
{
|
|
colors.map((color, index) => (
|
|
<div class="col-2">
|
|
<div>
|
|
<Colorpicker value={color.hex} id={`${index + 1}`} format="hex" ariaLabel={`${color.title} color value`} />
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</DefaultLayout>
|