m3e

Version 2.1.0 of this software is aligned with v2.5.5 of M3E.

• updated Collapsible with the new attributes orientation and no_animate

Overview

m3e is a set of Gleam/Lustre wrappers for M3E — Material 3 Expressive components

m3e provides Gleam functions for all of the M3E components

Each M3E component is represented by a Gleam type, has

• a constructor function new(…)
• a render() function which creates a Lustre Element from the Gleam type
• setter functions which return a new record with one of the fields of the input record updated. As such, these functions are designed to be used in the Builder Pattern with Gleam’s pipe operator
• where there are 2 or more fields in the opaque record of each component (and hence 2 or more setter functions), support is provided for the Config Record pattern, i.e. a Config type, and default_config(), from_config(), and render_config() functions

Builder Pattern example:

  import m3e/button

  let b = button.new()
    |> button.size(button_size.ExtraSmall)
    |> button.variant(button_variant.Tonal)
    |> button.render([], [element.text("Extra Small")]),

Config Record example

  import lustre/element
  import m3e/card

  card.render_config(
    card.Config(..card.default_config(), variant: card_variant.Outlined),
    [],
    [html.div([card.slot(card.Content)], [element.text("This is a card")])],

  )

Breaking changes from version 1.*

Version 1.* of this software was hand-written. Version 2.* is machine generated from a Custom Element Manifest supplied with each new release of Material 3 Expressive. As such, the Gleam API more closely follows the Manifest (and hence the documented M3E components) than did version 1.*

Further documentation

https://hexdocs.pm/m3e

Installation into a Gleam/Lustre project

gleam add m3e@2

Examples

The examples/ folder contains a showcase application which will eventually replicate each of the M3E demonstration cases in the Gleam/Lustre context.