• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

mebibou/mdl-selectfield: Material Design Lite selectfield component (https://git ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

mebibou/mdl-selectfield

开源软件地址(OpenSource Url):

https://github.com/mebibou/mdl-selectfield

开源编程语言(OpenSource Language):

JavaScript 61.9%

开源软件介绍(OpenSource Introduction):

mdl-selectfield

Material Design Lite selectfield component (https://github.com/google/material-design-lite)

Bower Version NPM Version license

bitHound Overall Score bitHound Dependencies bitHound Dev Dependencies bitHound Code

A custom implementation of a selectfield component for Material Design Lite

Live Example

Check out the CodePen

Install

Via bower:

bower install mdl-selectfield

Or via npm:

npm install mdl-selectfield

Then include in your html:

<link rel="stylesheet" href="./bower_components/mdl-selectfield/dist/mdl-selectfield.min.css">
...
<script src="./bower_components/mdl-selectfield/dist/mdl-selectfield.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 select field component:

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

<div>
...
</div>

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

<div>
  <select id="gender">
    <option value=""></option>
    <option value="male">Male</option>
    <option value="female">Female</option>
  </select>
</div>

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

<div>
  <select id="gender">
    <option value=""></option>
    <option value="option1">option 1</option>
    <option value="option2">option 2</option>
  </select>
  <label for="gender">User gender</label>
</div>

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

<div class="mdl-selectfield mdl-js-selectfield">
  <select id="gender" class="mdl-selectfield__select">
    <option value=""></option>
    <option value="option1">option 1</option>
    <option value="option2">option 2</option>
  </select>
  <label class="mdl-selectfield__label" for="gender">User gender</label>
  <span class="mdl-selectfield__error">Select a value</span>
</div>

The select field component is ready for use.

Examples

Select field with a standard label.

<div class="mdl-selectfield mdl-js-selectfield">
  <select id="gender" class="mdl-selectfield__select">
    <option value=""></option>
    <option value="option1">option 1</option>
    <option value="option2">option 2</option>
  </select>
  <label class="mdl-selectfield__label" for="gender">User gender</label>
  <span class="mdl-selectfield__error">Select a value</span>
</div>

Select field with a floating label.

<div class="mdl-selectfield mdl-js-selectfield mdl-selectfield--floating-label">
  <select id="gender" class="mdl-selectfield__select">
    <option value=""></option>
    <option value="option1">option 1</option>
    <option value="option2">option 2</option>
  </select>
  <label class="mdl-selectfield__label" for="gender">User gender</label>
  <span class="mdl-selectfield__error">Select a value</span>
</div>

Select field with a standard label, and error message.

<div class="mdl-selectfield mdl-js-selectfield mdl-selectfield--floating-label">
  <select id="gender" class="mdl-selectfield__select">
    <option value=""></option>
    <option value="option1">option 1</option>
    <option value="option2">option 2</option>
  </select>
  <label class="mdl-selectfield__label" for="gender">User gender</label>
  <span class="mdl-textfield__error">Select a value</span>
</div>

Select field with a floating label and icon.

<div class="mdl-selectfield mdl-js-selectfield mdl-selectfield--floating-label">
  <select id="gender" class="mdl-selectfield__select">
    <option value=""></option>
    <option value="option1">option 1</option>
    <option value="option2">option 2</option>
  </select>
  <div class="mdl-selectfield__icon"><i class="material-icons">arrow_drop_down</i></div>
  <label class="mdl-selectfield__label" for="gender">User gender</label>
</div>



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap