m3e
Version 2.0.0 of this software is aligned with v2.5.2 of M3E.
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
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.