legos - v1.3.0

legos/ui

Types

Attr

</> 
pub type Attr(decorative, msg) =
  @internal Attribute(decorative, msg)

Attribute

</> 
pub type Attribute(msg) =
  @internal Attribute(@internal Aligned, msg)

Color

</> 
pub type Color =
  @internal Color

Decoration

</> 
pub type Decoration(a, b) =
  @internal Attribute(a, b)

Device

</> 
pub type Device {
  Device(class: DeviceClass, orientation: Orientation)
}

Constructors

DeviceClass

</> 
pub type DeviceClass {
  Phone
  Tablet
  Desktop
  BigDesktop
}

Constructors 

  • Phone
  • Tablet
  • Desktop
  • BigDesktop

Element

</> 
pub type Element(msg) =
  @internal Element(msg)

FocusStyle

</> 
pub type FocusStyle =
  @internal FocusStyle

Html

</> 
pub type Html(msg)

HtmlAttribute

</> 
pub type HtmlAttribute(msg)

IndexedColumn

</> 
pub type IndexedColumn(data, msg) {
  IndexedColumn(
    header: @internal Element(msg),
    width: @internal Length,
    view: fn(Int, data) -> @internal Element(msg),
  )
}

Constructors 

  • IndexedColumn(
  header: @internal Element(msg),
  width: @internal Length,
  view: fn(Int, data) -> @internal Element(msg),
)

Length

</> 
pub type Length =
  @internal Length

Opt

</> 
pub type Opt =
  @internal Opt

Orientation

</> 
pub type Orientation {
  Portrait
  Landscape
}

Constructors 

  • Portrait
  • Landscape

Shadow

</> 
pub type Shadow =
  @internal Shadow

TableColumn

</> 
pub type TableColumn(data, msg) {
  TableColumn(
    header: @internal Element(msg),
    width: @internal Length,
    view: fn(data) -> @internal Element(msg),
  )
}

Constructors 

  • TableColumn(
  header: @internal Element(msg),
  width: @internal Length,
  view: fn(data) -> @internal Element(msg),
)

WindowSize

</> 
pub type WindowSize {
  WindowSize(width: Int, height: Int)
}

Constructors 

  • WindowSize(width: Int, height: Int)

Values

above

</> 
pub fn above(
  element: @internal Element(msg),
) -> @internal Attribute(@internal Aligned, msg)

align_bottom

</> 
pub fn align_bottom() -> @internal Attribute(
  @internal Aligned,
  msg,
)

align_left

</> 
pub fn align_left() -> @internal Attribute(@internal Aligned, msg)

align_right

</> 
pub fn align_right() -> @internal Attribute(
  @internal Aligned,
  msg,
)

align_top

</> 
pub fn align_top() -> @internal Attribute(@internal Aligned, msg)

alpha

</> 
pub fn alpha(
  o: Float,
) -> @internal Attribute(@internal Aligned, msg)

attr_none

</> 
pub fn attr_none() -> @internal Attribute(@internal Aligned, msg)

behind_content

</> 
pub fn behind_content(
  element: @internal Element(msg),
) -> @internal Attribute(@internal Aligned, msg)

below

</> 
pub fn below(
  element: @internal Element(msg),
) -> @internal Attribute(@internal Aligned, msg)

center_x

</> 
pub fn center_x() -> @internal Attribute(@internal Aligned, msg)

center_y

</> 
pub fn center_y() -> @internal Attribute(@internal Aligned, msg)

classify_device

</> 
pub fn classify_device(window: WindowSize) -> Device

clip

</> 
pub fn clip() -> @internal Attribute(@internal Aligned, msg)

clip_x

</> 
pub fn clip_x() -> @internal Attribute(@internal Aligned, msg)

clip_y

</> 
pub fn clip_y() -> @internal Attribute(@internal Aligned, msg)

column

</> 
pub fn column(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  children: List(@internal Element(msg)),
) -> @internal Element(msg)

cursor

</> 
pub fn cursor() -> @internal Attribute(@internal Aligned, msg)

default_focus

</> 
pub fn default_focus() -> @internal FocusStyle

el

</> 
pub fn el(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  child: @internal Element(msg),
) -> @internal Element(msg)

fill

</> 
pub fn fill() -> @internal Length

fill_portion

</> 
pub fn fill_portion(portion: Int) -> @internal Length

focus_style

</> 
pub fn focus_style(style: @internal FocusStyle) -> @internal Opt

focused

</> 
pub fn focused(
  decs: List(@internal Attribute(a, b)),
) -> @internal Attribute(@internal Aligned, msg)

force_hover

</> 
pub fn force_hover() -> @internal Opt

height

</> 
pub fn height(
  length: @internal Length,
) -> @internal Attribute(@internal Aligned, msg)

hovered

</> 
pub fn hovered(
  decs: List(@internal Attribute(a, b)),
) -> @internal Attribute(@internal Aligned, msg)

hspace

</> 
pub fn hspace(width_: Int) -> @internal Element(f)

html

</> 
pub fn html(node: @internal Element(e)) -> @internal Element(e)

Render a Lustre element with legos

html_attribute

</> 
pub fn html_attribute(
  a: @internal Attribute(c),
) -> @internal Attribute(d, c)

Render a Lustre attribute with legos

image

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

Both a source and a description are required for images.

The description is used for people using screen readers.

Leaving the description blank will cause the image to be ignored by assistive technology. This can make sense for images that are purely decorative and add no additional information.

So, take a moment to describe your image as you would to someone who has a harder time seeing.

in_front

</> 
pub fn in_front(
  element: @internal Element(msg),
) -> @internal Attribute(@internal Aligned, msg)

indexed_table

</> 
pub fn indexed_table(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  data data: List(data),
  columns columns: List(IndexedColumn(data, msg)),
) -> @internal Element(msg)

layout

</> 
pub fn layout(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  child: @internal Element(msg),
) -> @internal Element(msg)

layout_with

</> 
pub fn layout_with(
  options: List(@internal Opt),
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  child: @internal Element(msg),
) -> @internal Element(msg)
</> 
pub fn link(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  url url: String,
  label label: @internal Element(msg),
) -> @internal Element(msg)

map

</> 
pub fn map(
  element: @internal Element(a),
  transform: fn(a) -> b,
) -> @internal Element(b)

map_attribute

</> 
pub fn map_attribute(
  attribute: @internal Attribute(@internal Aligned, a),
  transform: fn(a) -> b,
) -> @internal Attribute(@internal Aligned, b)

maximum

</> 
pub fn maximum(
  length: @internal Length,
  max_length: Int,
) -> @internal Length

minimum

</> 
pub fn minimum(
  length: @internal Length,
  min_length: Int,
) -> @internal Length

modular

</> 
pub fn modular(ratio: Float, base: Float) -> fn(Int) -> Float

mouse_down

</> 
pub fn mouse_down(
  decs: List(@internal Attribute(a, b)),
) -> @internal Attribute(@internal Aligned, msg)

mouse_over

</> 
pub fn mouse_over(
  decs: List(@internal Attribute(a, b)),
) -> @internal Attribute(@internal Aligned, msg)

move_down

</> 
pub fn move_down(
  distance: Float,
) -> @internal Attribute(@internal Aligned, msg)

move_left

</> 
pub fn move_left(
  distance: Float,
) -> @internal Attribute(@internal Aligned, msg)

move_right

</> 
pub fn move_right(
  distance: Float,
) -> @internal Attribute(@internal Aligned, msg)

move_up

</> 
pub fn move_up(
  distance: Float,
) -> @internal Attribute(@internal Aligned, msg)
</> 
pub fn new_tab_link(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  url url: String,
  label label: @internal Element(msg),
) -> @internal Element(msg)

no_hover

</> 
pub fn no_hover() -> @internal Opt

no_static_style_sheet

</> 
pub fn no_static_style_sheet() -> @internal Opt

none

</> 
pub const none: @internal Element(a)

on_left

</> 
pub fn on_left(
  element: @internal Element(msg),
) -> @internal Attribute(@internal Aligned, msg)

on_right

</> 
pub fn on_right(
  element: @internal Element(msg),
) -> @internal Attribute(@internal Aligned, msg)

padding

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

padding_each

</> 
pub fn padding_each(
  top top: Int,
  right right: Int,
  bottom bottom: Int,
  left left: Int,
) -> @internal Attribute(@internal Aligned, msg)

If you find yourself defining unique paddings all the time, you might consider defining

edges =
    (
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
    )

And then just do

paddingEach(edges |> { .._, right: 5 })

padding_xy

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

paragraph

</> 
pub fn paragraph(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  children: List(@internal Element(msg)),
) -> @internal Element(msg)

pct

</> 
pub fn pct(portion: Int) -> @internal Length

pct_screen

</> 
pub fn pct_screen(pct: Int) -> @internal Length

Fill a percent of the safe-viewport size

pointer

</> 
pub fn pointer() -> @internal Attribute(@internal Aligned, msg)

prose

</> 
pub fn prose(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  children: List(@internal Element(msg)),
) -> @internal Element(msg)

px

</> 
pub fn px(pixels: Int) -> @internal Length

rotate

</> 
pub fn rotate(
  angle: Float,
) -> @internal Attribute(@internal Aligned, msg)

row

</> 
pub fn row(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  children: List(@internal Element(msg)),
) -> @internal Element(msg)

scale

</> 
pub fn scale(
  factor: Float,
) -> @internal Attribute(@internal Aligned, msg)

scrollbar_x

</> 
pub fn scrollbar_x() -> @internal Attribute(
  @internal Aligned,
  msg,
)

scrollbar_y

</> 
pub fn scrollbar_y() -> @internal Attribute(
  @internal Aligned,
  msg,
)

scrollbars

</> 
pub fn scrollbars() -> @internal Attribute(@internal Aligned, msg)

shrink

</> 
pub fn shrink() -> @internal Length

space_evenly

</> 
pub fn space_evenly() -> @internal Attribute(
  @internal Aligned,
  msg,
)

spacing

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

spacing_xy

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

table

</> 
pub fn table(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  data data: List(data),
  columns columns: List(TableColumn(data, msg)),
) -> @internal Element(msg)

Show some tabular data.

Start with a list of records and specify how each column should be rendered.

So, if we have a list of persons:

type Person {
  Person(first_name: String, last_name: String)
}

let persons = [
  Person("David", "Bowie"),
  Person("Florence", "Welch"),
]

We could render it using

table([],
    data: persons,
    columns: [
      Column(
        header: Element.text("First Name"),
        width: fill(),
        view: fn(person) { Element.text(person.first_name) },
      ),
      Column(
        header: Element.text("Last Name"),
        width: fill(),
        view: fn(person) { Element.text(person.last_name) },
      ),
    ]),

Note: Sometimes you might not have a list of records directly in your model. In this case it can be really nice to write a function that transforms some part of your model into a list of records before feeding it into Element.table.

text

</> 
pub fn text(content: String) -> @internal Element(msg)

transition

</> 
pub fn transition(
  properties: List(String),
  duration_ms: Int,
) -> @internal Attribute(@internal Aligned, msg)

transparent

</> 
pub fn transparent(
  is_transparent: Bool,
) -> @internal Attribute(@internal Aligned, msg)

vspace

</> 
pub fn vspace(height_: Int) -> @internal Element(g)

width

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

wrapped_row

</> 
pub fn wrapped_row(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  children: List(@internal Element(msg)),
) -> @internal Element(msg)
✨ Search Document