mithril-materialized

A materialize-css library for the Mithril framework (v2.0.0-rc.3 and higher), making it easier to use a Materialize theme in your application. The main focus of this library is on creating Mithril components for the more complicated Materialize components.

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
• Others
  • ModalPanel
  • MaterialBox
  • Collapsible or accordion
  • Carousel
  • Parallax
• Additional
  • Label
  • HelperText
  • CodeBlock (not from materialize-css)

Version history

v0.4 No breaking changes

• New components: MaterialBox, Collapsible or accordion, and Carousel

v0.3 Breaking changes

• Buttons no longer use the ui class to specify additional properties like onclick. Instead, you can leverage the mithril attributes directly. See the example, button-page.
• contentClass has been removed in favour of the default mithril class or className attribute.
• The Icon function has been replaced by the Icon component. The SmallIcon and PrefixedIcon have been removed, as they can easily be created using the Icon component.
• The autofocus attribute for inputs now also works on updates (by calling the element.focus() method).
• The code has been split over multiple files, so it is easier to only import the components that you need.

v0.2.2

• Validate function can return a custom validation message. Also, it is called in onupdate, so the validation occurs also when you just attach the validate function conditionally.

v0.2.1

• Label field is optional for inputs.
• Added autofocus function|property to input fields.
• Added custom validation using the validate function|property to add valid/invalid label to an input.
• Removed dependency on materialize-css (it is expected that it is imported via the main app).

Usage instructions

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.

Build instructions

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.

CSS

Although I've tried to limit the CSS adaptations to a minimum, I needed to tweak certain parts to make it look better. Here are the styles I've added.

.clear,
.clear-10,
.clear-15 {
  clear: both;
  /* overflow: hidden; Précaution pour IE 7 */
}
.clear-10 {
  margin-bottom: 10px;
}
.clear-15 {
  margin-bottom: 15px;
}

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;
}

.codeblock {
  margin: 1.5rem 0 2.5rem 0;
}
.codeblock > div {
  margin-bottom: 1rem;
}

.codeblock > label {
  display: inline-block;
}

span.mandatory {
  margin-left: 5px;
  color: red;
}

label+.switch {
  margin-top: 1rem;
}