Stimulus-materialize-css

A stimulus wrapper for materialize-css javascript.

Install

Call registerAll function wherever you initialize stimulus in your project.

import {Application} from "stimulus"
import {registerAll} from "@virtualmaster/stimulus-materialize-css";

const application = Application.start()
registerAll(application)

Usage

All materialize controllers are prefixed with materialize prefix. If you for example want to use materialize dropdown, you can do it like this.

<a class="dropdown-trigger btn" data-target='dropdown1' data-controller="materialize--dropdown"
   data-materialize--dropdown-constraint-width-value="false" data-materialize--dropdown-cover-trigger-value="false"
   data-materialize--dropdown-hover-value="true" data-materialize--dropdown-close-on-click-value="false" href="#">
    Lets try dropdown!
</a>
<ul class="dropdown-content" id="dropdown1">
    <li>
        <a href="#"> One!</a>
    </li>
    <li>
        <a href="#"> Two!</a>
    </li>
    <li>
        <a href="#"> Three!</a>
    </li>
</ul>

Unfortunately, materialize javascript is really stupid when it comes to initialization, so there is no way, how to pass the dropdown content using stimulus. This is true for all of the components.

Controller list

| Name | Init target | | ------| ------ | | materialize--carousel | element | | materialize--collapsible | element | | materialize--dropdown | element (dropdown trigger) | | materialize--tap-target | tapTarget target | | materialize--material-box | image target | | materialize--slider | element | | materialize--modal | element (modal) | | materialize--parallax | element | | materialize--pushpin | element | | materialize--scrollspy | element (seaction) | | materialize--sidenav | element (sidenav) | | materialize--tabs | element | | materialize--toast | element | | materialize--tooltip | element | | materialize--autocomplete | element | | materialize--datepicker | element | | materialize--timepicker | element | | materialize--date-time-picker | element | | materialize--form | element |

Materialize form controller provides access to text areas and form selects. It also allows proper init when then form is changing dynamically. Materialize date time picker can be used for datetime fields, but it can sometimes behave strangely.