Color swatch

A color swatch is a block of one color. The size prop sets its edge, 36 units by default, and a thin border outlines it. The shape prop picks :rounded, :circle or :square. color takes an ARGB integer such as 0xFF7C3AED or a color token. A swatch without a color paints none.

A swatch carries no value, so its tag identifies it. Put the color's id in the tag, such as {:pick, :violet}, and one handle_info/2 clause serves a whole palette. Set selected to draw a thicker border and a ✓. Children overlay the swatch, and a selected swatch that has children shows them instead of the ✓.

A color with an alpha below 0xFF draws over a checkerboard. Without it, the same translucent color looks different on a light and a dark surface, and the checkerboard makes the transparency itself visible. Opaque colors skip the checkerboard, because the extra nodes would be waste. The checkerboard prop forces it on or off.

Run this from your Mob app's root to add the component to lib/<app>/components/:

mix mishka.ui.gen.mob color_swatch

The generator registers the component's tag, so you can use it in ~MOB markup. It also adds the shared Event module it uses. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaColorSwatch>. Without a prefix the tag is <ColorSwatch>.

This palette has five swatches. A tap selects one: the selected swatch gets a thicker border and a ✓, and the screen shows the picked name below, so you can see the tap reach your code.

Color swatch palette

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. Selection draws a ring and a tick.

# A swatch carries no value — the TAG is what identifies it, so put the
# colour's id in there. One handler then serves the whole palette.
swatches =
  Enum.map(@palette, fn {id, color} ->
    ~MOB"<MishkaColorSwatch color={color} selected={@picked == id} on_tap={{:pick, id}} />"
  end)

def handle_info({:tap, {:pick, id}}, socket) do
  {:noreply, Mob.Socket.assign(socket, :picked, id)}
end

def handle_info(_msg, socket), do: {:noreply, socket}

Set disabled to keep the color visible and drop the tap handler. The component never wires on_tap, so nothing is sent and your screen has nothing to ignore.

Disabled color swatch

LTR RTL

Preview

Show the whole example Show less

# on_tap is given and never wired — disabled drops the handler rather
# than guarding it, so nothing is sent and nothing needs ignoring.
<MishkaColorSwatch color={0xFF3B82F6} disabled={true} on_tap={{:pick, :blue}} />

A translucent color draws over a checkerboard, so you can see how transparent it is. The checkerboard appears on its own below full alpha. Set checkerboard={true} to show it under an opaque color, or checkerboard={false} to turn it off. The screenshot shows the same violet at five alpha values.

Color swatch transparency

LTR RTL

Preview

Show the whole example Show less

# The checkerboard appears on its own below full alpha. checkerboard={true}
# forces it on an opaque colour; false turns it off.
<MishkaColorSwatch color={0x807C3AED} />

Use shape and size to change how a swatch looks. A circle uses a radius of exactly half the size. The screenshot also shows the default rounded shape and a square.

Color swatch shapes and sizes

LTR RTL

Preview

Show the whole example Show less

<MishkaColorSwatch color={0xFF10B981} shape={:circle} size={48} />

The module exports two helpers.

Your screen receives {:tap, tag} in handle_info/2 when the user taps a swatch. A disabled swatch sends nothing.

def handle_info({:tap, {:pick, id}}, socket) do
  {:noreply, Mob.Socket.assign(socket, :picked, id)}
end

The Mob version leaves these parts of the web swatch out:

• label (the aria-label) is not ported.
• The *_class attributes are not ported.
• The id prop is ported as a native test tag, not as a DOM id.

• Headless Color Swatch, the web component this one ports.
• Mob Color Picker, a saturation and value field above a hue strip.
• Mob Alpha Slider, an opacity track drawn over a checkerboard.
• Mob Color Input, a hex field with a picker panel beneath it.
• Mob components, the full list of native components.