ColorPicker

Selecciona colores mediante un espectro, un control de brillo y campos de canales, con opacidad opcional.

Uso

<script>
  import { ColorPicker } from 'fluentui-svelte';
</script>

<ColorPicker defaultValue="#0078d4" />

Formas

Usa shape con las opciones compartidas de Shapes: rounded (predeterminada), square o circular. Todas ofrecen los mismos controles de teclado.

<script>
  import { ColorPicker } from 'fluentui-svelte';
</script>

<ColorPicker shape="square" defaultValue="#0078d4" />
<ColorPicker shape="rounded" defaultValue="#107c10" />
<ColorPicker shape="circular" defaultValue="#d83b01" />

Orientación horizontal

Configura orientation="horizontal" para colocar los campos junto al espectro y usar deslizadores verticales.

<script>
  import { ColorPicker } from 'fluentui-svelte';
</script>

<ColorPicker orientation="horizontal" defaultValue="#107c10" alpha />

Opacidad

Activa alpha para editar la opacidad. La vista previa muestra el color sobre un damero y junto a su equivalente opaco. Las ediciones incluyen el canal alfa en el valor hexadecimal.

<script>
  import { ColorPicker } from 'fluentui-svelte';
</script>

<ColorPicker shape="circular" defaultValue="#0078d480" alpha />

Campos RGB y HSV

Usa format="hsv" para comenzar con campos de tono, saturación y brillo. Cambiar entre RGB y HSV conserva el color seleccionado.

<script>
  import { ColorPicker } from 'fluentui-svelte';
</script>

<ColorPicker defaultValue="#8764b8" format="hsv" />

Contraído

Usa collapsed para ocultar los campos inicialmente. El botón de expansión comunica su estado con aria-expanded; bind:collapsed permite controlarlo desde la aplicación.

<script>
  import { ColorPicker } from 'fluentui-svelte';
</script>

<ColorPicker defaultValue="#d83b01" collapsed />
<ColorPicker shape="circular" defaultValue="#0078d4" collapsed alpha />

Valor controlado

Usa bind:value para leer y actualizar el color. Los colores CSS externos sincronizan el espectro, la vista previa y los campos. Las ediciones producen cadenas hexadecimales.

<script>
  import { ColorPicker, Button } from 'fluentui-svelte';
  let color = $state('#0078d4');
</script>

<ColorPicker bind:value={color} />
<output>{color}</output>
<Button onclick={() => color = '#107c10'}>Set green</Button>

Uso con Label

Envuelve el selector en Label para nombrar el grupo. Para una etiqueta separada, usa aria-labelledby; también puedes proporcionar aria-label o label.

<script>
  import { ColorPicker, Label } from 'fluentui-svelte';
</script>

<Label label="Accent color">
  <ColorPicker name="accent" defaultValue="#0078d4" />
</Label>

Formularios y restablecimiento

El campo envía un único color bajo name. La validación nativa admite required y pattern. Restablecer recupera defaultValue; los campos deshabilitados se excluyen del envío.

<script>
  import { ColorPicker, Button, Label } from 'fluentui-svelte';
  let submitted = $state('');
</script>

<form onsubmit={(event) => {
  event.preventDefault();
  submitted = String(new FormData(event.currentTarget).get('accent'));
}}>
  <Label label="Accent color" required>
    <ColorPicker name="accent" defaultValue="#0078d4" required />
  </Label>
  <Button type="submit">Submit</Button>
  <Button type="reset">Reset</Button>
</form>
<output>{submitted}</output>

Deshabilitado

Usa disabled para desactivar la interacción y el envío. Usa readonly para conservar el envío e impedir ediciones.

<script>
  import { ColorPicker } from 'fluentui-svelte';
</script>

<ColorPicker defaultValue="#0078d4" disabled />
<ColorPicker defaultValue="#d83b01" readonly />

Teclado y nombres accesibles

Tab recorre los rangos de tono y saturación, los deslizadores de brillo y opacidad y los campos de canales. En el espectro, Izquierda y Derecha mueven el indicador horizontalmente; Arriba y Abajo lo mueven verticalmente. Se anuncian ambas coordenadas. Inicio y Fin seleccionan los límites del rango enfocado. Adapta channelLabels, label, formatLabel, moreLabel, lessLabel y validationMessage a tu idioma. Los eventos nativos oninput y onchange comunican las ediciones mediante el campo del formulario; ref expone ese campo y wrapperAttributes permite estilizar el grupo visible.

Restricciones de los campos

Los canales RGB admiten enteros de 0 a 255; el tono de 0 a 360, y la saturación, el brillo y la opacidad de 0 a 100. Los valores fuera del rango se ajustan al límite. Los canales vacíos recuperan su valor seleccionado al perder el foco. Hex admite 3 o 6 dígitos, y 4 u 8 con alpha. El prefijo # es opcional. Las ediciones hexadecimales no válidas o incompletas restauran el color seleccionado.

Propiedades del componente