Modular implementation of Material Design for Mithril.
Polythene uses Node tools to build. It runs in the browser.
Source files are written in es6 and transpiled to es5. The building blocks are async es6 modules and loaded when needed, but using SystemJS / jspm / Browserify it is also possible to create bundles where all required modules are combined.
Polythene works both in es6 and es5 applications.
A simple es6 module that shows a button:
import m from 'mithril';
import button from 'polythene/button/button';
import 'polythene/theme/theme';
const app = {
view: () => {
return m('div', [
m.component(button, {
label: 'Button',
raised: true
})
]);
}
};
m.mount(document.body, app);
A standalone script is included for use on JSBin / JSFiddle. Include this script:
https://rawgit.com/ArthurClemens/Polythene/master/polythene-standalone.js
You will need:
Polythene
- the core components (this repository; see instructions below)- Polythene examples - (optional) to see implementations of components
npm install polythene
jspm install github:ArthurClemens/Polythene
When using Browserify, use require
to get components:
var m = require('mithril');
require('polythene/theme/theme');
var btn = require('polythene/button/button');
Transpile everything:
npm run transpile .
Transpile dialog component:
npm run transpile dialog
The default theme uses flexbox, so this works in IE10 and other browsers. For IE9 you will need to adapt the theme.
- Button
- Card
- Checkbox
- Dialog
- Divider (part of List)
- Floating Action Button
- Header panel
- Icon
- Icon button (toggle button)
- List
- List tile
- Menu, Simple menu
- Notification and Snackbar
- Radio button
- Ripple
- Search
- Shadow
- Slider
- Spinner
- Subheader (part of List)
- SVG
- Switch
- Tabs
- Text field
- Theming
- Toolbar
- Validation
- Collapse
- Dropdown button
- Progress bar
- Bottom sheet
- Grid list
- Data table
- Stepper
- Tooltip
- Side menu
- Picker
- Chip
- Reorder list
MIT