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(…), or, in special cases, bespoke constructors (such as circular() and linear() in ProgressIndicator)
• 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 3 or more fields in the opaque record of each component (and hence 3 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("Press me", button.Filled) |> button.shape(button.Square)

Config Record example

  import lustre/element
  import m3e/card

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

Further documentation can be found at https://hexdocs.pm/m3e.

Installation into a Gleam/Lustre project

gleam add m3e@1
mkdir -p dist
cd dist
npm i @m3e/all

Development

index.html

Examples

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