mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-10-30 15:37:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

Added material design section to docs for specific addons

Browse Source
This commit is contained in:
Kevin Ross 2015-12-10 10:20:45 -06:00
parent 44eedd553e
commit 21cf07ae9b
5 changed files with 214 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CONTRIBUTING.md
View File

@ -221,8 +221,8 @@ Bootstrap checked out in parallel to this project, running three different termi
bundle install bundle install
npm install npm install
# this is all you need after initial setup # update docs and serve
jekyll serve grunt dist docs && jekyll serve
``` ```
1. Initial build and watch 1. Initial build and watch
@ -244,6 +244,7 @@ This performs an initial build and watches both the core and docs sources for ch
```bash ```bash
jekyll serve jekyll serve
```
## Releasing ## Releasing

4
docs/_data/nav.yml
View File

@ -23,6 +23,10 @@
- title: Tables - title: Tables
- title: Figures - title: Figures
- title: Material Design
pages:
- title: Forms
- title: Components - title: Components
pages: pages:
- title: Buttons - title: Buttons

5
docs/_includes/page-headers.html
View File

@ -13,6 +13,11 @@
<p class="lead"> <p class="lead">
Styles for displaying content with some of the most commonly used HTML elements, including typography, tables, and more. Styles for displaying content with some of the most commonly used HTML elements, including typography, tables, and more.
</p> </p>
{% elsif page.group == "material-design" %}
<h1>Material Design</h1>
<p class="lead">
A quick reference display for Material Design for Bootstrap components with additional options.
</p>
{% elsif page.group == "components" %} {% elsif page.group == "components" %}
<h1>Components</h1> <h1>Components</h1>
<p class="lead"> <p class="lead">

193
docs/material-design/forms.md Normal file
View File

@ -0,0 +1,193 @@
---
layout: docs
title: Forms
group: material-design
---
Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## Form controls
Form controls flavored by Material Design for Bootstrap customizations such as `label-floating`.
{% example html %}
<form>
<fieldset class="form-group label-floating">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
<small class="text-muted">We'll never share your email with anyone else.</small>
</fieldset>
<fieldset class="form-group label-floating">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</fieldset>
<fieldset class="form-group label-floating">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</fieldset>
<fieldset class="form-group label-floating">
<label for="exampleSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</fieldset>
<fieldset class="form-group label-floating">
<label for="exampleTextarea">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</fieldset>
<fieldset class="form-group label-floating">
<label for="exampleInputFile">File input</label>
<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>
</fieldset>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
{% endexample %}
Below is a complete list of options supported by Material Design for Bootstrap and the classes that customize them. Additional documentation is available for each group.
<table>
<thead>
<tr>
<th>Classes</th>
<th>Used for</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>
{% markdown %}`.mdb-form-group`{% endmarkdown %}
</td>
<td class="text-nowrap">
Any group of form controls
</td>
<td>
{% markdown %}This is automatically added by javascript, but if your code is templated, adding `.mdb-form-group`
to your form groups or otherwise your groups of controls can reduce rendering churn since the javascript will not
add the class after the initial page rendering.{% endmarkdown %}
</td>
</tr>
<tr>
<td>
{% markdown %}`.label-floating`{% endmarkdown %}
</td>
<td>
</td>
<td>
{% markdown %}TODO{% endmarkdown %}
</td>
</tr>
<tr>
<td>
{% markdown %}`.label-static`{% endmarkdown %}
</td>
<td>
</td>
<td>
{% markdown %}TODO{% endmarkdown %}
</td>
</tr>
<tr>
<td>
{% markdown %}`.label-placeholder`{% endmarkdown %}
</td>
<td>
</td>
<td>
{% markdown %}TODO{% endmarkdown %}
</td>
</tr>
</tbody>
</table>
### Form groups
The `.mdb-form-group` class is usually added to the `.form-group` element. Whereas the `.form-group` adds structure to forms by providing `margin-bottom` around a label and control pairing,
the only purpose of the `.mdb-form-group` is to demarcate Material Design behaviors. Decorations and size variations are intended to be specified on
this element e.g. `.label-floating`. Focus/hover styling for the label/input is determined based on the `.mdb-form-group`.
The `.mdb-form-group` is added automatically by javascript through basic discovery of the outer demarcation of the component defined by the Bootstrap standard
markup. If your code is templated, you may want to add `.mdb-form-group` to the markup directly to prevent any rendering churn from the javascript determining
and adding the class to the markup. In custom situations, the javascript may not be able to properly resolve the location for the `.mdb-form-group`, so in rare cases
you may need to wrap your markup in an `.mdb-form-group` to get appropriate focus/hover behavior.
{% example html %}
<form>
<fieldset class="form-group label-floating"> <!-- left unspecified, .mdb-form-group will be automatically added (inspect the code) -->
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</fieldset>
<fieldset class="form-group mdb-form-group label-floating"> <!-- manually specified -->
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</fieldset>
</form>
{% endexample %}
### Inline forms
Use the `.form-inline` class to to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms behave differently:
- Controls are `display: inline-block` to provide alignment control via `vertical-align` and `margin`.
- Controls receive `width: auto` to override the Bootstrap default `width: 100%`.
- Controls **only appear inline in viewports that are at least 768px wide** to account for narrow viewports on mobile devices.
Because of this, you may need to manually address the width and alignment of individual form controls. Lastly, as shown below, you should always include a `<label>` with each form control.
#### Visible labels
{% example html %}
<form class="form-inline">
<div class="form-group label-floating">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group label-floating">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-primary">Send invitation</button>
</form>
{% endexample %}

10
docs/search.json
View File

@ -3,11 +3,13 @@
--- ---
[ [
{% for page in site.pages %} {% assign sorted_pages = site.html_pages | sort: 'title' %}
{% for page in sorted_pages %}
{% if page.title %}
{ {
"title" : "{{ page.title | escape }}", "title" : {{ page.title | jsonify }},
"url" : "{{ site.baseurl }}{{ page.url }}", "url" : "{{ site.baseurl }}{{ page.url }}"
"date" : "{{ page.date }}"
} {% unless forloop.last %},{% endunless %} } {% unless forloop.last %},{% endunless %}
{% endif %}
{% endfor %} {% endfor %}
] ]