gbr_ui - v1.0.1

gbr/ui

🎨 Gleam UI library by @gleam-br

Loader:

fn view(model: Model) -> Element(ModelEvent) {
   let Model(loading:) = model

   loading
   |> ui.loader()
}

Horizontal:

pub fn render(in: Login) -> Element(LoginEvent) {
  let Login(basic:, logo:) = in

  [basic, logo]
  |> ui.horizontal()
}

Main:

pub fn render(in: AdminHome) -> Element(AdminEvent) {
  let AdminHome(sidebar:, header:, content:, breadcrumb:) = in

  ui.primary(header:, sidebar:, content:, breadcrumb:)
}

Values

box

</> 
pub fn box(
  in: List(model.UIBox(a)),
  attrs: List(attribute.Attribute(a)),
) -> element.Element(a)

UI boxes layout

grid

</> 
pub fn grid(
  left: List(element.Element(a)),
  right: List(element.Element(a)),
  inner: List(element.Element(a)),
) -> element.Element(a)

UI grid layout with left, right, inner elements.

Excelent layout to one page message from errors, e.g. 404 or page to payment success message.

Supose page 404 with grid img background render function:

pub fn render() -> Element(Msg) {
  let img = html.img([src("/assets/grid-01.svg"), alt("Grid")])
  let inner = [
    html.h1([], [html.text("404: Not found")])
  ]

  ui.grid(left: img, right: img, inner:)
}

Fn desc: Transform three 3 -> 1

Three elements to one element with grid layout.

horizontal

</> 
pub fn horizontal(
  inner: List(element.Element(a)),
) -> element.Element(a)

UI layout with horizontal inner elements.

Better choise to work with gbr/ui/login.{basic}.

Supose login render function:

pub fn render(in: Login) -> Element(LoginEvent) {
  let Login(basic:, logo:) = in

  [basic, logo]
  |> ui.horizontal()
}

Fn desc: Reduce * -> 1

List of elements to one element with horizontal layout inner elements.

loader

</> 
pub fn loader(loading: Bool) -> element.Element(a)

UI loader layout with ui screen full blur and a center spin loader.

Better choice to work with gbr_js and gbr/js/global.{dom_content_loaded}.

Supose on dom loaded dispatch OnLoading(False) when:

  • init: Model(loading: True)
  • after: Model(loading: False):
fn on_dom_loaded(runtime) {
  use _ <- function.tap(runtime)
  use _ <- global.dom_content_loaded()

  AdminEventOnLoading(False)
  |> lustre.dispatch()
  |> lustre.send(runtime, _)
}

fn view(model: Model) -> Element(ModelEvent) {
   let Model(loading:) = model

   loading
   |> ui.loader()
}

Fn desc: Trasform one 1 -> 1

Bool type to loader element layout

  • True: Render loader
  • False: Render lustre/element.{none}

partial

</> 
pub fn partial(
  header header: element.Element(a),
  sidebar sidebar: element.Element(a),
) -> element.Element(a)

UI layout partial with header and sidebar only.

Better choise when you need only partial primary layout.

Fn desc: Transform two 2 -> 1

Two elements to one element with partial primary layout ui.

primary

</> 
pub fn primary(
  header header: element.Element(a),
  sidebar sidebar: element.Element(a),
  content content: option.Option(element.Element(a)),
) -> element.Element(a)

UI primary layout with header, sidebar, breadcrumb and content.

Excelent layout to admin home page.

Better choise to work with gbr_ui_router links in sidebar to update content element.

Supose admin home render function:

pub fn render(in: AdminHome) -> Element(AdminEvent) {
  let AdminHome(sidebar:, header:, content:, breadcrumb:) = in

  ui.primary(header:, sidebar:, content:, breadcrumb:)
}

Fn desc: Transform three 3 -> 1

Three elements to one element with primary layout.

primary_with_breadcrumb

</> 
pub fn primary_with_breadcrumb(
  header header: element.Element(a),
  sidebar sidebar: element.Element(a),
  content content: option.Option(element.Element(a)),
  breadcrumb breadcrumb: option.Option(element.Element(a)),
) -> element.Element(a)

Same of gbr/ui.primary with optional breadcrumb element.

TODO: WIP

svg

</> 
pub const svg: fn(Int, Int) -> core.Svg

Construct new super svg element gbr/ui/svg.{new}.

✨ Search Document