howdy_ui - v1.0.0

howdy/ui/carousel

Carousels: slides side by side, one in view at a time, with previous and next buttons.

carousel.carousel(words.english(), "tour", label: "Product tour", attributes: [], slides: [
  carousel.slide([ui.card([], [text("One")])]),
  carousel.slide([ui.card([], [text("Two")])]),
])

The slides scroll natively, snapping to each one, so swiping, a trackpad and the keyboard all work; the buttons scroll by one slide. Each slide is announced as “slide 2 of 5”. Nothing moves on its own.

styled stacks the slides vertically, or loops from the last slide back to the first. When the slide in view changes, the carousel fires a howdy-slide event with the slide’s index; a live view hears it with on_change.

With autoplay in its attributes, a carousel moves on by itself, wrapping round at the end. It waits while the pointer is over it or focus is in it and while the page is hidden, and it has a pause button. For people who ask for reduced motion it starts paused.

Types

Orientation

</> 
pub type Orientation {
  Horizontal
  Vertical
}

Constructors 

  • Horizontal
  • Vertical

    Slides stacked, scrolling up and down. Give the carousel a height.

Slide

opaque </> 
pub opaque type Slide(msg)

Values

autoplay

</> 
pub fn autoplay(milliseconds: Int) -> attribute.Attribute(msg)

Move to the next slide every milliseconds. Put it in the carousel’s attributes.

</> 
pub fn carousel(
  words: words.Words,
  id: String,
  label label: String,
  attributes attributes: List(attribute.Attribute(msg)),
  slides slides: List(Slide(msg)),
) -> element.Element(msg)
</> 
pub fn carousel_class(orientation: Orientation) -> css.Class

classes

</> 
pub fn classes() -> List(css.Class)

Every class this module uses, for howdy/ui/export.

control_class

</> 
pub fn control_class() -> css.Class

controls_class

</> 
pub fn controls_class() -> css.Class

on_change

</> 
pub fn on_change(
  message: fn(Int) -> msg,
) -> attribute.Attribute(msg)

Hear which slide is in view, counting from 0, in a live view.

play_class

</> 
pub fn play_class() -> css.Class

slide

</> 
pub fn slide(children: List(element.Element(msg))) -> Slide(msg)

slide_class

</> 
pub fn slide_class() -> css.Class

styled

</> 
pub fn styled(
  words: words.Words,
  id: String,
  label label: String,
  orientation orientation: Orientation,
  looping looping: Bool,
  attributes attributes: List(attribute.Attribute(msg)),
  slides slides: List(Slide(msg)),
) -> element.Element(msg)

A carousel laid out another way. With looping, the next button on the last slide goes back to the first, and previous on the first to the last.

viewport_class

</> 
pub fn viewport_class(orientation: Orientation) -> css.Class
✨ Search Document