lustre_stylish - v1.0.0

lustre/stylish/background

Background styling functions for lustre_stylish.

This module provides functions for setting background colors, gradients, and images on elements.

Example

import lustre_stylish as el
import lustre/stylish/background

el.el([
  background.color(el.rgb(0.9, 0.9, 0.95)),
  el.padding(20),
], el.text("Light background"))

Types

Attribute

</>

An attribute that can be attached to an element.

pub type Attribute(msg) =
  @internal Attribute(@internal Aligned, msg)

GradientConfig

</>

Configuration for a linear gradient.

pub type GradientConfig {
  GradientConfig(angle: Float, steps: List(stylish.Color))
}

Constructors

Values

color

</> 
pub fn color(
  bg_color: stylish.Color,
) -> @internal Attribute(@internal Aligned, msg)

Set the background color.

Example

el.el([background.color(el.rgb(1.0, 1.0, 0.9))], el.text("Yellow background"))

gradient

</> 
pub fn gradient(
  config: GradientConfig,
) -> @internal Attribute(@internal Aligned, msg)

Create a linear gradient background.

The angle is in radians where 0 is up and pi (~3.14159) is down. Colors will be evenly spaced across the gradient.

Example

el.el([
  background.gradient(GradientConfig(
    angle: 0.0,  // Vertical gradient going up
    steps: [
      el.rgb(0.0, 0.5, 1.0),  // Blue at bottom
      el.rgb(1.0, 1.0, 1.0),  // White at top
    ]
  ))
], el.text("Gradient background"))

image

</> 
pub fn image(
  src: String,
) -> @internal Attribute(@internal Aligned, msg)

A background image that covers the element, maintaining aspect ratio.

The image is centered and scaled to cover the entire element, cropping any overflow.

Example

el.el([
  background.image("/images/hero.jpg"),
  el.width(el.fill()),
  el.height(el.px(400)),
], el.none())

tiled

</> 
pub fn tiled(
  src: String,
) -> @internal Attribute(@internal Aligned, msg)

A tiled background image (repeats in both x and y directions).

Example

el.el([background.tiled("/images/pattern.png")], el.text("Tiled pattern"))

tiled_x

</> 
pub fn tiled_x(
  src: String,
) -> @internal Attribute(@internal Aligned, msg)

A background image that tiles horizontally.

Example

el.el([background.tiled_x("/images/stripe.png")], el.text("Horizontal tiles"))

tiled_y

</> 
pub fn tiled_y(
  src: String,
) -> @internal Attribute(@internal Aligned, msg)

A background image that tiles vertically.

Example

el.el([background.tiled_y("/images/stripe.png")], el.text("Vertical tiles"))

uncropped

</> 
pub fn uncropped(
  src: String,
) -> @internal Attribute(@internal Aligned, msg)

A background image that fits within the element, maintaining aspect ratio.

The image is centered and scaled to fit completely within the element without cropping.

Example

el.el([background.uncropped("/images/logo.png")], el.none())
✨ Search Document