Materialize framework options inside...

User 2907842 Photo


Registered User
20 posts

Greetings,

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');

User 10077 Photo


Senior Advisor
1,025 posts

I don't know if these will help, but here are a few first thoughts that came to mind.

If you want to alter the jQuery used by SD3, you'll have to do that after export.

If you bring in your own jQuery, you can go to Pages > Manage Project and add them to the <head> or <foot>. In this case, watch out for any conflicts with the version of jQuery used by SD3.

To add your own custom attributes, select the Element that needs the attribute and go to the Elements Pane. Under "Selected Element Properties," you'll find an attributes dropdown. If the attribute you are looking for is not found there, choose custom, and you can add your own attribute.
How-To Instructions for Coffeecup Users (tutorials, examples, and downloads)
http://usconsumernet.net/help-for-coffe … -users.php

Personal & Specialized Help for Coffeecup Users
Email me at cchelp@uscni.org or call 865-687-7698

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.