lustre_stylish - v1.0.0

lustre/stylish/events

Event handlers for interactive elements.

This module provides event handlers matching elm-ui’s Element.Events API.

Mouse Events

Focus Events

Values

on_click

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

Fire a message when the element is clicked.

import lustre_stylish as el
import lustre/stylish/events

el.el([events.on_click(ButtonClicked)], el.text("Click me"))

on_double_click

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

Fire a message when the element is double-clicked.

el.el([events.on_double_click(ItemOpened)], list_item)

on_focus

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

Fire a message when the element receives focus.

import lustre/stylish/events

el.el([events.on_focus(InputFocused)], input_element)

on_lose_focus

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

Fire a message when the element loses focus.

Note: In elm-ui, this function is called onLoseFocus, but we use on_lose_focus to match Gleam naming conventions.

el.el([events.on_lose_focus(InputBlurred)], input_element)

on_mouse_down

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

Fire a message when a mouse button is pressed on the element.

el.el([events.on_mouse_down(DragStarted)], draggable_element)

on_mouse_enter

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

Fire a message when the mouse enters the element.

el.el([events.on_mouse_enter(HoverStarted)], hoverable_element)

on_mouse_leave

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

Fire a message when the mouse leaves the element.

el.el([events.on_mouse_leave(HoverEnded)], hoverable_element)

on_mouse_move

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

Fire a message when the mouse moves over the element.

el.el([events.on_mouse_move(MouseMoved)], tracking_element)

on_mouse_up

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

Fire a message when a mouse button is released on the element.

el.el([events.on_mouse_up(DragEnded)], draggable_element)
✨ Search Document