I've fallen in love with Materialize, and gained many new skills after spending so much time it. That being said, there have been some various little problems I couldn't figure out. The most common problem I find my self running into is actually understanding how to use 'options'. To understand what I could with Materialize. I've been referencing http://archives.materializecss.com/ procceeded by trail and error of how to do it inside RSD. I havn't been able to full correlate the terminology between the reference site and RSD. Specifically how to use 'options'. I know that 'options' does have some relevance to '[i]attributes/i]'.
Example from http://archives.materializecss.com/0.100.2/dropdown.html
Options
Option Name Description
- inDuration The duration of the transition enter in milliseconds. Default: 300
- outDuration The duration of the transition out in milliseconds. Default: 225
- constrainWidth If true, constrainWidth to the size of the dropdown activator. Default: true
- hover If true, the dropdown will open on hover. Default: false
- gutter This defines the spacing from the aligned edge. Default: 0
- belowOrigin If true, the dropdown will show below the activator. Default: false
- alignment Defines the edge the menu is aligned to. Default: 'left'
- stopPropagation If true, stops the event propagating from the dropdown origin click handler. Default: false
To use these inline you have to add them as data attributes. If you want more dynamic control, you can define them using the jQuery plugin below.
<a class='dropdown-button btn' data-beloworigin="true" href='#' data-activates='dropdown1'>Drop Me!</a>
jQuery Plugin Initialization
Initialization for dropdowns is only necessary if you create them dynamically.
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrainWidth: false, // Does not change width of dropdown to that of the activator
hover: true, // Activate on hover
gutter: 0, // Spacing from edge
belowOrigin: false, // Displays dropdown below the button
alignment: 'left', // Displays dropdown with edge aligned to the left of button
stopPropagation: false // Stops event propagation
}
);
You can also open dropdowns programatically, the below code will make your modal open on document ready:
$('.dropdown-button').dropdown('open');
You can also close dropdowns programatically:
$('.dropdown-button').dropdown('close');
