# ColorPicker

ColorPicker button and color

# Most common usage scenario

<template>
  <div style="position: relative; min-height: 250px;">
    <SfColorPicker
      style="max-width: 11rem;"
      :class="customClass"
      :label="label"
      :has-close="hasClose"
      :isOpen="isOpen || !isMobile"
      @click:toggle="isOpen = !isOpen"
    >
      <SfColor
        style="margin: 0.4375rem;"
        v-for="color in colors"
        :key="color.value"
        :color="color.color"
        :selected="color.selected"
        @click="color.selected = !color.selected"
      />
    </SfColorPicker>
  </div>
</template>
<script>
import { SfColorPicker } from "@storefront-ui/vue";
import { SfColor } from "@storefront-ui/vue";
export default {
  components: {
    SfColorPicker,
    SfColor,
  },
  data() {
    return {
      isOpen: false,
      isMobile: false,
      colors: [
        { label: "Sand", value: "sand", color: "#EDCBB9", selected: false },
        { label: "Mint", value: "mint", color: "#ABD9D8", selected: false },
        {
          label: "Light Gray",
          value: "light gray",
          color: "#F1F2F3",
          selected: false,
        },
        {
          label: "Vivid rose",
          value: "vivid rose",
          color: "#DB5593",
          selected: false,
        },
        { label: "Peach", value: "peach", color: "#F59F93", selected: false },
        { label: "Citrus", value: "citrus", color: "#FFEE97", selected: false },
      ],
      label: "Choose color",
      hasClose: false,
    };
  },
};
</script>

# Props

  • isOpen

    • ColorPicker is open
    • type: boolean
    • defaultValue: false
  • label

    • Label for ColorPicker
    • type: string
    • defaultValue: ""
  • hasClose

    • Close button state whether show it or not
    • type: boolean
    • defaultValue: false

# Slots

  • open

    • Use this slot to replace open button.
    • bindings: toggle
  • label

    • Use this slot to replace label.
    • bindings: label
  • default

    • Use this slot to place content inside the color picker.
  • close

    • Use this slot to replace close button.
    • bindings: hasClose, toggle, isOpen

# Events

  • click:toggle

# CSS modifiers

  • .sf-color-picker--active
  • .sf-color-picker--vertical
  • .sf-color-picker--left

# CSS custom properties (variables)

  • --color-picker-position
  • --color-picker-top
  • --color-picker-right
  • --color-picker-bottom
  • --color-picker-align-items
  • --color-picker-width
  • --color-picker-overflow
  • --color-picker-transform
  • --color-picker-colors-height
  • --color-picker-flex-direction
  • --color-picker-justify-content
  • --color-picker-padding
  • --color-picker-background
  • --color-picker-label-margin
  • --color-picker-label-color
  • --color-picker-label-font
  • --color-picker-label-font-weight
  • --color-picker-label-font-size
  • --color-picker-label-font-line-height
  • --color-picker-label-font-family
  • --color-picker-opacity
  • --color-picker-open-padding
  • --color-picker-open-button-transform-origin
  • --color-picker-open-button-transform
  • --color-picker-close-margin
  • --color-picker-height
  • --color-picker-animation-transform

# Overridden other components CSS variables

  • --button-width
  • --button-padding
  • --button-font
  • --font-light
  • --button-text-transform
  • --icon-color
  • --icon-size
  • --button-background
  • --color-picker-left
  • --open-button-x
  • --open-button-y

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.