Skip to content

Instantly share code, notes, and snippets.

View axdemelas's full-sized avatar

Alexandre Demelas axdemelas

21 followers · 1 following
View GitHub Profile
@axdemelas
axdemelas / event-onstepcancel.js
Last active June 12, 2016 18:00
Example of onstepcancel event
var stepperElement = document.querySelector('.mdl-stepper');
// Select any step.
var step = stepperElement.querySelector('.mdl-step');
step.addEventListener('onstepcancel', function (event) {
// When the step (this) action button/link with [data-stepper-cancel] attribute is clicked
// you can redirect or do anything else.
window.location.href = 'https://mysite.com';
});
@axdemelas
axdemelas / event-onstepnext.js
Last active June 12, 2016 17:56
Example of onstepnext event
var stepperElement = document.querySelector('.mdl-stepper');
// Get the MaterialStepper instance of element.
var Stepper = stepperElement.MaterialStepper;
// Select any step.
var step = element.querySelector('.mdl-step');
step.addEventListener('onstepnext', function (event) {
// When the step (this) action button/link with [data-stepper-next] attribute is clicked
// you can do some condition to advances and error or do anything else.
@axdemelas
axdemelas / step-action-button-style.html
Last active February 14, 2016 06:59
Step action buttons style
<li class="mdl-step">
<!-- label -->
<!-- content -->
<div class="mdl-step__actions">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
Continue
</button>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
Cancel
</button>
@axdemelas
axdemelas / step-actions-buttons.html
Last active February 14, 2016 06:46
Basic step actions buttons
<li class="mdl-step">
<!-- label -->
<!-- content -->
<div class="mdl-step__actions">
<button data-stepper-continue>Continue</button>
<button data-stepper-cancel>Cancel</button>
<button data-stepper-back>Back</button>
<button data-stepper-skip>Skip</button>
</div>
</li>
@axdemelas
axdemelas / step-action-markup.html
Last active February 14, 2016 06:42
Basic step actions markup
<li class="mdl-step">
<!-- label -->
<!-- content -->
<div class="mdl-step__actions">
<!-- continue button -->
<!-- cancel button -->
<!-- back button (optionally) -->
<!-- skip button (optionally) -->
</div>
</li>
@axdemelas
axdemelas / step-content-markup.html
Last active February 14, 2016 06:38
Basic step content markup
<li class="mdl-step">
<!-- label -->
<div class="mdl-step__content">
</div>
<!-- actions -->
</li>
@axdemelas
axdemelas / step-label-markup.html
Last active February 14, 2016 06:15
Basic step title markup
<li class="mdl-step">
<span class="mdl-step__label">
<span class="mdl-step__title">
<span class="mdl-step__title-text">Name of step 1</span>
<span class="mdl-step__title-message">Summarize if needed</span>
</span>
</span>
<!-- content -->
<!-- actions -->
</li>
@axdemelas
axdemelas / stepper-basic-markup.html
Last active February 14, 2016 04:28
Stepper basic markup
<ul class="mdl-stepper">
<li class="mdl-step"></li>
<li class="mdl-step"></li>
<li class="mdl-step"></li>
</ul>
@axdemelas
axdemelas / this is a test
Created February 9, 2016 03:01
<html>
this is a test
</html>
@axdemelas
axdemelas / stepjsreq.css
Created August 6, 2015 06:44
.step-content > *
{
display: none;
}