Giter Club home page Giter Club logo

blask's Introduction

๐ŸŒŸ Blask

Blask (/blask/) is a UI component library for Lustre!

It has both styled and unstyled components, so you can be as much in control as you need/want to.

You can see them showcased here: https://loipesmas.github.io/blask

List of components

Unstyled

  • select
  • accordion
  • tabs
  • combobox

Styled

  • select
  • accordion
  • tabs
  • switch
  • button
  • input (text, number, file, etc)
  • combobox

Links and usage

Package Version Hex Docs

gleam add blask
import blask
import blask/styled/select

type LanguageOption {
  Gleam
  Haskell
  Rust
  Erlang
}

fn language_to_str(language: LanguageOption) -> String {
  case language {
    Gleam -> "Gleam"
    Haskell -> "Haskell"
    Rust -> "Rust"
    Erlang -> "Erlang"
  }
}


type Model {
    Model(language_select_state: select.SelectState(LanguageOption))
}

type Msg {
  LanguageSelectStateChange(SelectState(LanguageOption))
}

pub fn view(model: Model) -> Element(msg) {
    // somewhere in your view
    select(
      state: model.language_select_state,
      on_state_change: LanguageSelectStateChange,
      display: language_to_str,
    )
}

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

Development

gleam run   # Run the project
gleam test  # Run the tests
gleam shell # Run an Erlang shell

blask's People

Stargazers

Matthias Weston avatar Dylan Carlson avatar Jen Stehlik avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.