❤
npm
Sign UpSign In

mdl-currency-usd

1.0.6 • Public • Published

mdl-currency-usd

An Material Design Lite currency textfield implementation for capturing user entered US currency values (https://github.com/google/material-design-lite)

Bower Version NPM Version license

bitHound Overall Score bitHound Dependencies bitHound Dev Dependencies bitHound Code

A custom textfield implementation of a US currency component for Material Design Lite

Install

Via npm:

npm install mdl-currency-usd

Then include in your html:

<link rel="stylesheet" href="./bower_components/mdl-currency-usd/dist/mdl-currency-usd.min.css">
...
<script src="./bower_components/mdl-currency-usd/dist/mdl-currency-usd.min.js"></script>

Basic use

To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the <head> section of the page, as described in the MDL Introduction.

To include a MDL currency-usd textfield component:

 1. Code a <div> element to hold the currency text field.

<div>
...
</div>

 2. Inside the div, code an <input> element add an id attribute of your choice.

<div>
  <input type="text" id="sample3">
</div>

 3. Also inside the div, after the <input> field, code a <label> element with a for attribute whose value matches the input element's id value, and a short string to be used as the field's placeholder text.

<div>
        <input type="text" id="sample3">
        <label for="sample3">currency Example...</label>
</div>

 4. Add one or more MDL classes, separated by spaces, to the div container, input field, input label, and error message using the class attribute.

<div class="mdl-currency-usd mdl-js-currency-usd mdl-currency-usd--floating-label">
        <input class="mdl-currency-usd__input" type="text" id="sample3">
        <label class="mdl-currency-usd__label" for="sample3">currency Example...</label>
</div>

The currency textfield component is ready for use.

Examples

currency field with a standard label.

<div class="mdl-currency-usd mdl-js-currency-usd">
        <input class="mdl-currency-usd__input" type="text" id="sample1">
        <label class="mdl-currency-usd__label" for="sample1">currency Example...</label>
</div>

currency field with a floating label.

<div class="mdl-currency-usd mdl-js-currency-usd mdl-currency-usd--floating-label">
        <input class="mdl-currency-usd__input" type="text" id="sample4">
        <label class="mdl-currency-usd__label" for="sample4">currency Example...</label>
</div>

currency field with a standard label, and error message.

<div class="mdl-currency-usd mdl-js-currency-usd">
        <input class="mdl-currency-usd__input" type="text" id="sample4">
        <label class="mdl-currency-usd__label" for="sample4">currency Example...</label>
        <span class="mdl-currency-usd__error">#.##</span>
</div>

currency field with a standard label, symbol, and error message.

<div class="mdl-currency-usd mdl-js-currency-usd">
        <input class="mdl-currency-usd__input" type="text" id="sample4">
        <label class="mdl-currency-usd__label" for="sample4">currency Example...</label>
        <div class="mdl-currency-usd__symbol">$</div>
        <span class="mdl-currency-usd__error">#.##</span>
</div>

currency field with floating label, symbol, error message, and 12 integer 2 decimal constraint

<div class="mdl-currency-usd mdl-js-currency-usd mdl-currency-usd--floating-label">
        <input class="mdl-currency-usd__input" type="text" id="sample1" maxIntegers="12" maxDecimals="2">
        <label class="mdl-currency-usd__label" for="sample1">currency 12.2 Example...</label>
        <div class="mdl-currency-usd__symbol">$</div>
        <span class="mdl-currency-usd__error">#.##</span>
    </div>

Readme

Keywords

Package Sidebar

Install

npm i mdl-currency-usd

Repository

github.com/rathxxx/mdl-currency-usd

Homepage

github.com/rathxxx/mdl-currency-usd

Weekly Downloads

1

Version

1.0.6

License

MIT

Last publish

Collaborators

  • rathxxx
Try on RunKit
Report malware