Modular implementation of Material Design for Mithril.
This release contains a major refactoring of all components, including:
- CSS now uses BEM notation
- Polythene-theme is now integrated
- More options to customize theming
- Simplified opening/closing of dialogs
- Rewrite of Slider with more customization options
Added components:
- Checkbox
- Radio button
- Search
- Spinner
- Switch
- Text field
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');
The included transpile script calls Babel with params --presets es2015
and --plugins babel-plugin-add-module-exports
.
Transpile everything once:
npm run transpile
Watch changes while developing:
npm run watch
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