原文地址:http://yuche.github.io/vue-strap/
Getting started
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-strap
var alert = require('vue-strap/src/alert');
// or
var alert = require('vue-strap').alert;
new Vue({
components: {
alert: alert
}
})
ES6
$ npm install vue-strap
import alert from 'vue-strap/src/alert'
// or
import { alert } from 'vue-strap'
new Vue({
components: {
alert
}``
})
AMD
$ bower install vue-strap
define(['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.
Accordion
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
Name | Type | Default | Description |
---|---|---|---|
type | String | null | Define the type of color for the tabs (global). |
one-at-time | Boolean | false | Control whether expanding an item will cause the other items to close. |
Panel Options
Name | Type | Default | Description |
---|---|---|---|
header | String | The clickable text on the group's header. You need one to be able to click on the header for toggling. | |
is-open | Boolean | false | Whether accordion group is open or closed. |
type | String | null | Define 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).
Affix
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
Name | Type | Default | Description |
---|---|---|---|
offset | Number | 0 | Pixels to offset from top of screen when calculating position of scroll. |
Alert
<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
Name | Type | Default | Description |
---|---|---|---|
show | Boolean | true | Whether show the component |
dismissable | Boolean | false | Whether show close button |
type | String , one of success info warning danger | success | Components styles |
duration | Number | 0 | Auto close duration. Set 0 or a negative number will NOT be auto-close. |
width | String | ||
placement | String . one of top , top-right | how to position the component. |
Aside
<aside :show.sync="showRight" placement="right" header="Title" width="350">
...
</aside>
<aside :show.sync="showLeft" placement="left" header="Title" width="350">
...
</aside>
Aside Options
Name | Type | Default | Description |
---|---|---|---|
show | Boolean | Whether show the component. | |
placement | String , one of left , right | right | how to position the component. |
header | String | Header text of the aside component. | |
width | Number |
Button Group
Checkbox
Checkbox value: []
Radio
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
Name | Type | Default | Description |
---|---|---|---|
value | Array or String | If defined, then the defined values will be checked otherwise the elements with a checked attribute will be checked. | |
buttons | Boolean | true | |
type | String , one of default primary danger info warning success | default |
Checkbox
Checkbox
Checkbox Button (Single button)
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
Name | Type | Default | Description |
---|---|---|---|
checked | Number or String | Handle the selected value. | |
value | Number or String | Value to return if the checkbox item is selected. | |
type | String , one of default primary danger info warning success | default | |
button | Boolean | false | Button style. |
See Button Group for more options.
Carousel
<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
Name | Type | Default | Description |
---|---|---|---|
indicators | Boolean | true | Whether to show the indicators. |
controls | Boolean | true | Whether to show the direction controls. |
interval | Number | 5000 | The amount of time to delay between automatically cycling an item. If set to 0 or a negative number, carousel will not automatically cycle. |
Datepicker
Selected date is: Wed Jun 10 2015 08:00:00 GMT+0800 (CST)
Disabled days of week
Format
Reset button
Placeholder
<datepicker :value.sync="value" :disabled-days-of-week="disabled" :format="format" :clear-button="clear" :placeholder="placeholder">
</datepicker>
Datepicker Options
Name | Type | Default | Description |
---|---|---|---|
value | String | Value of the input DOM | |
width | String | 200px | Width of the input DOM |
format | String | MMMM/dd/yyyy | The date format, combination of d, dd, M, MM, MMM, MMMM, yyyy. |
disabled-days-of-week | Array | Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated. | |
clear-button | Boolean | false | If true shows an × shaped button to clear the selected date. Usefull in forms where date entry is optional. |
placeholder | String | Placeholder to put on the input field when no date (null or empty) is set |
Dropdown
<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
Name | Type | Default | Description |
---|---|---|---|
show | Boolean | Whether show the component. | |
class | String | null | classes to change the style. |
disabled | Boolean | false | |
text | String | Dropdown button text. | |
type | String , one of default primary danger info warning success | default |
Usage
Just like the examples. Can use it as the original Bootstrap way.
Input
<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.
<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>
<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
Name | Type | Default | Description |
---|---|---|---|
value | String | '' | Input value. Use :value.sync="value" |
match | String | '' | Matching value. Both have to be the same value. |
disabled | Boolean | false | |
enterSubmit | Boolean | false | Submit when you press Enter . Not supported on type textarea . |
error | String | null | Error message. |
help | String | null | Help text behind the input |
hide-help | Boolean | true | Only work with help and error. Hide the help if have to show any error message. |
icon | Boolean | false | |
label | String | null | Enable input label (name). |
lang | String | Browser language | Language. Default en if the translation doesn't exist. |
mask | Function | null | Mask function that receive and edit the value. |
mask-delay | Number | 100 | Delay time before apply the mask. |
maxlength | Number | null | |
minlength | Number | 0 | |
name | String | null | |
pattern | String , RegExp or Function | null | Validation pattern. A full regular expression or a function that evaluate the content and return true or false . |
placeholder | String | null | |
required | Boolean | false | |
type | String | text | |
validation-delay | Number | 250 | Delay time before apply the validation. |
Supported Native Validator Options
Name | Description |
---|---|
type | Use native validation with url and email . |
min / max / step | That attributes handle the values supported. Work with the following input types: number , range , date , datetime-local , month , time and week . |
Modal
<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
Name | Type | Default | Description |
---|---|---|---|
title | String | Title of the modal component. | |
ok-text | String | Save changes | Text for OK button |
cancel-text | String | Close | Text for cancel button |
width | Number, String or null | null | Pass 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. |
callback | Function | A callback Function when you click the modal primary button. | |
large | Boolean | false | Creates a large modal ( see boostrap's documentation for .modal-lg ) |
small | Boolean | false | Creates a small modal ( see boostrap's documentation for .modal-sm ) |
backdrop | Boolean | true | Enables/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>
.
Popover
Title
Trigger
<popover effect="fade" placement="bottom" title="Title" content="content">
<button class="btn btn-default">Popover on bottom</button>
</popover>
Popover Options
Name | Type | Default | Description |
---|---|---|---|
trigger | String , one of click focus hover contextmenu | click | How the popover is triggered. |
effect | String , one of scale fade | fade | |
title | String | ||
content | String | ||
header | Boolean | true | Whether to show the header. |
placement | String , one of top left right bottom | How to position the popover. |
Progressbar
Static
Dynamic
Stacked
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
Name | Type | Default | Description |
---|---|---|---|
now | Number | The current value of progress completed. Required. | |
type | String | Style type. Possible values are 'success', 'warning' etc. | |
label | Boolean | false | Whether to show the label. |
striped | Boolean | false | Whether the progressbar has striped effect or not. |
Radio
Radio
Radio Button (Single buttons)
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
Name | Type | Default | Description |
---|---|---|---|
checked | Number or String | Handle the selected value. | |
value | Number or String | Value to return if the radio item is selected. | |
type | String , one of default primary danger info warning success | default | |
button | Boolean | false | Button style. |
See Button Group for more options.
Select
Based in a bootstrap-select implementation.
Normal select data:
Multiple select data : 0,4,5,6
Multiple:
<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
Name | Type | Default | Description |
---|---|---|---|
min-search | Number | 0 | If defined, the searchbox is disabled if are less than the minimum value you set. |
lang | String | Browser language | Language. Default en if the translation doesn't exist. |
options-label | String | label | Define the value in the data used as label. |
options-value | String | value | Define the value in the data used as value. |
placeholder | String | Nothing Selected | |
search-text | String |
Select Events
Name | Arguments | Description |
---|---|---|
change | (value ) | Return the selected value(s). |
selected | (labels:String ) | Return a string with the label(s) of the selected item(s). |
Tabs
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
Name | Type | Default | Description |
---|---|---|---|
active | Number | 0 | Active tab index (0 based) |
TabGroup (dropdown) Options
Name | Type | Default | Description |
---|---|---|---|
disabled | Boolean | false | Whether tabgroup is clickable. |
header | String | null | Group Title |
Tab (element) Options
Name | Type | Default | Description |
---|---|---|---|
header | String | Tab Title | |
disabled | Boolean | false | Whether tab is clickable and can be activated. |
Tooltip
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
Name | Type | Default | Description |
---|---|---|---|
trigger | String , one of click focus hover contextmenu | click | How the tooltip is triggered. |
effect | String , one of scale fadein | scale |
Typeahead
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
Name | Type | Default | Description |
---|---|---|---|
value | String | '' | |
data | Array | The local data source for suggestions. Expected to be a primitive array. | |
async | String | An HTTP URL for asynchronous suggestions. Expected to return a JSON object. | |
delay | Number | 200 | Delay before calling async data while typing. |
limit | Number | 8 | The max number of suggestions to be displayed. |
key | String | null | The remote JSON key you want to render. if null, render directly using the remote JSON(should be Array). |
match-case | Boolean | false | Case sensitive for suggestions. |
match-start | Boolean | false | Match only against start of suggestions. E.g. if true, "a" matches "ab" but not "ba". |
on-hit | Function | A callback function when you click or hit return on an item. | |
template | String | <span v-html="$value | highlight query"></span> | Used to render suggestion. |
Spinner
<spinner v-ref:spinner size="md" fixed text="I will close in 2 secs"></spinner>
// using ref
this.$refs.spinner.show()
this.$refs.spinner.hide()
// using broadcast
this.$broadcast('show::spinner')
this.$broadcast('hide::spinner')
Spinner Options
Name | Type | Default | Description |
---|---|---|---|
size | String , one of sm , md , lg , xl | md | The size of the spinner. |
fixed | Boolean | false | Set to true if you want the spinner to occupy the entire window space. |
Form Group
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
Name | Type | Default | Description |
---|---|---|---|
valid | Boolean | Return if all the internal form elements (select , input ) are valids. |