Skip to content
This repository has been archived by the owner on Oct 30, 2022. It is now read-only.

Latest commit

 

History

History
162 lines (112 loc) · 4.2 KB

getting-started-mithril.md

File metadata and controls

162 lines (112 loc) · 4.2 KB

Getting started with Polythene for Mithril

Example setup

Usage in JavaScript modules

Add Polythene to your project with npm or yarn.

Which packages do you need?

Essential:

  • mithril
  • polythene-mithril

Recommended:

  • polythene-css Provides component CSS files and Material Design styles (typography and font); optionally activates CSS-in-JS more info

Optional:

  • polythene-utilities Layout helper classes more info
  • polythene-core-css CSS tools more info

Installation

npm install --save polythene-mithril polythene-css

Examples

A single component

import m from "mithril"
import { Button } from "polythene-mithril"
import "polythene-css"

m(Button, {
  raised: true,
  label: "Click"
})

A simple app

import m from "mithril"
import { Button, Dialog } from "polythene-mithril"
import { addTypography } from "polythene-css"

addTypography()

const App = {
  view: () => [
    m(Button, {
      raised: true,
      label: "Show dialog",
      events: {
        onclick: () => Dialog.show({
          /* note the Dialog component is below the other elements in the app */
          title: "Hello",
          body: "Click outside to close, or press ESCAPE",
          backdrop: true
        })
      }
    }),
    m(Dialog),
  ]
}

m.mount(document.querySelector("#app"), App)

Usage in a HTML file, JSFiddle or flems

A "standalone" version of Polythene - useful for demonstration purposes - is available at:

https://unpkg.com/polythene-mithril/dist/polythene-mithril-standalone.js

Included:

  • All components
  • All component styles, plus Material Design styles (typography and font), from polythene-css
  • subscribe, unsubscribe from polythene-core
  • Layout styles from polythene-utilities

Not included:

  • Mithril

Setup

Add to your HTML file:

<div id="root"></div>

<script src="https://unpkg.com/[email protected]/mithril.min.js"></script>
<script src="https://unpkg.com/polythene-mithril/dist/polythene-mithril-standalone.js"></script>

To be able to write es6, add babel-standalone (not necessary for JSFiddle or flems):

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

Example script

/* global m, polythene */
const { Button } = polythene

const App = {
  view: () =>
    m(Button, {
      raised: true,
      label: "Button"
    })
}

// Assuming a html element with id `root`
m.mount(document.getElementById("root"), App)

See: online flems