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](https://github.com/matraic/m3e). 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.