Sélecteur de couleur

VColorPicker choisit une couleur avec une zone de saturation et de luminosité, une piste de teinte et un champ qui accepte l’hexadécimal, rgb(), hsl() et oklch(). Ses pistes sont des curseurs natifs : les technologies d’assistance règlent chaque canal séparément.

Utilisation

vue

#3b82f6

<script setup lang="ts">
import { ref } from 'vue'
import { VColorPicker } from 'vectis-ui'

const color = ref<string | null>('#3b82f6')
</script>

<template>
  <div class="row">
    <VColorPicker v-model="color" />
    <code>{{ color }}</code>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--vectis-space-4);
}
</style>

Exemples

Formats

format fixe l’écriture de la valeur : hex, rgb, hsl ou oklch. Le menu à côté du champ ne change que l’affichage du champ. Le sélecteur travaille en sRGB et ramène dans cet espace une couleur oklch() qui en sort.

vue

oklch(62.3% 0.188 259.8)

<script setup lang="ts">
import { ref } from 'vue'
import { VColorPicker } from 'vectis-ui'

const color = ref<string | null>('oklch(62.3% 0.188 259.8)')
</script>

<template>
  <div class="row">
    <VColorPicker v-model="color" format="oklch" />
    <code>{{ color }}</code>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--vectis-space-4);
}
</style>

Opacité

alpha ajoute une piste d’opacité. L’alpha n’est écrit dans la valeur qu’en dessous de 1.

vue

rgb(59 130 246 / 0.6)

<script setup lang="ts">
import { ref } from 'vue'
import { VColorPicker } from 'vectis-ui'

const color = ref<string | null>('rgb(59 130 246 / 0.6)')
</script>

<template>
  <div class="row">
    <VColorPicker v-model="color" format="rgb" alpha />
    <code>{{ color }}</code>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--vectis-space-4);
}
</style>

Nuancier

swatches propose des couleurs prédéfinies sous forme de boutons radio natifs. Passez { color, label } pour nommer une pastille auprès des lecteurs d’écran.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { VColorPicker } from 'vectis-ui'
import type { ColorSwatch } from 'vectis-ui'

const color = ref<string | null>('#0ea5e9')
const swatches: ColorSwatch[] = [
  { color: '#0ea5e9', label: 'Ocean' },
  { color: '#16a34a', label: 'Forest' },
  { color: '#f59e0b', label: 'Sun' },
  '#e11d48',
  '#7c3aed',
  '#0f172a',
]
</script>

<template>
  <VColorPicker v-model="color" :swatches="swatches" label="Brand colours" />
</template>

API

Props

Prop	Type	Défaut
`format`	`ColorFormat'hex' \| 'rgb' \| 'hsl' \| 'oklch'`	`'hex'`
Écriture de la valeur. Le champ accepte les quatre formats.
`alpha`	`boolean`	`false`
Ajoute une piste d’opacité et écrit l’alpha en dessous de 1.
`swatches`	`ColorSwatch[]`	aucune
Couleurs prédéfinies : une chaîne de couleur ou `{ color, label }`.
`hideInput`	`boolean`	`false`
Masque le champ de saisie et son menu de format.
`hideEyeDropper`	`boolean`	`false`
Masque la pipette, affichée sinon là où le navigateur prend en charge l’API `EyeDropper`.
`disabled`	`boolean`	`false`
Désactive toutes les commandes.
`label`	`string`	aucune
Nom accessible du sélecteur. Par défaut, celui du dictionnaire de la bibliothèque.
`name`	`string`	aucune
Nom du champ à l’envoi du formulaire, par un input caché.
`v-model`	`string \| null`	`null`
Couleur écrite selon `format`, ou `null` avant tout choix.

Types

Types utilisés dans les tables d’API. Importez les types exportés depuis vectis-ui.

export type ColorSwatch = string | { color: string; label: string }

Variables CSS

Token	Valeur
`--vectis-control-size-color-picker-width`	`16rem`
`--vectis-control-size-color-picker-area`	`10rem`
`--vectis-control-size-color-picker-track`	`0.75rem`
`--vectis-control-size-color-picker-thumb`	`1rem`
`--vectis-control-size-color-picker-preview`	`2rem`
`--vectis-control-size-color-picker-swatch`	`1.5rem`
`--vectis-control-size-color-picker-checker`	`0.5rem`