legos/background

Types

Direction

pub type Direction {
  ToUp
  ToDown
  ToRight
  ToTopRight
  ToBottomRight
  ToLeft
  ToTopLeft
  ToBottomLeft
  ToRad(Float)
  ToDegrees(Int)
}

Constructors

```
ToUp
```
```
ToDown
```
```
ToRight
```
```
ToTopRight
```
```
ToBottomRight
```
```
ToLeft
```
```
ToTopLeft
```
```
ToBottomLeft
```
```
ToRad(Float)
```
```
ToDegrees(Int)
```

Step

</>

pub type Step {
  ColorStep(@internal Color)
  PercentStep(Int, @internal Color)
  PxStep(Int, @internal Color)
}

Constructors

```
ColorStep(@internal Color)
```
```
PercentStep(Int, @internal Color)
```
```
PxStep(Int, @internal Color)
```

Values

color

</>

pub fn color(
  clr: @internal Color,
) -> @internal Attribute(decorative, msg)

A background color attribute

gradient

</>

pub fn gradient(
  direction: Direction,
  steps: List(Step),
) -> @internal Attribute(decorative, msg)

A linear gradient. First you need to specify what direction the gradient is going by providing an angle in radians. 0.0 is up and pi is down. The colors will be evenly spaced.

image

</>

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

Resize the image to fit the containing element while maintaining proportions and cropping the overflow.

percent

</>

pub fn percent(pct: Int, color: @internal Color) -> Step

Create a percentage-based color step for gradients

px

</>

pub fn px(pixels: Int, color: @internal Color) -> Step

Create a pixel-based color step for gradients

step

</>

pub fn step(color: @internal Color) -> Step

Create a color step for gradients

tiled

</>

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

Tile an image in the x and y axes.

tiled_x

</>

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

Tile an image in the x axis.

tiled_y

</>

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

Tile an image in the y axis.

uncropped

</>

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

A centered background image that keeps its natural proportions, but scales to fit the space.