lustre/attribute

Types

The Attribute type encompasses HTML attributes, DOM properties, and event listeners.

pub type Attribute(msg) =
  vdom.Attribute(msg)

Functions

pub fn accept(types: List(String)) -> Attribute(a)
pub fn accept_charset(types: List(String)) -> Attribute(a)
pub fn action(url: String) -> Attribute(a)
pub fn alt(text: String) -> Attribute(a)
pub fn attribute(name: String, value: String) -> Attribute(a)

Create an HTML attribute. This is like saying element.setAttribute("class", "wibble") in JavaScript. Attributes will be rendered when calling element.to_string.

Note: there is a subtle difference between attributes and properties. You can read more about the implications of this here.

pub fn autocomplete(name: String) -> Attribute(a)
pub fn autofocus(should_autofocus: Bool) -> Attribute(a)
pub fn autoplay(should_autoplay: Bool) -> Attribute(a)
pub fn checked(is_checked: Bool) -> Attribute(a)
pub fn class(name: String) -> Attribute(a)

Note: unlike most attributes, multiple class attributes are merged with any existing other classes on an element.

pub fn classes(names: List(#(String, Bool))) -> Attribute(a)
pub fn cols(val: Int) -> Attribute(a)
pub fn controls(visible: Bool) -> Attribute(a)
pub fn disabled(is_disabled: Bool) -> Attribute(a)
pub fn download(filename: String) -> Attribute(a)
pub fn enctype(value: String) -> Attribute(a)
pub fn for(id: String) -> Attribute(a)
pub fn form_action(action: String) -> Attribute(a)
pub fn form_enctype(value: String) -> Attribute(a)
pub fn form_method(method: String) -> Attribute(a)
pub fn form_novalidate(value: Bool) -> Attribute(a)
pub fn form_target(target: String) -> Attribute(a)
pub fn height(val: Int) -> Attribute(a)
pub fn href(uri: String) -> Attribute(a)
pub fn id(name: String) -> Attribute(a)
pub fn loop(should_loop: Bool) -> Attribute(a)
pub fn map(attr: Attribute(a), f: fn(a) -> b) -> Attribute(b)

The Attribute type is parameterised by the type of messages it can produce from events handlers. Sometimes you might end up with an attribute from a library or module that produces a different type of message: this function lets you map the messages produced from one type to another.

pub fn max(val: String) -> Attribute(a)
pub fn method(method: String) -> Attribute(a)
pub fn min(val: String) -> Attribute(a)
pub fn msg(uri: String) -> Attribute(a)
pub fn name(name: String) -> Attribute(a)
pub fn none() -> Attribute(a)

Create an empty attribute. This is not added to the DOM and not rendered when calling element.to_string, but it is useful for conditionally adding attributes to an element.

pub fn novalidate(value: Bool) -> Attribute(a)
pub fn on(
  name: String,
  handler: fn(Dynamic) -> Result(a, List(DecodeError)),
) -> Attribute(a)
pub fn pattern(regex: String) -> Attribute(a)
pub fn placeholder(text: String) -> Attribute(a)
pub fn property(name: String, value: a) -> Attribute(b)

Create a DOM property. This is like saying element.className = "wibble" in JavaScript. Properties will be not be rendered when calling element.to_string.

Note: there is a subtle difference between attributes and properties. You can read more about the implications of this here.

pub fn readonly(is_readonly: Bool) -> Attribute(a)
pub fn rel(relationship: String) -> Attribute(a)
pub fn required(is_required: Bool) -> Attribute(a)
pub fn role(name: String) -> Attribute(a)
pub fn rows(val: Int) -> Attribute(a)
pub fn selected(is_selected: Bool) -> Attribute(a)
pub fn src(uri: String) -> Attribute(a)
pub fn step(val: String) -> Attribute(a)
pub fn style(properties: List(#(String, String))) -> Attribute(a)

Note: unlike most attributes, multiple style attributes are merged with any existing other styles on an element. Styles added later in the list will override styles added earlier.

pub fn target(target: String) -> Attribute(a)
pub fn type_(name: String) -> Attribute(a)
pub fn value(val: String) -> Attribute(a)
pub fn width(val: Int) -> Attribute(a)
pub fn wrap(mode: String) -> Attribute(a)
Search Document