lustre_stylish - v1.0.0

lustre/stylish/border

Border styling functions for lustre_stylish.

This module provides functions for styling borders, including:

Example

import lustre_stylish as el
import lustre/stylish/border

el.el([
  border.color(el.rgb(0.5, 0.5, 0.5)),
  border.width(2),
  border.rounded(8),
  border.solid(),
], el.text("Bordered box"))

Types

Attribute

</>

An attribute that can be attached to an element.

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

RoundEachConfig

</>

Configuration for rounded corners on each side.

pub type RoundEachConfig {
  RoundEachConfig(
    top_left: Int,
    top_right: Int,
    bottom_left: Int,
    bottom_right: Int,
  )
}

Constructors 

  • RoundEachConfig(
  top_left: Int,
  top_right: Int,
  bottom_left: Int,
  bottom_right: Int,
)

ShadowConfig

</>

Configuration for a box shadow.

pub type ShadowConfig {
  ShadowConfig(
    offset: #(Float, Float),
    size: Float,
    blur: Float,
    color: stylish.Color,
  )
}

Constructors 

  • ShadowConfig(
  offset: #(Float, Float),
  size: Float,
  blur: Float,
  color: stylish.Color,
)

WidthEachConfig

</>

Configuration for border width on each side.

pub type WidthEachConfig {
  WidthEachConfig(top: Int, right: Int, bottom: Int, left: Int)
}

Constructors 

  • WidthEachConfig(top: Int, right: Int, bottom: Int, left: Int)

Values

color

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

Set the border color.

Example

el.el([border.color(el.rgb(0.0, 0.0, 0.0))], el.text("Black border"))

dashed

</> 
pub const dashed: @internal Attribute(@internal Aligned, msg)

Dashed border line.

Example

el.el([border.width(2), border.dashed], el.text("Dashed border"))

dotted

</> 
pub const dotted: @internal Attribute(@internal Aligned, msg)

Dotted border line.

Example

el.el([border.width(2), border.dotted], el.text("Dotted border"))

glow

</> 
pub fn glow(
  glow_color: stylish.Color,
  size: Float,
) -> @internal Attribute(@internal Aligned, msg)

A glowing effect around the element.

This is a convenience function that creates a shadow with no offset.

Example

el.el([border.glow(el.rgb(0.0, 0.5, 1.0), 4.0)], el.text("Glowing!"))

inner_glow

</> 
pub fn inner_glow(
  glow_color: stylish.Color,
  size: Float,
) -> @internal Attribute(@internal Aligned, msg)

An inner glowing effect.

Example

el.el([border.inner_glow(el.rgb(1.0, 1.0, 1.0), 2.0)], el.text("Inner glow"))

inner_shadow

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

Add an inner shadow to the element.

Inner shadows are currently rendered as regular shadows. Full inset shadow support may be added in a future version.

Example

el.el([
  border.inner_shadow(ShadowConfig(
    offset: #(0.0, 2.0),
    size: 0.0,
    blur: 4.0,
    color: el.rgba(0.0, 0.0, 0.0, 0.2),
  ))
], el.text("Inset shadow"))

round_each

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

Round each corner independently.

Example

el.el([
  border.round_each(RoundEachConfig(
    top_left: 0,
    top_right: 8,
    bottom_left: 8,
    bottom_right: 0,
  ))
], el.text("Custom rounded corners"))

rounded

</> 
pub fn rounded(
  radius: Int,
) -> @internal Attribute(@internal Aligned, msg)

Round all corners equally.

Example

el.el([border.rounded(8)], el.text("Rounded corners"))

shadow

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

Add a drop shadow to the element.

Example

el.el([
  border.shadow(ShadowConfig(
    offset: #(2.0, 2.0),
    size: 0.0,
    blur: 4.0,
    color: el.rgba(0.0, 0.0, 0.0, 0.3),
  ))
], el.text("Drop shadow"))

solid

</> 
pub const solid: @internal Attribute(@internal Aligned, msg)

Solid border line.

Example

el.el([border.width(2), border.solid], el.text("Solid border"))

width

</> 
pub fn width(
  size: Int,
) -> @internal Attribute(@internal Aligned, msg)

Set border width on all sides.

Example

el.el([border.width(2)], el.text("2px border all around"))

width_each

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

Set border width on each side independently.

Example

el.el([
  border.width_each(WidthEachConfig(
    top: 1,
    right: 2,
    bottom: 3,
    left: 4,
  ))
], el.text("Custom borders"))

width_xy

</> 
pub fn width_xy(
  x: Int,
  y: Int,
) -> @internal Attribute(@internal Aligned, msg)

Set horizontal and vertical border widths.

Example

el.el([border.width_xy(2, 4)], el.text("2px horizontal, 4px vertical"))
✨ Search Document