在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):ahlechandre/mdl-stepper开源软件地址(OpenSource Url):https://github.com/ahlechandre/mdl-stepper开源编程语言(OpenSource Language):JavaScript 43.9%开源软件介绍(OpenSource Introduction):MDL StepperA library that implements to the Material Design Lite a polyfill of stepper component specified by Material Design. The stepper polyfill will help you to implement this material design component today. NavigationUse MDL Stepper on your site?ahlechandre.github.io/mdl-stepper Get startedThe MDL Stepper component was based on Material Design Lite (MDL) library. To use this component before you will need to include the MDL to your project. InstallationDownload (zip)You can download the current version of repository compacted. Build# Clone the repository.
git clone [email protected]:ahlechandre/mdl-stepper.git
# Access created folder.
cd mdl-stepper Goes to development section for details. NPMnpm install --save mdl-stepper Bowerbower install mdl-stepper Basic usage
CSS & Icons<!-- Material Design Lite CSS -->
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.blue-pink.min.css" />
<!-- MDL Stepper CSS -->
<link rel="stylesheet" href="./stepper.min.css">
<!-- Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> Javascript
<!-- Material Design Lite JS -->
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<!-- MDL Component JS -->
<script defer src="./stepper.min.js"></script>
<script>
(function () {
window.addEventListener('load', function () {
// Your custom code in "onload" callback.
});
})();
</script> Component// Select your stepper element.
var stepperElement = document.querySelector('ul.mdl-stepper');
// Get the instance of componet for control over API.
var Stepper = stepperElement.MaterialStepper;
// Goes to the next step.
Stepper.next(); SteppersThe types of steppers and steps are specified in Material Design page. Linear stepperLinear steppers require users to complete one step in order to move on to the next. (Material Design) Non-linear stepperNon-linear steppers allow users to enter a multi-step flow at any point. (Material Design) Stepper feedbackSteppers may display a transient feedback message after a step is saved. Stepper feedback should only be used if there is a long latency between steps. (Material Design) Editable stepsEditable steps allow users to return later to edit a step. These are ideal for workflows that involve editing steps within a session. (Material Design) Optional stepsOptional steps within a linear flow should be marked as optional. (Material Design) Error stateIntroduction"Steppers display progress through a sequence by breaking it up into multiple logical and numbered steps. Avoid using steppers to break up sections in a short form, or multiple times on one page". Goes to Material Design spec page. To include a componentSee component markup details. Configuration options
Javascript APIMethods and custom events to the control over Stepper instance. Methods
Custom Events
Component handlerThe Stepper follows MDL component design pattern and uses the component handler to register and upgrades the component. if (typeof window.componentHandler !== 'undefined') {
// componentHandler is sucessfully loaded and available globally.
} MDL component design pattern
Dynamically adding a StepperIf you need to include a Stepper after initial page load (by an asynchronous request for example), you will have to manually upgrades the component. // Gets your stepper element added after initial page load.
var stepperElement = document.querySelector('.mdl-stepper');
// The component instance is not upgraded and so not defined.
console.log(typeof stepperElement.MaterialStepper); // undefined
// Upgrades all registered components found in the current DOM.
// This is automatically called on window load.
componentHandler.upgradeAllRegistered();
// At this point, component handler already upgraded
// the Stepper component and assigned the instance for
// control over API.
console.log(typeof stepperElement.MaterialStepper); // object Instead of upgrade all registered (recommended) you can upgrade only the Stepper element using: // Gets your stepper element added after initial page load.
var stepperElement = document.querySelector('.mdl-stepper');
// Upgrades a specific element rather than all in the DOM.
componentHandler.upgradeElement(stepperElement); DevelopmentSource# Clone the repository.
git clone [email protected]:ahlechandre/mdl-stepper.git
# Access created folder.
cd mdl-stepper Javascript# Inside mdl-stepper/ folder.
# Install dev dependencies.
npm install
# Build a development version of javascript changes.
npm run dev
# Build a production version of javascript changes.
npm run prod
# Build a production version of javascript changes on WINDOWS.
# npm run prod-windows CSS# First, make sure that you have SASS installed (http://sass-lang.com/install).
sass --version
# $ Sass x.x.x
# Inside mdl-stepper/ folder.
cd src
# ~/mdl-stepper/src
# Build a development version of css changes.
sass mdl-stepper.scss:../stepper.css
# Build a production version of css changes.
sass mdl-stepper.scss:../stepper.min.css --style compressed Why MDL StepperAs discussed at #1748 issue, the stepper is a component that is present in the Material Design specification and MDL has not support yet. While the Material Design Lite team works in other parts of the library, i decided to create my own component. Obviously, this is my interpretation of the spec and it does not reflect what the Material Design team would consider ‘correct’ but i tried to preserve as much of specified details. You can consider this as a polyfill to be used while the MDL do not include that. Maybe it can be useful and help other people to build their web apps. LicenseMIT License © 2016 Alexandre Thebaldi |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论