Skip to content

Latest commit

 

History

History
75 lines (56 loc) · 2.72 KB

README.md

File metadata and controls

75 lines (56 loc) · 2.72 KB
Raw

mithril-material-forms

Lightweight input form components using mithril. Requires material-icon font to work correctly (checkbox, select).

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  // pick requried styles
  @import "mithril-material-forms/styles/layout";
  @import "mithril-material-forms/styles/typography";
  // maybe add additional themes
  @import "mithril-material-forms/styles/theme-material";
  @import "mithril-material-forms/styles/theme-solid";
  // and choose a default theme
  @import "mithril-material-forms/styles/theme-solid-as-default";

Use with

  import m from "mithril";
  import { Switch, SwitchAttrs } from "mithril-material-forms";
  m.render(document.body, 
    m(Switch, <SwitchAttrs>{ requiredAttributes })
  );

For attribute details check each component implementation in index.js. For a list of example build checkout the examples page in /docs/index.html or goto mithril-material-forms docs

Change default theme, by including styles and setting the theme through attributes

  import m from "mithril";
  import "mithril-material-forms/styles/theme-solid";
  import { Switch, SwitchAttrs } from "mithril-material-forms";
  m.render(document.body, 
    m(Switch, <SwitchAttrs>{ theme: "the-solid" })
  );

Usage

  • per convention, an attribute onchange(value): void is used to register to change events

Breaking Changes

v4

  • mithril is now written in typescript and uses no babel transpilation. There may be a need for polyfills
  • components are exported separately

v3

  • required mithril-dependency >= v2
  • all callbacks have mithil-lowercase names onchange instead of onChange
    • this was inconsistent in button, checkbox and input

Adding a new component

A set of instructions for creating and adding a new mithril material component.

  1. Add a new folder to ./components/<component-name>
  2. In this folder, create following files:
    • Component code: ./components/<component-name>/index.ts
    • General style: ./components/<component-name>/layout.scss
    • [Optional] Style for material theme: ./components/<component-name>/<component-name>-material.scss
    • [Optional] Style for solid theme: ./components/<component-name>/<component-name>-solid.scss
  3. Register your component in ./index.ts
  4. Add your layout file (./components/<component-name>/layout.scss) to ./styles/layout.scss
  5. To add your new to component to the demo page, in ./app/index.ts...
    • Add it to the template object, in all possible variations (e.g. disabled, with(out) icon, etc.)
    • Add it to the last render function