mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-05-07 17:23:49 +03:00
more readme updates
This commit is contained in:
parent
21df89de84
commit
25373063fd
14
README.md
14
README.md
|
@ -41,10 +41,12 @@ Is often asked how to change the primary color of this theme without edit the bo
|
||||||
|
|
||||||
You can do it by creating a less file in your project:
|
You can do it by creating a less file in your project:
|
||||||
|
|
||||||
|
```css
|
||||||
@import "../bower_components/bootstrap-material-design/less/material.less";
|
@import "../bower_components/bootstrap-material-design/less/material.less";
|
||||||
|
|
||||||
// Override @primary color with one took from _colors.less
|
// Override @primary color with one took from _colors.less
|
||||||
@primary: @deep-purple;
|
@primary: @deep-purple;
|
||||||
|
```
|
||||||
|
|
||||||
Then, compiling this file, the entire theme will be compiled using the color chosen by you.
|
Then, compiling this file, the entire theme will be compiled using the color chosen by you.
|
||||||
|
|
||||||
|
@ -89,7 +91,9 @@ They can be used by adding the class suffix `-material-color` to the desired ele
|
||||||
|
|
||||||
Example:
|
Example:
|
||||||
|
|
||||||
|
```html
|
||||||
<button class="btn btn-material-deep-purple">Deep purple button</button>
|
<button class="btn btn-material-deep-purple">Deep purple button</button>
|
||||||
|
```
|
||||||
|
|
||||||
These colors are taken from the Material Design color palette and are reported below:
|
These colors are taken from the Material Design color palette and are reported below:
|
||||||
|
|
||||||
|
@ -156,6 +160,7 @@ Upon focus, a hint can be displayed. Use any `p | span` with `.help-block`.
|
||||||
Be sure to inspect the source of the demos to find proper markup examples. Remember to use the proper HTML markup.
|
Be sure to inspect the source of the demos to find proper markup examples. Remember to use the proper HTML markup.
|
||||||
|
|
||||||
Radio example:
|
Radio example:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="col-lg-2 control-label">Radios</label>
|
<label class="col-lg-2 control-label">Radios</label>
|
||||||
|
@ -189,7 +194,9 @@ Variations are available for every icon, including the original Bootstrap icons.
|
||||||
|
|
||||||
The syntax to add a Material icon is:
|
The syntax to add a Material icon is:
|
||||||
|
|
||||||
|
```html
|
||||||
<i class="icon icon-material-favorite"></i>
|
<i class="icon icon-material-favorite"></i>
|
||||||
|
```
|
||||||
|
|
||||||
### Cards
|
### Cards
|
||||||
|
|
||||||
|
@ -225,6 +232,7 @@ Here is an example on how to use it:
|
||||||
|
|
||||||
Cards will adapt to column's width. The card below will have width equal to col-lg-6:
|
Cards will adapt to column's width. The card below will have width equal to col-lg-6:
|
||||||
|
|
||||||
|
```html
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-3"></div>
|
<div class="col-lg-3"></div>
|
||||||
|
|
||||||
|
@ -236,7 +244,7 @@ Cards will adapt to column's width. The card below will have width equal to col-
|
||||||
|
|
||||||
<div class="col-lg-3"></div>
|
<div class="col-lg-3"></div>
|
||||||
</div>
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
## Material.js
|
## Material.js
|
||||||
|
|
||||||
|
@ -258,12 +266,14 @@ The functions that allows an optional selector are `$.material.ripples`, `$.mate
|
||||||
|
|
||||||
You can even override the default values using the `$.material.options` function. The default values are:
|
You can even override the default values using the `$.material.options` function. The default values are:
|
||||||
|
|
||||||
|
```javascript
|
||||||
$.material.options = {
|
$.material.options = {
|
||||||
"withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",
|
"withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",
|
||||||
"inputElements": "input.form-control, textarea.form-control, select.form-control",
|
"inputElements": "input.form-control, textarea.form-control, select.form-control",
|
||||||
"checkboxElements": ".checkbox > label > input[type=checkbox]",
|
"checkboxElements": ".checkbox > label > input[type=checkbox]",
|
||||||
"radioElements": ".radio > label > input[type=radio]"
|
"radioElements": ".radio > label > input[type=radio]"
|
||||||
}
|
}
|
||||||
|
```
|
||||||
|
|
||||||
### Arrive.js support
|
### Arrive.js support
|
||||||
|
|
||||||
|
@ -284,7 +294,9 @@ At the moment RipplesJS does not have its own repository but it will probably ha
|
||||||
|
|
||||||
You may want to set a custom color to the ripples of a specific element, to do so write:
|
You may want to set a custom color to the ripples of a specific element, to do so write:
|
||||||
|
|
||||||
|
```html
|
||||||
<button class="btn btn-default" data-ripple-color="#F0F0F0">Custom ripple</button>
|
<button class="btn btn-default" data-ripple-color="#F0F0F0">Custom ripple</button>
|
||||||
|
```
|
||||||
|
|
||||||
### noUiSlider
|
### noUiSlider
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user