Vitral 0.2
Formulário

ColorPicker

Uma amostra de cor que abre um painel de cores, com o valor em hex, RGB ou HSB e um slider de opacidade opcional.

Testado com WAI-ARIA

Importação

main.ts
import { ColorPicker } from '@vitral/vue';

Inline

RGB: { "r": 16, "g": 185, "b": 129 }
<script setup lang="ts">import { ColorPicker } from '@vitral/vue';import { ref } from 'vue'; const rgb = ref({ r: 16, g: 185, b: 129 });</script> <template>    <ColorPicker v-model="rgb" inline format="rgb" aria-label="Highlight colour" />    <small style="color: var(--vt-text-muted-color)">RGB: {{ rgb }}</small></template>

HSB, sem o campo de texto

HSB: { "h": 330, "s": 70, "b": 90 }
<script setup lang="ts">import { ColorPicker } from '@vitral/vue';import { ref } from 'vue'; const hsb = ref({ h: 330, s: 70, b: 90 });</script> <template>    <ColorPicker v-model="hsb" format="hsb" :show-input="false" aria-label="Tint" />    <small style="color: var(--vt-text-muted-color)">HSB: {{ hsb }}</small></template>

Opacidade

O valor ganha dois dígitos hexadecimais. Arraste o slider, ou foque-o e use as setas; Shift move de dez em dez.

Overlay
Value: 3366994d
Tint, as RGB
Value: { "r": 16, "g": 185, "b": 129, "a": 0.35 }
<script setup lang="ts">import { ColorPicker, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const overlay = ref('3366994d');const glass = ref({ r: 16, g: 185, b: 129, a: 0.35 });</script> <template>    <StackPanel orientation="horizontal" spacing="0.75rem" align="start" wrap>        <StackPanel spacing="0.375rem">            <span id="cp-overlay">Overlay</span>            <ColorPicker v-model="overlay" alpha aria-labelledby="cp-overlay" />            <small style="color: var(--vt-text-muted-color)">Value: {{ overlay }}</small>        </StackPanel>        <StackPanel spacing="0.375rem">            <span id="cp-glass">Tint, as RGB</span>            <ColorPicker v-model="glass" alpha format="rgb" aria-labelledby="cp-glass" />            <small style="color: var(--vt-text-muted-color)">Value: {{ glass }}</small>        </StackPanel>    </StackPanel></template>

Opacidade, inline

O xadrez é a cara da transparência: fica por baixo do gradiente do slider, da pré-visualização e da amostra.

<script setup lang="ts">import { ColorPicker } from '@vitral/vue';import { ref } from 'vue'; const overlay = ref('3366994d');</script> <template>    <ColorPicker v-model="overlay" alpha inline aria-label="Overlay colour" /></template>

Desabilitado

<script setup lang="ts">import { ColorPicker } from '@vitral/vue';</script> <template>    <ColorPicker model-value="aaaaaa" disabled aria-label="Disabled colour" /></template>

API

Lido de packages/vue/src/components/ColorPicker/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
inlinebooleanMostra o painel no lugar, sem uma amostra para abri-lo.
format'hex' | 'rgb' | 'hsb'O que o v-model guarda: `'ff0000'` (o padrão), `{ r, g, b }` ou `{ h, s, b }`.
defaultColorstringA cor em que o painel começa enquanto o valor está vazio. O padrão é `'ff0000'`.
showInputbooleanMostra uma caixa de texto para o valor hex abaixo da área. O padrão é true.
alphabooleanOferece um controle de opacidade e leva a opacidade no valor: oito dígitos hex, ou um `a` junto aos canais. Desligado por padrão, então um seletor a que só se pediu uma cor continua devolvendo uma.
disabledboolean—
placementOverlayPlacement—
appendTostring`'body'` (o padrão), `'self'` para renderizar no lugar, ou um seletor.

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
changeevent: { originalEvent: Event; value: ColorPickerValue }A cor foi alterada pelo leitor: uma tecla, o fim de um arrasto ou um valor hex digitado.
show——
hide——