m3e
⚠️ Test State Warning
Version 2.0.0-alpha.1 of this software is currently under test. It is actively being developed, and features may change or break without notice. It is not recommended for production use. We welcome feedback and bug reports.
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.