A materialize-css library, available on npm, for the Mithril framework (tested with v2.0.0-rc7 and higher, but presumably, it should work with v1.1.6 too), making it easier to use a Materialize theme in your application. This library provides you with Mithril components, wrapping around the materialize-css functionality.
Supported components:
- Buttons
- Button
- FlatButton
- RoundButton
- SubmitButton
- Inputs
- TextInput
- TextArea
- AutoComplete
- UrlInput
- EmailInput
- NumberInput
- ColorInput
- RangeInput
- Chips
- Pickers
- DatePicker
- TimePicker
- Selections
- Select
- Options
- RadioButtons
- Switch
- Dropdown
- Collections
- Basic, Link and Avatar Collections
- Collapsible or accordion
- Others
- ModalPanel
- MaterialBox
- Carousel
- Pagination
- Parallax
- Additional
- Label
- HelperText
- Not from Materialize-CSS
See the documentation for examples on how to use this library in your own application. Please note that the library does not include mithril, nor the materialize-css JavaScript or CSS, so you have to include them yourself, as documented.
This repository consists of two packages, combined using lerna
: the lib
package that is published to npm
, as well as an example
project which uses this library to display the Mithril components that it contains.
To install the dependencies, you can use npm i
, or, alternatively, use pnpm m i
(assuming you have installed pnpm
as alternative package manager using npm i -g pnpm
) to perform a multi-repository install. Next, build everything using npm start
and visit the documentation page on http://localhost:1234 in case port 1234 is not occupied already.
Although I've tried to limit the CSS adaptations to a minimum, I needed to tweak certain parts to make it look better. You can either copy them manually, or import them, e.g.
import 'mithril-materialized/dist/index.css';
Here are the styles I've added.
/* For the switch */
.clear,
.clear-10,
.clear-15 {
clear: both;
/* overflow: hidden; Précaution pour IE 7 */
}
.clear-10 {
margin-bottom: 10px;
}
.clear-15 {
margin-bottom: 15px;
}
span.mandatory {
margin-left: 5px;
color: red;
}
label+.switch {
margin-top: 1rem;
}
/* For the color input */
input[type='color']:not(.browser-default) {
margin: 0px 0 8px 0;
/** Copied from input[type=number] */
background-color: transparent;
border: none;
border-bottom: 1px solid #9e9e9e;
border-radius: 0;
outline: none;
height: 3rem;
width: 100%;
font-size: 16px;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: border 0.3s, -webkit-box-shadow 0.3s;
transition: border 0.3s, -webkit-box-shadow 0.3s;
transition: box-shadow 0.3s, border 0.3s;
transition: box-shadow 0.3s, border 0.3s, -webkit-box-shadow 0.3s;
}
/* For the options' label */
.input-field.options > label {
top: -2.5rem;
}
/* For the code block */
.codeblock {
margin: 1.5rem 0 2.5rem 0;
}
.codeblock > div {
margin-bottom: 1rem;
}
.codeblock > label {
display: inline-block;
}