UMF Components
Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.
Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.
Turn tables into pure awesomeness.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird | |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird | |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird | |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird | |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird | |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird | |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Use the default option, or add multiple
to show multiple options at once.
Used to show information in a block such as a summary for a article. Can be used with or without an image.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Use this to show a list of information such as a feed from Facebook, Twitter, or a Blog.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Input masks can be used to force the user to enter data conform a specific format. Unlike validation, the user can't enter any other key than the ones specified by the mask.
Add data attributes to register an element with inputmask functionality as shown in the example above.
Call the input mask via javascript:
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
data-
, as in data-mask="999-99-999-9999-9"
.
Name | type | default | description |
---|---|---|---|
mask | string | '' | A string of formatting and literal characters, defining the input mask (see below). |
placeholder | string | '_' | The character that is displayed where something needs to be typed. |
Each typed character needs to match exactly one character in the mask
option.
Character | Description |
---|---|
9 | Number |
a | Letter |
? | Alphanumeric |
* | Any character |
Initializes an input element with an input mask.
The file input plugin allows you to create a visually appealing file or image input widgets.
When uploading an image, it's possible to show a thumbnail instead of the filename.
Image preview only works in IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+. In older browsers the filename is shown instead.
Add .fileinput
to the container. Elements inside the container with .fileinput-new
and
.fileinput-exists
are shown or hidden based on the current state. A preview of the selected file is placed in
.fileinput-preview
. The text of
.fileinput-filename
gets set to the name of the selected file.
The file input widget should be placed in a regular <form>
replacing a standard
<input type="file">
. The server side code should handle the file upload as normal.
Add data-provides="fileinput"
to the
.fileinput
element. Implement a button to clear the file with
data-dismiss="fileinput"
. Add data-trigger="fileinput"
to any element within the
.fileinput
widget to trigger the file dialog.
$('.fileinput').fileinput()
Using the given elements, you can layout the upload widget the way you want, either with a fixed
width
and height
or with max-width
and max-height
.
Name | type | description |
---|---|---|
name | string | Use this option instead of setting the name attribute on the
<input> element to prevent it from being part of the post data when not changed.
|
Initializes a file upload widget.
Clear the selected file.
Reset the form element to the original value.
Event Type | Description |
---|---|
change.bs.fileinput | This event is fired after a file is selected. |
clear.bs.fileinput | This event is fired when the file input is cleared. |
reset.bs.fileinput | This event is fired when the file input is reset. |
Includes: jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.datepicker.js
See jQuery UI's website for more information on the included modules.
Clean forms inside of a modal.
Name | type | default | description |
---|---|---|---|
title | string | 'Confirmation' | Title of the modal window. |
message | string|html | 'Are you sure?' | The message that will appear in the modal body. |
button.cancel | html|string | 'Cancel' | Text for the cancel button. |
selector | string | 'body' | The container to attach the modal window. |
tempate | string | '' | The HTML template used for the modal window. |