mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-25 19:14:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

use divs instead of fieldsets for most

Browse Source
This commit is contained in:
Kevin Ross 2016-05-05 12:06:13 -05:00
parent 5ed687d543
commit 46aaa6d761
3 changed files with 33 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
docs/material-design/forms.md
View File

@ -14,16 +14,16 @@ Bootstrap provides several form control styles, layout options, and custom compo
Form controls flavored by Material Design for Bootstrap customizations such as `bmd-label-floating`. Form controls flavored by Material Design for Bootstrap customizations such as `bmd-label-floating`.
{% example html %} {% example html %}
<form> <form>
<fieldset class="form-group"> <div class="form-group">
<label for="exampleInputEmail1" class="bmd-label-floating">Email address</label> <label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1"> <input type="email" class="form-control" id="exampleInputEmail1">
<span class="bmd-help">We'll never share your email with anyone else.</span> <span class="bmd-help">We'll never share your email with anyone else.</span>
</fieldset> </div>
<fieldset class="form-group"> <div class="form-group">
<label for="exampleInputPassword1" class="bmd-label-floating">Password</label> <label for="exampleInputPassword1" class="bmd-label-floating">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1"> <input type="password" class="form-control" id="exampleInputPassword1">
</fieldset> </div>
<fieldset class="form-group"> <div class="form-group">
<label for="exampleSelect1" class="bmd-label-floating">Example select</label> <label for="exampleSelect1" class="bmd-label-floating">Example select</label>
<select class="form-control" id="exampleSelect1"> <select class="form-control" id="exampleSelect1">
<option>1</option> <option>1</option>
@ -32,8 +32,8 @@ Form controls flavored by Material Design for Bootstrap customizations such as `
<option>4</option> <option>4</option>
<option>5</option> <option>5</option>
</select> </select>
</fieldset> </div>
<fieldset class="form-group"> <div class="form-group">
<label for="exampleSelect2" class="bmd-label-floating">Example multiple select</label> <label for="exampleSelect2" class="bmd-label-floating">Example multiple select</label>
<select multiple class="form-control" id="exampleSelect2"> <select multiple class="form-control" id="exampleSelect2">
<option>1</option> <option>1</option>
@ -42,16 +42,16 @@ Form controls flavored by Material Design for Bootstrap customizations such as `
<option>4</option> <option>4</option>
<option>5</option> <option>5</option>
</select> </select>
</fieldset> </div>
<fieldset class="form-group"> <div class="form-group">
<label for="exampleTextarea" class="bmd-label-floating">Example textarea</label> <label for="exampleTextarea" class="bmd-label-floating">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea> <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</fieldset> </div>
<fieldset class="form-group"> <div class="form-group">
<label for="exampleInputFile" class="bmd-label-floating">File input</label> <label for="exampleInputFile" class="bmd-label-floating">File input</label>
<input type="file" class="form-control-file" id="exampleInputFile"> <input type="file" class="form-control-file" id="exampleInputFile">
<small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small> <small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
</fieldset> </div>
<div class="radio"> <div class="radio">
<label> <label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
@ -156,14 +156,14 @@ you may need to wrap your markup in an `.bmd-form-group` to get appropriate focu
{% example html %} {% example html %}
<form> <form>
<fieldset class="form-group"> <!-- left unspecified, .bmd-form-group will be automatically added (inspect the code) --> <div class="form-group"> <!-- left unspecified, .bmd-form-group will be automatically added (inspect the code) -->
<label for="formGroupExampleInput" class="bmd-label-floating">Example label</label> <label for="formGroupExampleInput" class="bmd-label-floating">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput"> <input type="text" class="form-control" id="formGroupExampleInput">
</fieldset> </div>
<fieldset class="form-group bmd-form-group"> <!-- manually specified --> <div class="form-group bmd-form-group"> <!-- manually specified -->
<label for="formGroupExampleInput2" class="bmd-label-floating">Another label</label> <label for="formGroupExampleInput2" class="bmd-label-floating">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2"> <input type="text" class="form-control" id="formGroupExampleInput2">
</fieldset> </div>
</form> </form>
{% endexample %} {% endexample %}
@ -206,15 +206,15 @@ Multiple help blocks will cause the form to bounce because subsequent blocks are
{% example html %} {% example html %}
<form> <form>
<fieldset class="form-group"> <div class="form-group">
<label for="exampleInputEmail1" class="bmd-label-floating">Email address (two help blocks)</label> <label for="exampleInputEmail1" class="bmd-label-floating">Email address (two help blocks)</label>
<input type="email" class="form-control" id="exampleInputEmail1"> <input type="email" class="form-control" id="exampleInputEmail1">
<span class="bmd-help">We'll never share your email with anyone else.</span> <span class="bmd-help">We'll never share your email with anyone else.</span>
<span class="bmd-help">And this is probably from a second plugin showing in a non-optimal way</span> <span class="bmd-help">And this is probably from a second plugin showing in a non-optimal way</span>
</fieldset> </div>
<fieldset class="form-group"> <div class="form-group">
<label for="exampleInputPassword1" class="bmd-label-floating">Password</label> <label for="exampleInputPassword1" class="bmd-label-floating">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1"> <input type="password" class="form-control" id="exampleInputPassword1">
</fieldset> </div>
</form> </form>
{% endexample %} {% endexample %}

2
gulpfile.babel.js
View File

@ -45,7 +45,7 @@ const rollupConfig = {
}, },
banner: `/*! banner: `/*!
* ${pkg.name} v${pkg.version} (${pkg.homepage}) * ${pkg.name} v${pkg.version} (${pkg.homepage})
* Copyright ${moment().format("YYYY")} ${pkg.author} * Copyright ${moment().format("YYYY")} ${pkg.author} and contributors
* Licensed under ${pkg.license} * Licensed under ${pkg.license}
*/` */`
}, },

12
js/index-iife.js
View File

@ -2,4 +2,16 @@
* This is the iife compilation entry point - only used for the build. * This is the iife compilation entry point - only used for the build.
*/ */
import 'babel-polyfill/dist/polyfill' import 'babel-polyfill/dist/polyfill'
// if we wanted to import/export global $, we would do it like this:
// import $ from 'jquery'
// export {$}
import './index' import './index'
// if we used a page global `var onReady = []`, we could then in-page do onReady.push(function(){ /* my init fn */}) and exec them here
// $(() => {
// for (let fn of onReady) {
// fn()
// }
// })