legos - v1.3.0

legos/input

Types

Box

</> 
pub type Box {
  Box(bottom: Int, left: Int, right: Int, top: Int)
}

Constructors 

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

Label

</> 
pub type Label(msg) {
  Label(
    location: LabelLocation,
    attrs: List(@internal Attribute(@internal Aligned, msg)),
    content: @internal Element(msg),
  )
  HiddenLabel(text: String)
}

Constructors 

  • Label(
  location: LabelLocation,
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  content: @internal Element(msg),
)
  • HiddenLabel(text: String)

LabelLocation

</> 
pub type LabelLocation {
  OnRight
  OnLeft
  Above
  Below
}

Constructors 

  • OnRight
  • OnLeft
  • Above
  • Below

OptionState

</> 
pub type OptionState {
  Idle
  Focused
  Selected
}

Constructors 

  • Idle
  • Focused
  • Selected

Placeholder

</> 
pub type Placeholder(msg) {
  Placeholder(
    attrs: List(@internal Attribute(@internal Aligned, msg)),
    content: @internal Element(msg),
  )
}

Constructors 

  • Placeholder(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  content: @internal Element(msg),
)

RadioOption

</> 
pub type RadioOption(value, msg) {
  RadioOption(
    value: value,
    view: fn(OptionState) -> @internal Element(msg),
  )
}

Constructors 

  • RadioOption(
  value: value,
  view: fn(OptionState) -> @internal Element(msg),
)

TextConfig

</> 
pub type TextConfig(msg) {
  TextConfig(
    on_change: fn(String) -> msg,
    text: String,
    placeholder: option.Option(Placeholder(msg)),
    label: Label(msg),
  )
}

Constructors

Thumb

</> 
pub type Thumb(a) {
  Thumb(attrs: List(@internal Attribute(@internal Aligned, a)))
}

Constructors 

  • Thumb(attrs: List(@internal Attribute(@internal Aligned, a)))

Values

button

</> 
pub fn button(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  on_press on_press: option.Option(msg),
  label label: @internal Element(msg),
) -> @internal Element(msg)

Create a button element

checkbox

</> 
pub fn checkbox(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  on_change on_change: fn(Bool) -> msg,
  icon icon: fn(Bool) -> @internal Element(msg),
  checked checked: Bool,
  label label: Label(msg),
) -> @internal Element(msg)

Create a checkbox input

current_password

</> 
pub fn current_password(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  on_change on_change: fn(String) -> msg,
  text text_val: String,
  placeholder placeholder_val: option.Option(Placeholder(msg)),
  label label_val: Label(msg),
  show show: Bool,
) -> @internal Element(msg)

Create a current password input

default_checkbox

</> 
pub fn default_checkbox(checked: Bool) -> @internal Element(msg)

default_thumb

</> 
pub fn default_thumb() -> Thumb(a)

Default slider thumb

email

</> 
pub fn email(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  on_change on_change: fn(String) -> msg,
  text text: String,
  placeholder placeholder: option.Option(Placeholder(msg)),
  label label: Label(msg),
) -> @internal Element(msg)

Create an email input

focused_on_load

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

Set an element to be focused when the page loads

label_above

</> 
pub fn label_above(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  content: @internal Element(msg),
) -> Label(msg)

Create a label positioned above

label_below

</> 
pub fn label_below(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  content: @internal Element(msg),
) -> Label(msg)

Create a label positioned below

label_hidden

</> 
pub fn label_hidden(text: String) -> Label(msg)

Create a hidden label for accessibility (screen readers only)

label_left

</> 
pub fn label_left(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  content: @internal Element(msg),
) -> Label(msg)

Create a label positioned to the left

label_right

</> 
pub fn label_right(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  content: @internal Element(msg),
) -> Label(msg)

Create a label positioned to the right

multiline

</> 
pub fn multiline(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  on_change on_change: fn(String) -> msg,
  text text_val: String,
  placeholder placeholder_val: option.Option(Placeholder(msg)),
  label label_val: Label(msg),
  spellcheck spellcheck_val: Bool,
) -> @internal Element(msg)

Create a multiline text input (textarea)

new_password

</> 
pub fn new_password(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  on_change on_change: fn(String) -> msg,
  text text_val: String,
  placeholder placeholder_val: option.Option(Placeholder(msg)),
  label label_val: Label(msg),
  show show: Bool,
) -> @internal Element(msg)

Create a new password input

option

</> 
pub fn option(
  value: value,
  content: @internal Element(msg),
) -> RadioOption(value, msg)

Create a radio option with default styling

option_with

</> 
pub fn option_with(
  value: value,
  view: fn(OptionState) -> @internal Element(msg),
) -> RadioOption(value, msg)

Create a radio option with custom styling

placeholder

</> 
pub fn placeholder(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  content: @internal Element(msg),
) -> Placeholder(msg)

Create a placeholder for text inputs

radio

</> 
pub fn radio(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  on_change on_change: fn(option) -> msg,
  options options: List(RadioOption(option, msg)),
  selected selected: option.Option(option),
  label label: Label(msg),
) -> @internal Element(msg)

Create a radio button group (column layout)

radio_row

</> 
pub fn radio_row(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  on_change: fn(option) -> msg,
  options: List(RadioOption(option, msg)),
  selected: option.Option(option),
  label: Label(msg),
) -> @internal Element(msg)

Create a radio button group (row layout)

</> 
pub fn search(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  on_change on_change: fn(String) -> msg,
  text text: String,
  placeholder placeholder: option.Option(Placeholder(msg)),
  label label: Label(msg),
) -> @internal Element(msg)

Create a search input

slider

</> 
pub fn slider(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  on_change on_change: fn(Float) -> msg,
  label label_val: Label(msg),
  min min: Float,
  max max: Float,
  value value: Float,
  thumb thumb: Thumb(msg),
  step step: option.Option(Float),
) -> @internal Element(msg)

A slider input, good for capturing float values.

Input.slider [ Element.height (Element.px 30)

– Here is where we’re creating/styling the “track” , Element.behindContent (Element.el [ Element.width Element.fill , Element.height (Element.px 2) , Element.centerY , Background.color grey , Border.rounded 2 ] Element.none ) ] { on_change = AdjustValue , label = Input.labelAbove [] (text “My Slider Value”) , min = 0 , max = 75 , step = Nothing , value = model.sliderValue , thumb = Input.defaultThumb }

Element.behindContent is used to render the track of the slider. Without it, no track would be rendered. The thumb is the icon that you can move around.

The slider can be vertical or horizontal depending on the width/height of the slider.

  • height fill and width (px someWidth) will cause the slider to be vertical.
  • height (px someHeight) and width (px someWidth) where someHeight > someWidth will also do it.
  • otherwise, the slider will be horizontal.

Note If you want a slider for an Int value:

  • set step to be Just 1, or some other whole value
  • value = toFloat model.myInt
  • And finally, round the value before making a message on_change = round >> AdjustValue

spell_checked

</> 
pub fn spell_checked(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  on_change on_change: fn(String) -> msg,
  text text: String,
  placeholder placeholder: option.Option(Placeholder(msg)),
  label label: Label(msg),
) -> @internal Element(msg)

Create a spell-checked text input

text_input

</> 
pub fn text_input(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  on_change on_change: fn(String) -> msg,
  text text: String,
  placeholder placeholder: option.Option(Placeholder(msg)),
  label label: Label(msg),
) -> @internal Element(msg)

Create a basic text input

thumb

</> 
pub fn thumb(
  attrs: List(@internal Attribute(@internal Aligned, a)),
) -> Thumb(a)

Create a slider thumb

username

</> 
pub fn username(
  attrs: List(@internal Attribute(@internal Aligned, msg)),
  on_change on_change: fn(String) -> msg,
  text text: String,
  placeholder placeholder: option.Option(Placeholder(msg)),
  label label: Label(msg),
) -> @internal Element(msg)

Create a username input

✨ Search Document