ColorPickerPanel • shiny.element

ColorPickerPanel is the core component of ColorPicker.

Basic usage

ColorPickerPanel requires a string typed variable to be bound to v-model.

el_color_picker_panel("cpp", value = "#409EFF")

Alpha

ColorPickerPanel supports alpha channel selecting. To activate alpha selecting, just add the show-alpha attribute.

el_color_picker_panel(
  "cpp_alpha",
  value = "rgba(19, 206, 102, 0.8)",
  show_alpha = TRUE
)

Predefined colors

ColorPickerPanel supports predefined color options

el_color_picker_panel(
  "cpp_pre",
  value = "rgba(255, 69, 0, 0.68)",
  show_alpha = TRUE,
  predefine = c(
    "#ff4500",
    "#ff8c00",
    "#ffd700",
    "#90ee90",
    "#00ced1",
    "#1e90ff",
    "#c71585",
    "rgba(255, 69, 0, 0.68)",
    "rgb(255, 120, 0)",
    "hsv(51, 100, 98)",
    "hsva(120, 40, 94, 0.5)",
    "hsl(181, 100%, 37%)",
    "hsla(209, 100%, 56%, 0.73)",
    "#c7158577"
  )
)

Border

By default the color-picker-panel is bordered but in some case you don’t want it.

tagList(
  tags$div(style = "text-align: center", "No border:"),
  el_divider(),
  tags$div(
    style = "display: flex; flex-wrap: wrap; justify-content: center; gap: 16px",
    tags$div(
      style = "padding: 20px",
      el_color_picker_panel("cpp_border1", value = "#409EFF", border = FALSE)
    ),
    el_divider(direction = "vertical", style = "height: auto"),
    el_card(
      el_color_picker_panel("cpp_border2", value = "#409EFF", border = FALSE)
    )
  )
)

No border:

Disabled

The disabled attribute determines if the color picker is fully disabled.

el_color_picker_panel(
  "cpp_dis",
  value = "#ff6900",
  disabled = TRUE,
  show_alpha = TRUE,
  predefine = c(
    "#ff4500",
    "#ff8c00",
    "#ffd700",
    "#90ee90",
    "#00ced1",
    "#1e90ff",
    "#c71585"
  )
)

API

Element Plus’s tables, and beside each entry where it is in R.

Attributes

Element	In R	Description	Type	Default
`model-value`	`value`; `input$<id>`	binding value	¹	—
`border`	`border`	whether the color picker panel is bordered	²	true
`disabled`	`disabled`	whether to disable the color picker	³	false
`show-alpha`	`show_alpha`	whether to display the alpha slider	⁴	false
`color-format`	`color_format`	color format of v-model	⁵`'rgb' \\\| 'prgb' \\\| 'hex' \\\| 'hex3' \\\| 'hex4' \\\| 'hex6' \\\| 'hex8' \\\| 'name' \\\| 'hsl' \\\| 'hsv'`	⁶`'hex' (when show-alpha is false) \\\| 'rgb' (when show-alpha is true)`
`predefine`	`predefine`	predefined color options	⁷`string[]`	—
`validate-event`	`validate_event`	whether to trigger form validation	⁸	true
`hue-slider-class`	`hue_slider_class`	class names will be passed to hue-slider	⁹`string \\\| string[] \\\| Record<string, boolean>`	—
`hue-slider-style`	`hue_slider_style`	styles will be passed to hue-slider	¹⁰ / ¹¹`StyleValue`	—

Slots

Element	In R	Description
`footer`	`slots = list(footer = )`	content to append after the Input

Exposes

Element	In R	Description
`update`	`call_el(session, id, "update")`	update sub components