VueStrap介绍

来源：互联网发布：飞友网络待遇编辑：程序博客网时间：2024/05/16 12:08

原文地址：http://yuche.github.io/vue-strap/

About this project

This repository contains a set of native Vue.js components based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:

Vue.js (required ^1.0.8, test with 1.0.8).
Bootstrap CSS (required 3.x.x, test with 3.3.5). VueStrap doesn't depend on a very precise version of Bootstrap. Just pull the latest.

CommonJS

$ npm install vue-strapvar alert = require('vue-strap/src/alert');// orvar alert = require('vue-strap').alert;new Vue({  components: {    alert: alert  }})

ES6

$ npm install vue-strapimport alert from 'vue-strap/src/alert'// orimport { alert } from 'vue-strap'new Vue({  components: {    alert  }``})

AMD

$ bower install vue-strapdefine(['vue-strap'], function(VueStrap) { var alert = VueStrap.alert; ... });

Browser globals

The dist folder contains vue-strap.js and vue-strap.min.js with all components exported in the window.VueStrap object. These bundles are also available on both the Bower and NPM packages.

<v-select :options="options"></v-select><script src="path/to/vue.js"></script><script src="path/to/vue-strap.js"></script><script>  new Vue({    components: {      vSelect: VueStrap.select    },    data: {      options: []    }  })</script>

Translations (optional):

If you want to enable language support, you have to add:

<script src="path/to/vue-strap-lang.js"></script>

CommonJS

require('vue-strap/dist/vue-strap-lang.js')

If not included what you need, you can add your own, without editing the source code of vue-strap.

Mobile detection (optional):

If you need to enable/disable options if is a mobile device you can add:

<script src="path/to/isMobileBrowser.js"></script>

Then in javascript you can check it just doing:

if (navigator.isMobile) {  //do something if is mobile}if ('isMobile' in navigator) {  //do things only if the plugin was loaded  if (!navigator.isMobile) {    //do something if is not a mobile  }}

Based on Detect Mobile Browsers.

Open only one at a time.

Panel #1

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.

Panel #2

Panel #3

Panel #4

<accordion :one-at-atime="checked" type="info">  <panel is-open type="primary">    <strong slot="header"><u>Panel #1</u></strong>    ...  </panel>  <panel header="Panel #2">    ...  </panel>  <panel header="Panel #3">    ...  </panel>  <panel header="Panel #4">    ...  </panel></accordion>

Accordion Options

NameTypeDefaultDescriptiontypeStringnullDefine the type of color for the tabs (global).one-at-timeBooleanfalseControl whether expanding an item will cause the other items to close.

Panel Options

NameTypeDefaultDescriptionheaderString The clickable text on the group's header. You need one to be able to click on the header for toggling.is-openBooleanfalseWhether accordion group is open or closed.typeStringnullDefine the type of color for the tab (single).

If you want to personalice your header with some html you can use the slot instead of header attribute (panel #1 in the example).

The sub-navigation on the RIGHT is a live demo of the affix.

<affix offset="50">  <ul>    <li>...</li>    <li>...</li>    <li>...</li>  </ul>  <a href="#">...</a></affix>

Affix Options

NameTypeDefaultDescriptionoffsetNumber0Pixels to offset from top of screen when calculating position of scroll.

Well Done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Oh snap! Change a few things up and try submitting again.

Warning! Better check yourself, you're not looking too good.

<alert type="success/info/danger/warning">  ...</alert><alert :show.sync="showRight" placement="top-right" duration="3000" type="success" width="400px" dismissable>  <span class="icon-ok-circled alert-icon-float-left"></span>  <strong>Well Done!</strong>  <p>You successfully read this important alert message.</p></alert><alert :show.sync="showTop" placement="top" duration="3000" type="danger" width="400px" dismissable>  <span class="icon-info-circled alert-icon-float-left"></span>  <strong>Heads up!</strong>  <p>This alert needs your attention.</p></alert>

Alert Options

NameTypeDefaultDescriptionshowBooleantrueWhether show the componentdismissableBooleanfalseWhether show close buttontypeString, one of success infowarning dangersuccessComponents stylesdurationNumber0Auto close duration. Set 0 or a negative number will NOT be auto-close.widthString placementString. one of top, top-right how to position the component.

<aside :show.sync="showRight" placement="right" header="Title" width="350">  ...</aside><aside :show.sync="showLeft" placement="left" header="Title" width="350">  ...</aside>

Aside Options

NameTypeDefaultDescriptionshowBoolean Whether show the component.placementString, one of left, rightrighthow to position the component.headerString Header text of the aside component.widthNumber

Checkbox

LeftMiddleRight

Checkbox value: []

Radio

LeftMiddleRight

Not buttons:

Left

Middle

Right

Radio value: middle

<button-group :value.sync="checkboxValue">  <checkbox value="left">Left</checkbox>  <checkbox value="middle">Middle</checkbox>  <checkbox value="right">Right</checkbox></button-group><button-group :value.sync="radioValue" type="primary">  <radio value="left">Left</radio>  <radio value="middle">Middle</radio>  <radio value="right">Right</radio></button-group>Not Buttons:<button-group :value.sync="radioValue" type="info" buttons="false">  <radio value="left">Left</radio>  <radio value="middle">Middle</radio>  <radio value="right">Right</radio></button-group>

Button Group Options

NameTypeDefaultDescriptionvalueArray or String If defined, then the defined values will be checked otherwise the elements with a checked attribute will be checked.buttonsBooleantrue typeString, one of default primarydanger info warning successdefault

Checkbox

OneTwo (disabled)Two (readonly)Two

Checkbox Button (Single button)

Three Four (disabled) Four (readonly) Four

Checkbox values: {  "one": null,  "two": "two",  "three": null,  "four": null}

<checkbox :checked.sync="checkboxValue.one" value="one">One</checkbox><checkbox :checked.sync="checkboxValue.two" value="two" type="primary">Two</checkbox><checkbox :checked.sync="checkboxValue.three" value="three" type="info">Three</checkbox><checkbox button :checked.sync="checkboxValue.four" value="four" type="danger">Four</checkbox>

Checkbox Options

NameTypeDefaultDescriptioncheckedNumber or String Handle the selected value.valueNumber or String Value to return if the checkbox item is selected.typeString, one of default primary danger info warningsuccessdefault buttonBooleanfalseButton style.

See Button Group for more options.

Slide #2

sunt in culpa qui officia deserunt mollit a.

Slide #3

sunt in culpa qui officia deserunt mollit a.

<carousel>  <slider>    <img src="https://placehold.it/1200x400?text=one">    <div class="carousel-caption">      ...    </div>  </slider>  <slider>    <img src="https://placehold.it/1200x400?text=two">  </slider>  <slider>    <img src="https://placehold.it/1200x400?text=three">  </slider></carousel>

Carousel Options

NameTypeDefaultDescriptionindicatorsBooleantrueWhether to show the indicators.controlsBooleantrueWhether to show the direction controls.intervalNumber5000The amount of time to delay between automatically cycling an item. If set to 0 or a negative number, carousel will not automatically cycle.

Selected date is: Wed Jun 10 2015 08:00:00 GMT+0800 (CST)

Disabled days of week

Format

Reset button

toggle clear button

Placeholder

<datepicker :value.sync="value" :disabled-days-of-week="disabled" :format="format" :clear-button="clear" :placeholder="placeholder"></datepicker>

Datepicker Options

NameTypeDefaultDescriptionvalueString Value of the input DOMwidthString200pxWidth of the input DOMformatStringMMMM/dd/yyyyThe date format, combination of d, dd, M, MM, MMM, MMMM, yyyy.disabled-days-of-weekArray Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated.clear-buttonBooleanfalseIf true shows an × shaped button to clear the selected date. Usefull in forms where date entry is optional.placeholderString Placeholder to put on the input field when no date (null or empty) is set

Left

Dropdown

Right

<dropdown text="Action" type="primary">  <li><a href="#dropdown">Action</a></li>  <li role="separator" class="divider"></li>  <li><a href="#dropdown">Separated link</a></li></dropdown>// For segmented dropdown, ignore text and add a "before" slot<dropdown type="info">  <button slot="before" type="button" class="btn btn-info">Segmented</button>  <li><a href="#dropdown">...</a></li></dropdown>// In a button group<div class="btn-group btn-group-justified">  <a href="#dropdown" class="btn btn-default" role="button">Left</a>  <dropdown>...</dropdown>  <a href="#dropdown" class="btn btn-default" role="button">Right</a></div>// With slots you can handle some elements as native bootstrap<dropdown>  <button slot="button" type="button" class="btn btn-default dropdown-toggle">    Action    <span class="caret"></span>  </button>  <ul slot="dropdown-menu" class="dropdown-menu">    <li><a href="#dropdown">Action</a></li>    <li><a href="#dropdown">Another action</a></li>    <li><a href="#dropdown">Something else here</a></li>    <li role="separator" class="divider"></li>    <li><a href="#dropdown">Separated link</a></li>  </ul></dropdown>

Dropdown Options

NameTypeDefaultDescriptionshowBoolean Whether show the component.classStringnullclasses to change the style.disabledBooleanfalse textString Dropdown button text.typeString, one of default primary danger info warning successdefault

Usage

Just like the examples. Can use it as the original Bootstrap way.

User Name

Only allows lowercase letters and numbers.

Match value

Match the User Name

Input with slots

Textarea

 Test event on textarea:

<bs-input :value.sync="input" label="Username" help="Only allows lowercase letters and numbers." error="Insert username" placeholder="Username can't start with a number." pattern="^[a-z][a-z0-9]+$" :mask="mask" minlength="5" readonly required icon></bs-input><bs-input required label="Match value" type="password" :match="input"></bs-input><bs-input label="Textarea" type="textarea" @focus="event = 'focused'" @blur="event = 'blured'"></bs-input>

mask: function (value) {  // change to lowercase, remove up to the first letter, and then remove all other unsuported characters  return value.toLowerCase().replace(/^[^a-z]+/,'').replace(/[^a-z0-9]/g,'');}

Input groups:

More details in bootstrap input groups.

With dropdown and button

<bs-input label="With dropdown and button" type="text">  <dropdown slot="before" text="dropdown">    <li><a href="#">option</a></li>  </dropdown>  <span slot="after" class="input-group-btn">    <button type="button" class="btn btn-primary">Go!</button>  </span></bs-input>

With text and icon

<bs-input label="With text and icon" type="number" placeholder="Insert how much cost your house">  <span slot="before" class="input-group-addon"><span class="glyphicon glyphicon-home"></span></span>  <span slot="after" class="input-group-addon">$</span></bs-input>

Input Options

NameTypeDefaultDescriptionvalueString''Input value. Use :value.sync="value"matchString''Matching value. Both have to be the same value.disabledBooleanfalse enterSubmitBooleanfalseSubmit when you press Enter. Not supported on type textarea.errorStringnullError message.helpStringnullHelp text behind the inputhide-helpBooleantrueOnly work with help and error.
Hide the help if have to show any error message.iconBooleanfalse labelStringnullEnable input label (name).langStringBrowser languageLanguage. Default en if the translation doesn't exist.maskFunctionnullMask function that receive and edit the value.mask-delayNumber100Delay time before apply the mask.maxlengthNumbernull minlengthNumber0 nameStringnull patternString, RegExp or FunctionnullValidation pattern. A full regular expression or a function that evaluate the content and return true or false.placeholderStringnull requiredBooleanfalse typeStringtext validation-delayNumber250Delay time before apply the validation.

Supported Native Validator Options

NameDescriptiontypeUse native validation with url and email.min / max / stepThat attributes handle the values supported. Work with the following input types: number, range, date, datetime-local, month, time and week.

That validations only work in browsers that support HTML5 form validations (all modern browsers support it).

<modal :show.sync="...">  <div slot="modal-header" class="modal-header">    <h4 class="modal-title">Modal title</h4>  </div>  <div slot="modal-body" class="modal-body">...</div></modal><modal title="Fade Modal" :show.sync="..." effect="fade" width="800">  <div slot="modal-body" class="modal-body">...</div></modal><modal title="Zoom Modal" :show.sync="..." effect="zoom" width="400">  <div slot="modal-body" class="modal-body">...</div></modal><modal :show.sync="showCustomModal" effect="fade" width="400">  <div slot="modal-header" class="modal-header">    <h4 class="modal-title">      <i>Custom</i> <code>Modal</code> <b>Title</b>    </h4>  </div>  <div slot="modal-body" class="modal-body">...</div>  <div slot="modal-footer" class="modal-footer">    <button type="button" class="btn btn-default" @click="showCustomModal = false">Exit</button>    <button type="button" class="btn btn-success" @click="showCustomModal = false">Custom Save</button>  </div></modal><modal title="Large Modal" large :show.sync="...">  <div slot="modal-body" class="modal-body">...</div></modal><modal title="Small Modal" small :show.sync="...">  <div slot="modal-body" class="modal-body">...</div></modal>

Modal Options

NameTypeDefaultDescriptiontitleString Title of the modal component.ok-textStringSave changesText for OK buttoncancel-textStringCloseText for cancel buttonwidthNumber, String or nullnullPass a Number in pixels or a String with relational sizes ( e.g. '80%' or '5em' ). If null, the modal will be responsive per bootstrap's default.callbackFunction A callback Function when you click the modal primary button.largeBooleanfalseCreates a large modal ( see boostrap's documentation for .modal-lg )smallBooleanfalseCreates a small modal ( see boostrap's documentation for .modal-sm )backdropBooleantrueEnables/disables closing the modal by clicking on the backdrop.

Usage

If you just need a simple modal, you can use the title prop and the default footer. However, if you need to put custom HTML or a custom footer, you can override the header or footer block by using <div slot="modal-title" class="modal-title">...</div>and <div slot="modal-footer" class="modal-footer">...</div>.

Placement

Type

<navbar placement="top" type="default">  <!-- Brand as slot -->  <a slot="brand" href="/" title="Home" class="navbar-brand">VueStrap</a>  <!-- You can use dropdown component -->  <dropdown text="Dropdown">    <li><a href="link">Option</a></li>  </dropdown>  <!-- Or normal bootstrap style -->  <li class="dropdown">    <a href="#" class="dropdown-toggle">Dropdown</a>    <ul class="dropdown-menu">      <li><a href="link">Option</a></li>    </ul>  </li>  <!-- For right positioning use slot -->  <li slot="right">    <a href="https://github.com/yuche/vue-strap" target="_blank">Fork...</a>  </li></navbar>

Navbar Options

NameTypeDefaultDescriptionplacementString, one of top, bottom, static, or empty for normal.'' typeString, one of inverse, default.default

Title

Trigger

<popover effect="fade" placement="bottom" title="Title" content="content">  <button class="btn btn-default">Popover on bottom</button></popover>

Popover Options

NameTypeDefaultDescriptiontriggerString, one of click focus hover contextmenuclickHow the popover is triggered.effectString, one of scale fadefade titleString contentString headerBooleantrueWhether to show the header.placementString, one of top left right bottom How to position the popover.

Static

Dynamic

Stacked

10%

20%

30%

40%

Stacked:<div class="progress">  <progressbar now label type="warning" striped></progressbar>  <progressbar now label type="success"></progressbar>  <progressbar now label type="danger"></progressbar>  <progressbar now label type="primary" striped animated></progressbar></div>Single:<div class="progress">  <progressbar now label type="warning" striped></progressbar></div>

Progressbar Options

NameTypeDefaultDescriptionnowNumber The current value of progress completed. Required.typeString Style type. Possible values are 'success', 'warning' etc.labelBooleanfalseWhether to show the label.stripedBooleanfalseWhether the progressbar has striped effect or not.

Radio

One

Two (disabled)

Two (readonly)

Two

Radio Button (Single buttons)

Three Four (disabled) Four (readonly) Four

Radio value: null

<radio :checked.sync="radioValue" value="one">One</radio><radio :checked.sync="radioValue" value="two" type="primary">Two</radio><radio button :checked.sync="radioValue" value="three" type="danger">Three</radio><radio button :checked.sync="radioValue" value="four" type="info">Four</radio>

Radio Options

NameTypeDefaultDescriptioncheckedNumber or String Handle the selected value.valueNumber or String Value to return if the radio item is selected.typeString, one of default primary danger info warningsuccessdefault buttonBooleanfalseButton style.

See Button Group for more options.

Based in a bootstrap-select implementation.

Normal select data:

Multiple select data : 0,4,5,6

<form action="./#select" method="get">  <v-select :value.sync="select.value" :options="select.options" options-value="val" multiple name="animals[]" limit="3" search justified required disabled clear-button close-on-select></v-select>  <button type="submit" class="btn btn-default">Submit form</button></form>

options: [  {val: 0, label: 'Cat'},  {val: 1, label: 'Cow'},  {val: 2, label: 'Dog'},  {val: 3, label: 'Elephant'},  {val: 4, label: 'Fish'},  {val: 5, label: 'Lion'},  {val: 6, label: 'Tiger'},  {val: 7, label: 'Turtle'}]

Select with option component:

Selected data :

<v-select>  <v-option value="apple">Apple</v-option>  <v-option value="banana">Banana</v-option>  <v-option value="cherry">Cherry</v-option>  <v-option value="orange">Orange</v-option>  <v-option value="grape">Grape</v-option></v-select>

Use button-group (component or bootstrap element) if you want to justify.

<button-group justified><select>...</select></button-group>// or<div class="btn-group btn-group-justified"><select>...</select></div>

Ajax data and parent dependency:

The second element has inheritance. Enable when the first get some value and the ajax return values.

<v-select url="docs/data.json" options-label="text" :value.sync="ajax.value" clear-button></v-select><v-select url="docs/data.json" options-label="text" multiple :parent="ajax.value"></v-select>

Ajax response:

[  {    "value": "Apple",    "text": "Apple"  },  {    "value": "Banana",    "text": "Banana"  },  {    "value": "Cherry",    "text": "Cherry"  },  {    "value": "Orange",    "text": "Orange"  },  {    "value": "Grape",    "text": "Grape"  }]

Other Options

NameTypeDefaultDescriptionmin-searchNumber0If defined, the searchbox is disabled if are less than the minimum value you set.langStringBrowser languageLanguage. Default en if the translation doesn't exist.options-labelStringlabelDefine the value in the data used as label.options-valueStringvalueDefine the value in the data used as value.placeholderStringNothing Selected search-textString

Select Events

NameArgumentsDescriptionchange(value)Return the selected value(s).selected(labels:String)Return a string with the label(s) of the selected item(s).

one
two
group1
group2

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.

<tabs>  <tab header="one">    ...  </tab>  <tab header="two" disabled>    ...  </tab>  <tab-group header="group1">    <tab header="three">      ...    </tab>    <tab header="four" disabled>      ...    </tab>  </tab-group>  <tab-group header="group2">    <tab header="five">      ...    </tab>  </tab-group></tabs>

components: {  tabs: VueStrap.tabset,  tabGroup: VueStrap.tabGroup,  tab: VueStrap.tab}

Tabset (container) Options

NameTypeDefaultDescriptionactiveNumber0Active tab index (0 based)

TabGroup (dropdown) Options

NameTypeDefaultDescriptiondisabledBooleanfalseWhether tabgroup is clickable.headerStringnullGroup Title

Tab (element) Options

NameTypeDefaultDescriptionheaderString Tab TitledisabledBooleanfalseWhether tab is clickable and can be activated.

Trigger

<tooltip effect="scale" placement="bottom" content="Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod">  <button class="btn btn-default">tooltip on bottom</button></tooltip>

Tooltip Options

NameTypeDefaultDescriptiontriggerString, one of click focus hover contextmenuclickHow the tooltip is triggered.effectString, one of scale fadeinscale

Static arrays

Asynchronous results (not working?)

Custom templates for results

<h4>Static arrays</h4><typeahead :data="USstate" placeholder="USA states"></typeahead><h4>Asynchronous results</h4>  <typeahead placeholder="Address, async via maps.googleapis.com" key="results" src="https://maps.googleapis.com/maps/api/geocode/json?address=" template-name="async" :template="asyncTemplate" :on-hit="googleCallback"></typeahead><h4>Custom templates for results</h4>  <typeahead placeholder="Github users, async via api.github.com" key="items" src="https://api.github.com/search/users?q=" template-name="typeahead-github-template" :template="githubTemplate" :on-hit="githubCallback"></typeahead>

new Vue {  components: {    typeahead  },  data() {    return {      USstate: ['Alabama', 'Alaska', 'Arizona',...],      asyncTemplate: '{{ item.formatted_address }}',      githubTemplate: '<img width="18px" height="18px" :src="item.avatar_url"> <span>{{item.login}}</span>'    }  },  methods: {    googleCallback(items, targetVM) {      const that = targetVM;      that.reset()      that.value = items.formatted_address    },    githubCallback(items) {      window.open(items.html_url, '_blank')    }  }}

Typeahead Options

NameTypeDefaultDescriptionvalueString'' dataArray The local data source for suggestions. Expected to be a primitive array.asyncString An HTTP URL for asynchronous suggestions. Expected to return a JSON object.delayNumber200Delay before calling async data while typing.limitNumber8The max number of suggestions to be displayed.keyStringnullThe remote JSON key you want to render. if null, render directly using the remote JSON(should be Array).match-caseBooleanfalseCase sensitive for suggestions.match-startBooleanfalseMatch only against start of suggestions. E.g. if true, "a" matches "ab" but not "ba".on-hitFunction A callback function when you click or hit return on an item.templateString<span v-html="$value | highlight query"></span>Used to render suggestion.

fixed

<spinner v-ref:spinner size="md" fixed text="I will close in 2 secs"></spinner>

// using refthis.$refs.spinner.show()this.$refs.spinner.hide()// using broadcastthis.$broadcast('show::spinner')this.$broadcast('hide::spinner')

Spinner Options

NameTypeDefaultDescriptionsizeString, one of sm, md, lg, xlmdThe size of the spinner.fixedBooleanfalseSet to true if you want the spinner to occupy the entire window space.

This is not a style component, is just a global validation manager.

If you need to evaluate if a group of elements are all valids, you can handle easier with this component.

In this example, the buttons and tabs are disabled while the inner elements are empty.

<form-group :valid.sync="valid.all">  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">    <tabs :active.sync="active">      <tab header="User">        <form-group :valid.sync="valid.user">          <bs-input label="User Name" required></bs-input>          <bs-input label="Email" type="email" required></bs-input>        </form-group>        <button type="button" class="btn btn-primary" :disabled="!valid.user" @click="active = 1">Continue</button>      </tab>      <tab header="Direction" :disabled="!valid.user">        <form-group :valid.sync="valid.direction">          <div class="form-group">            <label class="control-label">Continent</label>            <v-select required justified :options="['America','Europe']" clear-button></v-select>          </div>          <bs-input label="City" type="text" required></bs-input>        </form-group>        <button type="button" class="btn btn-primary" :disabled="!valid.all">Done!!</button>      </tab>    </tabs>  </div></form-group>

Form Group Options

NameTypeDefaultDescriptionvalidBoolean Return if all the internal form elements (select, input) are valids.

阅读全文

1 1

VueStrap介绍

Getting started

About this project

CommonJS

ES6

AMD

Browser globals

Translations (optional):

CommonJS

Mobile detection (optional):

Accordion

Panel #2

Panel #3

Panel #4

Accordion Options

Panel Options

Affix

The sub-navigation on the RIGHT is a live demo of the affix.

Affix Options

Alert

Alert Options

Aside

Aside Options

Button Group

Checkbox

Radio

Button Group Options

Checkbox

Checkbox

Checkbox Button (Single button)

Checkbox Options

Carousel

Slide #2

Slide #3

Carousel Options

Datepicker

Disabled days of week

Format

Reset button

Placeholder

Datepicker Options

Dropdown

Dropdown Options

Usage

Input

Input groups:

Input Options

Supported Native Validator Options

Modal

Modal Options

Usage

Navbar

Navbar Options

Popover

Title

Trigger

Popover Options

Progressbar

Static

Dynamic Randomize

Stacked Randomize

Progressbar Options

Radio

Radio

Radio Button (Single buttons)

Radio Options

Select

Select with option component:

Use button-group (component or bootstrap element) if you want to justify.

Ajax data and parent dependency:

Other Options

Select Events

Tabs

Tabset (container) Options

TabGroup (dropdown) Options

Tab (element) Options

Tooltip

Trigger

Tooltip Options

Typeahead

Dynamic

Stacked