ColorPicker

Um componente para selecionar uma cor.

Uso

Use a diretiva v-model para controlar o valor do ColorPicker.

<script setup lang="ts">
const value = ref('#00C16A')
</script>

<template>
  <NColorPicker v-model="value" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('#00C16A')
</script>

<template>
  <NColorPicker v-model="value" />
</template>

Use a prop default-value para definir o valor inicial quando você não precisa controlar o estado.

<template>
  <NColorPicker default-value="#00BCD4" />
</template>

Formato RGB

Use a prop format para definir o valor rgb do ColorPicker.

<script setup lang="ts">
const value = ref('rgb(0, 193, 106)')
</script>

<template>
  <NColorPicker format="rgb" v-model="value" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('rgb(0, 193, 106)')
</script>

<template>
  <NColorPicker format="rgb" v-model="value" />
</template>

Formato HSL

Use a prop format para definir o valor hsl do ColorPicker.

<script setup lang="ts">
const value = ref('hsl(153, 100%, 37.8%)')
</script>

<template>
  <NColorPicker format="hsl" v-model="value" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('hsl(153, 100%, 37.8%)')
</script>

<template>
  <NColorPicker format="hsl" v-model="value" />
</template>

Formato CMYK

Use a prop format para definir o valor cmyk do ColorPicker.

<script setup lang="ts">
const value = ref('cmyk(100%, 0%, 45.08%, 24.31%)')
</script>

<template>
  <NColorPicker format="cmyk" v-model="value" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('cmyk(100%, 0%, 45.08%, 24.31%)')
</script>

<template>
  <NColorPicker format="cmyk" v-model="value" />
</template>

Formato CIELab

Use a prop format para definir o valor lab do ColorPicker.

<script setup lang="ts">
const value = ref('lab(68.88% -60.41% 32.55%)')
</script>

<template>
  <NColorPicker format="lab" v-model="value" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('lab(68.88% -60.41% 32.55%)')
</script>

<template>
  <NColorPicker format="lab" v-model="value" />
</template>

Throttle

Use a prop throttle para definir o valor de throttle do ColorPicker.

throttle

<script setup lang="ts">
const value = ref('#00C16A')
</script>

<template>
  <NColorPicker :throttle="100" v-model="value" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('#00C16A')
</script>

<template>
  <NColorPicker :throttle="100" v-model="value" />
</template>

Tamanho

Use a prop size para definir o tamanho do ColorPicker.

size

<template>
  <NColorPicker size="xl" />
</template>

Desabilitado

Use a prop disabled para desabilitar o ColorPicker.

disabled

<template>
  <NColorPicker disabled />
</template>

Exemplos

Como seletor de cores

Use a Button and a Popover component to create a color chooser.

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`throttle`	`50`	`number` Throttle time in ms for the color picker
`disabled`		`boolean` Disable the color picker
`defaultValue`	`'#FFFFFF'`	`string` The default value of the color picker
`format`	`'hex'`	`"hex" \| "rgb" \| "hsl" \| "cmyk" \| "lab"` Format of the color
`size`	`'md'`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`
`modelValue`		`string`
`ui`		`{ root?: SlotClass; picker?: SlotClass; selector?: SlotClass; selectorBackground?: SlotClass; selectorThumb?: SlotClass; track?: SlotClass; trackThumb?: SlotClass; }`

Emits

Event	Type
`update:modelValue`	`[value: string \| undefined]`

Tema

app.config.ts

export default defineAppConfig({
  ui: {
    colorPicker: {
      slots: {
        root: 'data-[disabled]:opacity-75',
        picker: 'flex gap-4',
        selector: 'rounded-md touch-none',
        selectorBackground: 'w-full h-full relative rounded-md',
        selectorThumb: '-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed',
        track: 'w-[8px] relative rounded-md touch-none',
        trackThumb: 'absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed'
      },
      variants: {
        size: {
          xs: {
            selector: 'w-38 h-38',
            track: 'h-38'
          },
          sm: {
            selector: 'w-40 h-40',
            track: 'h-40'
          },
          md: {
            selector: 'w-42 h-42',
            track: 'h-42'
          },
          lg: {
            selector: 'w-44 h-44',
            track: 'h-44'
          },
          xl: {
            selector: 'w-46 h-46',
            track: 'h-46'
          }
        }
      },
      compoundVariants: [],
      defaultVariants: {
        size: 'md'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        colorPicker: {
          slots: {
            root: 'data-[disabled]:opacity-75',
            picker: 'flex gap-4',
            selector: 'rounded-md touch-none',
            selectorBackground: 'w-full h-full relative rounded-md',
            selectorThumb: '-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-white rounded-full cursor-pointer data-[disabled]:cursor-not-allowed',
            track: 'w-[8px] relative rounded-md touch-none',
            trackThumb: 'absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-white cursor-pointer data-[disabled]:cursor-not-allowed'
          },
          variants: {
            size: {
              xs: {
                selector: 'w-38 h-38',
                track: 'h-38'
              },
              sm: {
                selector: 'w-40 h-40',
                track: 'h-40'
              },
              md: {
                selector: 'w-42 h-42',
                track: 'h-42'
              },
              lg: {
                selector: 'w-44 h-44',
                track: 'h-44'
              },
              xl: {
                selector: 'w-46 h-46',
                track: 'h-46'
              }
            }
          },
          compoundVariants: [],
          defaultVariants: {
            size: 'md'
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

CheckboxGroup

Um conjunto de botões de checklist para selecionar várias opções em uma lista.

FileUpload

Um elemento de input para enviar arquivos.