mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-09-21 03:19:09 +03:00
Allow floating labels to be used with input groups that have a left input. Update readme.
This commit is contained in:
Kevin Ross
parent
ac150abd0c
commit
abfb2f09b8
124
README.md
124
README.md
|
|
@ -1,3 +1,5 @@
|
|||
# bootstrap-material-design
|
||||
|
||||
[](https://travis-ci.org/FezVrasta/bootstrap-material-design)
|
||||
[](https://gratipay.com/FezVrasta)
|
||||
[](https://github.com/FezVrasta/bootstrap-material-design)
|
||||
|
|
@ -29,11 +31,11 @@ If you prefer, you can include this framework in your project using our official
|
|||
Navigate to the `dist/` folder in this repository, and you will see the `test.html` file, which has the CSS include statements, in the `head` section and the JS includes just before `body` section closes.
|
||||
You need to copy the `dist/` folder to the root of your project, ensuring that all the files in your project can access the files through the relative URL, supplied in the CSS and the JS includes.
|
||||
|
||||
#### material-fullpalette.css or material.css?
|
||||
### material-fullpalette.css or material.css?
|
||||
|
||||
The only difference is that `material-fullpalette.css` has the full colors palette available, the other one has just the primary colors.
|
||||
|
||||
#### Use custom color as primary
|
||||
### Use custom color as primary
|
||||
|
||||
Is often asked how to change the primary color of this theme without edit the bower package directly.
|
||||
|
||||
|
|
@ -57,10 +59,11 @@ Run the `grunt test` command for browser-based Jasmine unit tests.
|
|||
|
||||
Run the `grunt serve` command to build and fire up an http server with live-reload and a watch for development purposes.
|
||||
|
||||
### LESS & SASS
|
||||
## LESS & SASS
|
||||
|
||||
Currently only LESS is maintained. The SASS version no longer has a maintainer (#256).
|
||||
The SASS files are in the source just in case someone wants to update the source from SASS and use these files as a base.
|
||||
The bootstrap 3.x compatible version (master) is developed using LESS, with an automated conversion to SASS.
|
||||
|
||||
The upcoming 4.x version (no branch yet) will be developed using SASS.
|
||||
|
||||
## Support me
|
||||
|
||||
|
|
@ -74,11 +77,12 @@ If you like this project you may support me by donating something on Gittip, sta
|
|||
Please see the [CONTRIBUTING.md](CONTRIBUTING.md) file.
|
||||
|
||||
|
||||
# Documentation
|
||||
## Documentation
|
||||
|
||||
Material Design for Bootstrap provides some additional stuff to get the best from Material Design.
|
||||
Material Design ([spec](http://www.google.com/design/spec/material-design/introduction.html)) for Bootstrap provides
|
||||
styles for bootstrap based markup to comply with Material Design concepts.
|
||||
|
||||
### Variations
|
||||
### Color Variations
|
||||
|
||||
There are 17 additional color variations (in addition to the classic 4 variations) for buttons, inputs, checkboxes, radios, alerts, navbars, tabs, labels, paginations, progress bars and more.
|
||||
They can be used by adding the class suffix `-material-color` to the desired element and replacing `color` with the desired one.
|
||||
|
|
@ -91,7 +95,7 @@ These colors are taken from the Material Design color palette and are reported b
|
|||
|
||||
|
||||
|
||||
To take advantage of all the shades please use `material-fullpalette.css`, be aware of its huge size.
|
||||
To take advantage of all the shades please use `material-fullpalette.css`, but please be aware of its huge size.
|
||||
|
||||
### Buttons
|
||||
|
||||
|
|
@ -100,18 +104,71 @@ Add `.btn-raised` to a button to add a permanent shadow to it.
|
|||
|
||||
### Inputs
|
||||
|
||||
Add `.floating-label` to an input field with a `placeholder` to transform the placeholder in a floating label.
|
||||
All inputs should be surrounded by a standard `.form-group`, and as such `material.js` will enforce this. The `.form-group` is
|
||||
used to signal different input styles and variations.
|
||||
|
||||
Add `data-hint="some hint"` to show an hint under the input when the user focus it.
|
||||
Labels:
|
||||
|
||||
Remember to use the proper HTML markup to get radio and checkboxes styled correctly (choose between *radio* or *checkbox*):
|
||||
- `.label-floating` - renders label as a placeholder, that animates above the field upon focus
|
||||
- `.label-static` - renders label above the field. `input placeholder` attribute can also be used in conjunction
|
||||
- `.label-placeholder` - renders a label as a placeholder only
|
||||
- no label, but use of `input placeholder` attribute - same rendering as `.label-placeholder`
|
||||
|
||||
<div class="radio/checkbox radio-primary">
|
||||
Hints:
|
||||
|
||||
Upon focus, a hint can be displayed. Use any `p | span` with `.help-block`.
|
||||
|
||||
|
||||
Examples:
|
||||
|
||||
```html
|
||||
<div class="form-group label-static">
|
||||
<label for="i2" class="control-label">label-static</label>
|
||||
<input type="email" class="form-control" id="i2" placeholder="placeholder attribute">
|
||||
<p class="help-block">This is a hint as a <code>p.help-block.hint</code></p>
|
||||
</div>
|
||||
|
||||
<div class="form-group label-floating">
|
||||
<label for="i5" class="control-label">label-floating</label>
|
||||
<input type="email" class="form-control" id="i5">
|
||||
<span class="help-block">This is a hint as a <code>span.help-block.hint</code></span>
|
||||
</div>
|
||||
|
||||
<div class="form-group label-placeholder">
|
||||
<label for="i5p" class="control-label">label-placeholder</label>
|
||||
<input type="email" class="form-control" id="i5p">
|
||||
<span class="help-block">This is a hint as a <code>span.help-block.hint</code></span>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
### Radio, Checkbox, Toggle
|
||||
|
||||
Be sure to inspect the source of the demos to find proper markup examples. Remember to use the proper HTML markup.
|
||||
|
||||
Radio example:
|
||||
```html
|
||||
<div class="form-group">
|
||||
<label class="col-lg-2 control-label">Radios</label>
|
||||
|
||||
<div class="col-lg-10">
|
||||
<div class="radio radio-primary">
|
||||
<label>
|
||||
<input type="radio/checkbox" checked>
|
||||
Option one is this
|
||||
<input type="radio" name="optionsRadios" checked="">
|
||||
Option one
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio radio-primary">
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios">
|
||||
Option two
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Icons
|
||||
|
||||
|
|
@ -131,29 +188,32 @@ A card will expand to fill all of the available width (e.g. column's width). Car
|
|||
|
||||
Here is an example on how to use it:
|
||||
|
||||
<div class="card">
|
||||
```html
|
||||
<div class="card">
|
||||
|
||||
<div class="card-height-indicator"></div>
|
||||
<div class="card-height-indicator"></div>
|
||||
|
||||
<div class="card-content">
|
||||
|
||||
<div class="card-image">
|
||||
<img src="./image.jpg" alt="Loading image...">
|
||||
<h3 class="card-image-headline">Lorem Ipsum Dolor</h3>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
||||
</div>
|
||||
|
||||
<footer class="card-footer">
|
||||
<button class="btn btn-flat">Share</button>
|
||||
<button class="btn btn-flat btn-warning">Learn More</button>
|
||||
</footer>
|
||||
<div class="card-content">
|
||||
|
||||
<div class="card-image">
|
||||
<img src="./image.jpg" alt="Loading image...">
|
||||
<h3 class="card-image-headline">Lorem Ipsum Dolor</h3>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
||||
</div>
|
||||
|
||||
<footer class="card-footer">
|
||||
<button class="btn btn-flat">Share</button>
|
||||
<button class="btn btn-flat btn-warning">Learn More</button>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
Cards will adapt to column's width. The card below will have width equal to col-lg-6:
|
||||
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -2028,7 +2028,7 @@
|
|||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="addon1">Input addons</label>
|
||||
<label class="control-label" for="addon1">Default label w/input addons</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">$</span>
|
||||
<input type="text" id="addon1" class="form-control">
|
||||
|
|
@ -2039,14 +2039,45 @@
|
|||
</div>
|
||||
|
||||
<div class="form-group label-floating">
|
||||
<label class="control-label" for="addon2">Floating label addon <small>(right only)</small></label>
|
||||
<div class="input-group">
|
||||
<input type="text" id="addon2" class="form-control">
|
||||
<span class="input-group-addon">$</span>
|
||||
<label class="control-label" for="addon3a">Floating label w/2 addons</label>
|
||||
<input type="text" id="addon3a" class="form-control">
|
||||
<p class="help-block">The label is inside the <code>input-group</code> so that it is positioned properly as a placeholder.</p>
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
<button type="button" class="btn btn-fab btn-fab-mini">
|
||||
<i class="mdi-content-send"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group label-floating">
|
||||
|
||||
<label class="control-label" for="addon2">Floating label w/right addon</label>
|
||||
<div class="input-group">
|
||||
<input type="text" id="addon2" class="form-control">
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-fab btn-fab-mini">
|
||||
<i class="mdi-editor-functions"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<input type="file" id="inputFile4" multiple>
|
||||
<div class="input-group">
|
||||
<input type="text" readonly class="form-control" placeholder="Placeholder w/file chooser...">
|
||||
<span class="input-group-btn input-group-sm">
|
||||
<button type="button" class="btn btn-fab btn-fab-mini">
|
||||
<i class="mdi-editor-attach-file"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
4
dist/css/material-fullpalette.css
vendored
4
dist/css/material-fullpalette.css
vendored
|
|
@ -22599,7 +22599,6 @@ fieldset[disabled] .form-group .form-control {
|
|||
.form-group.label-placeholder label.control-label,
|
||||
.form-group.label-floating label.control-label {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
pointer-events: none;
|
||||
transition: 0.3s ease all;
|
||||
}
|
||||
|
|
@ -25290,6 +25289,7 @@ fieldset[disabled] .form-group .form-control {
|
|||
.form-group.label-floating.is-focused label.control-label,
|
||||
.form-group.label-floating:not(.is-empty) label.control-label {
|
||||
top: -30px;
|
||||
left: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.07142857;
|
||||
}
|
||||
|
|
@ -25327,6 +25327,7 @@ fieldset[disabled] .form-group .form-control {
|
|||
.form-group.form-group-sm.label-floating.is-focused label.control-label,
|
||||
.form-group.form-group-sm.label-floating:not(.is-empty) label.control-label {
|
||||
top: -25px;
|
||||
left: 0;
|
||||
font-size: 9px;
|
||||
line-height: 1.125;
|
||||
}
|
||||
|
|
@ -25364,6 +25365,7 @@ fieldset[disabled] .form-group .form-control {
|
|||
.form-group.form-group-lg.label-floating.is-focused label.control-label,
|
||||
.form-group.form-group-lg.label-floating:not(.is-empty) label.control-label {
|
||||
top: -32px;
|
||||
left: 0;
|
||||
font-size: 14px;
|
||||
line-height: 0.99999998;
|
||||
}
|
||||
|
|
|
|||
2
dist/css/material-fullpalette.css.map
vendored
2
dist/css/material-fullpalette.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material-fullpalette.min.css
vendored
2
dist/css/material-fullpalette.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material-fullpalette.min.css.map
vendored
2
dist/css/material-fullpalette.min.css.map
vendored
File diff suppressed because one or more lines are too long
4
dist/css/material.css
vendored
4
dist/css/material.css
vendored
|
|
@ -5309,7 +5309,6 @@ fieldset[disabled] .form-group .form-control {
|
|||
.form-group.label-placeholder label.control-label,
|
||||
.form-group.label-floating label.control-label {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
pointer-events: none;
|
||||
transition: 0.3s ease all;
|
||||
}
|
||||
|
|
@ -5606,6 +5605,7 @@ fieldset[disabled] .form-group .form-control {
|
|||
.form-group.label-floating.is-focused label.control-label,
|
||||
.form-group.label-floating:not(.is-empty) label.control-label {
|
||||
top: -30px;
|
||||
left: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.07142857;
|
||||
}
|
||||
|
|
@ -5643,6 +5643,7 @@ fieldset[disabled] .form-group .form-control {
|
|||
.form-group.form-group-sm.label-floating.is-focused label.control-label,
|
||||
.form-group.form-group-sm.label-floating:not(.is-empty) label.control-label {
|
||||
top: -25px;
|
||||
left: 0;
|
||||
font-size: 9px;
|
||||
line-height: 1.125;
|
||||
}
|
||||
|
|
@ -5680,6 +5681,7 @@ fieldset[disabled] .form-group .form-control {
|
|||
.form-group.form-group-lg.label-floating.is-focused label.control-label,
|
||||
.form-group.form-group-lg.label-floating:not(.is-empty) label.control-label {
|
||||
top: -32px;
|
||||
left: 0;
|
||||
font-size: 14px;
|
||||
line-height: 0.99999998;
|
||||
}
|
||||
|
|
|
|||
2
dist/css/material.css.map
vendored
2
dist/css/material.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material.min.css
vendored
2
dist/css/material.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material.min.css.map
vendored
2
dist/css/material.min.css.map
vendored
File diff suppressed because one or more lines are too long
|
|
@ -573,7 +573,7 @@
|
|||
<div class="input-group">
|
||||
<input type="text" readonly class="form-control" placeholder="Placeholder w/input-group...">
|
||||
<span class="input-group-btn input-group-sm">
|
||||
<button type="button" class="btn btn-fab btn-fab-mini btn-raised">
|
||||
<button type="button" class="btn btn-fab btn-fab-mini">
|
||||
<i class="mdi-editor-attach-file"></i>
|
||||
</button>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@
|
|||
&.label-floating:not(.is-empty) {
|
||||
label.control-label {
|
||||
top: @label-top;
|
||||
left: 0;
|
||||
// must repeat because the selector above is more specific than the general label sizing
|
||||
font-size: @static-font-size;
|
||||
line-height: @static-line-height;
|
||||
|
|
@ -143,7 +144,6 @@
|
|||
|
||||
label.control-label {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
pointer-events: none;
|
||||
transition: 0.3s ease all;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,6 +71,7 @@
|
|||
&.label-floating:not(.is-empty) {
|
||||
label.control-label {
|
||||
top: $label-top;
|
||||
left: 0;
|
||||
// must repeat because the selector above is more specific than the general label sizing
|
||||
font-size: $static-font-size;
|
||||
line-height: $static-line-height;
|
||||
|
|
@ -147,7 +148,6 @@
|
|||
|
||||
label.control-label {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
pointer-events: none;
|
||||
transition: 0.3s ease all;
|
||||
}
|
||||
|
|
|
|||
154
test.html
154
test.html
|
|
@ -1,154 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>TEST Material Design for Bootstrap</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
||||
<!-- Mobile support -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Twitter Bootstrap -->
|
||||
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Material Design for Bootstrap -->
|
||||
<link href="dist/css/roboto.css" rel="stylesheet">
|
||||
<link href="dist/css/material-fullpalette.css" rel="stylesheet">
|
||||
<link href="dist/css/ripples.css" rel="stylesheet">
|
||||
|
||||
<!-- Dropdown.js -->
|
||||
<link href="//cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.css" rel="stylesheet">
|
||||
|
||||
<!-- Page style -->
|
||||
<link href="index.css" rel="stylesheet">
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
|
||||
<!--<div class="form-group">-->
|
||||
<!--<label for="inputFile" class="col-lg-2 control-label">File</label>-->
|
||||
|
||||
<!--<div class="col-lg-10">-->
|
||||
<!--<input type="text" readonly class="form-control floating-label" placeholder="Browse...">-->
|
||||
<!--<input type="file" id="inputFile" multiple>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
|
||||
<!--
|
||||
<div class="fileinput input-group fileinput-new" data-provides="fileinput">
|
||||
<div class="form-control" data-trigger="fileinput">
|
||||
<i class="glyphicon glyphicon-file fileinput-exists"></i>
|
||||
<span class="fileinput-filename"></span>
|
||||
</div>
|
||||
<span class="input-group-addon btn btn-default btn-file">
|
||||
<span class="fileinput-new">Select file</span>
|
||||
<span class="fileinput-exists">Change</span>
|
||||
<input type="hidden" value="" name=""><input type="file" name="">
|
||||
</span>
|
||||
<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="row">
|
||||
<div class="form-group">
|
||||
<label for="inputFile" class="col-lg-2 control-label">Static Label</label>
|
||||
|
||||
<div class="col-lg-10">
|
||||
<input type="text" readonly class="form-control" placeholder="Browse...">
|
||||
<input type="file" id="inputFile" multiple>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- this works
|
||||
<div class="form-group">
|
||||
<input type="file" id="inputFile" multiple>
|
||||
<input type="text" readonly class="form-control" placeholder="Browse...">
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!--<h2>File inputs</h2>-->
|
||||
<!-- http://codepen.io/kybarg/pen/PqaOOg -->
|
||||
|
||||
<div class="form-group">
|
||||
<label class="control-label" for="inputFile2">Static label</label>
|
||||
<input type="file" id="inputFile2" multiple>
|
||||
<input type="text" readonly class="form-control" placeholder="Browse2...">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<!--<label class="control-label" for="inputFile3">File</label>-->
|
||||
<input type="file" id="inputFile3" multiple>
|
||||
<input type="text" readonly class="form-control" placeholder="Placeholder only...">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<input type="file" id="inputFile4" multiple>
|
||||
<div class="input-group">
|
||||
<input type="text" readonly class="form-control" placeholder="Placeholder w/input-group...">
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-fab btn-fab-mini btn-raised btn-sm">
|
||||
<i class="mdi-editor-attach-file"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Twitter Bootstrap -->
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
|
||||
|
||||
<!-- Material Design for Bootstrap -->
|
||||
<script src="dist/js/material.js"></script>
|
||||
<script src="dist/js/ripples.js"></script>
|
||||
<script>
|
||||
$.material.init();
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Sliders -->
|
||||
<!--
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
$.material.init();
|
||||
$(".shor").noUiSlider({
|
||||
start: 40,
|
||||
connect: "lower",
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
|
||||
$(".svert").noUiSlider({
|
||||
orientation: "vertical",
|
||||
start: 40,
|
||||
connect: "lower",
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
-->
|
||||
|
||||
<!-- Dropdown.js -->
|
||||
<!--
|
||||
<script src="https://cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.js"></script>
|
||||
<script>
|
||||
$("#dropdown-menu select").dropdown();
|
||||
</script>
|
||||
-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user