Skip to contents

Create a Framework7 color picker input

Usage

f7ColorPicker(
  inputId,
  label,
  value = "#ff0000",
  placeholder = NULL,
  modules = f7ColorPickerModules,
  palettes = f7ColorPickerPalettes,
  sliderValue = TRUE,
  sliderValueEditable = TRUE,
  sliderLabel = TRUE,
  hexLabel = TRUE,
  hexValueEditable = TRUE,
  groupedModules = TRUE
)

Arguments

inputId

Color picker input.

label

Color picker label.

value

Color picker value. hex, rgb, hsl, hsb, alpha, hue, rgba, hsla are supported.

placeholder

Color picker placeholder.

modules

Picker color modules. Choose at least one.

palettes

Picker color predefined palettes. Must be a list of color vectors, each value specified as HEX string.

sliderValue

When enabled, it will display sliders values.

sliderValueEditable

When enabled, it will display sliders values as <input> elements to edit directly.

sliderLabel

When enabled, it will display sliders labels with text.

hexLabel

When enabled, it will display HEX module label text, e.g. HEX.

hexValueEditable

When enabled, it will display HEX module value as <input> element to edit directly.

groupedModules

When enabled it will add more exposure to sliders modules to make them look more separated.

Examples

if (interactive()) {
 library(shiny)
 library(shinyMobile)

 shinyApp(
   ui = f7Page(
     title = "My app",
     f7SingleLayout(
       navbar = f7Navbar(title = "f7ColorPicker"),
       f7ColorPicker(
         inputId = "mycolorpicker",
         placeholder = "Some text here!",
         label = "Select a color"
       ),
       "The picker value is:",
       textOutput("colorPickerVal")
     )
   ),
   server = function(input, output) {
     output$colorPickerVal <- renderText(input$mycolorpicker)
   }
 )
}