hansui

Appearance

ColorSwatch ​

Displays a visual sample of a color or selection from a palette, used for color picking.

lime #a3e635

Features ​

  • Full keyboard navigation
  • Can expand one or multiple items

Anatomy ​

  • Root: The root container for the color-swatch

Usage ​

To create a color-swatch, you can use the New function as shown in the example at the top of this page, or alternatively, you can follow the Builder or Functional patterns. Be sure to follow the anatomy defined above.

New function

templ
@colorswatch.New(value string, props ...*Props)
  • value - A string representing the color (e.g. the HEX value).
  • props - - A pointer to the colorswatch.Props struct that defines the configuration options for the color-swatch (see here).
templ
import colorswatch "github.com/indaco/hansui/components/color-swatch"

@colorswatch.New("#a3e635", &colorswatch.Props{ Name: "lime" })
Builder pattern

The Builder pattern creates an instance using method chaining. The With methods, such as WithColor or WithBorderStyle, are chainable configuration functions that allow you to customize various properties of the component:

templ
@colorswatch.Builder("#a3e635").WithShape("box").Render()
Functional pattern

The Functional pattern applies configurations through individual function calls before rendering the button. Like in the Builder pattern, With methods customize the component by setting specific properties:

templ
@colorswatch.Render("#a3e635", colorswatch.WithShape("box"))

API Reference ​

colorswatch.Props ​

Below is a list of each struct field, along with its type, default value, and allowed values where applicable.

Name ​

The name of the color represented by the swatch.

  • mandatory: true
  • type: string

Shape ​

Defines the shape of the color swatch.

  • type: string
  • default: rounded
  • values: box, rounded, pill, circle

Variant ​

Specifies the style variant of the color swatch.

  • type: string
  • values: lifted, stacked, cyberpunk, brutalist, retro

NoInfo ​

If true, hides any additional information, such as the color name or value, from being displayed with the swatch.

  • type: bool
  • default: false