Collection of color pickers written in Laminar library. Pickers are composed from reusable components that can be easily used to create your own color picker. Project inspired by React color (i stole some of their CSS).
See demo.
For Laminar 16:
libraryDependencies += "dev.bluepitaya" %%% "laminar-color" % "1.1"All pickers have the same component function signature.
def component(colorSignal: Signal[Hsv], onColorChanged: Observer[Hsv])Default color model for pickers is Hsv. The hsv case class comes with mappings to both hsl and rgba models for easy use in CSS.
val color = Var(Hsv(200, 0.75, 0.75, 1))
val hslValueSignal = color.signal.map(_.toCssHsl)
val rgbaValueSignal = color.signal.map(_.toCssRgba)
val app = div(
div(
h2("Current color"),
div(child.text <-- hslValueSignal),
div(child.text <-- rgbaValueSignal)
),
h2("Color picerks"),
div(
display.flex,
flexDirection.row,
styleProp("gap")("30px"),
div(
h3("Chrome picker"),
ChromePicker.component(color.signal, color.writer)
),
div(
h3("Sketch picker"),
SketchPicker.component(color.signal, color.writer)
),
div(
h3("Simple picker"),
SimplePicker.component(color.signal, color.writer)
)
)
)Best way is to look at source code of current out-of-box pickers to see how to build your onw.
To run example page you need to:
- Run
sbt->project example->~fastLinkJS - Execute
yarn(only once to install JS deps) ->yarn devinexample/uidir.