\n ...\n
\n offset
\nNumber
0
Pixels to offset from top of screen when calculating position of scroll.
\nThis alert needs your attention.
\nYou successfully read this important alert message.
\nvalue
\nBoolean
true
Whether show the component
\ndismissable
\nBoolean
false
Whether show close button
\ntype
\nString, one of\n success\n info\n warning\n danger
success
Components styles
\nduration
\nNumber
0
Auto close duration. Set 0 or a negative number will NOT be auto-close.
width
\nString
placement
\nString. one of top, top-right
how to position the component.
\nYou successfully read this important alert message.
\nThis alert needs your attention.
\nYou successfully read this important alert message.
\nThis alert needs your attention.
\n{{stringifyDayHeader(currDate)}}
\n{{stringifyYearHeader(currDate)}}
\n{{stringifyDecadeHeader(currDate)}}
\nThis is not a style component, is just a global validation manager.
\nIf you need to evaluate if a group of elements are all valids, you can handle easier with this component.
\nIn this example, the buttons and tabs are disabled while the inner elements are empty.
\nValid user data : {{valid.user}}\n Valid direction : {{valid.direction}}\n All valid : {{valid.all}}\n valid
\nBoolean
Return if all the internal form elements (select, input) are valids.
This is not a style component, but a global validation manager.
\nIf you need to evaluate if a group of components are valids, you can handle easier with this component.
\nActually only supported input & select components.
\nIn this example, the buttons and tabs are disabled while the inner elements are empty.
\nValid user data : {{valid.user}}\n Valid direction : {{valid.direction}}\n All valid : {{valid.all}}\n valid
\nBoolean
Return if all the internal form elements (select, input) are valids.
Modal Title\n Modal Title\n Based in a bootstrap-select implementation.
\nNormal select data: {{select.normal}}\n \n Multiple select data : {{select.multiple.join(',')}}\n \n \n Only for Multiple:\n
Selected data : {{single}}\n Depend on vue-resource. Disabled if not present.
\nThe second select has inheritance, is enabled when the first get some value and the ajax return values.
\nAjax response:
\n \nmin-search
\nNumber
0
If defined, the searchbox is disabled if are less than the minimum value you set.
\noptions-label
\nString
label
Define the value in the data used as label.
\noptions-value
\nString
value
Define the value in the data used as value.
\nplaceholder
\nString
Nothing Selected
\n \nsearch-text
\nString
change
\n(value)
Return the selected value(s).
\noptions
\n(options:Array)
Return the options array. Helpfull for dinamic/url options.
\nselected
\n(labels:String)
Return a string with the label(s) of the selected item(s).
\noffset
\r\nNumber
0
Pixels to offset from top of screen when calculating position of scroll.
\r\nThis alert needs your attention.
\r\nYou successfully read this important alert message.
\r\nvalue
\r\nBoolean
true
Whether show the component
\r\ndismissable
\r\nBoolean
false
Whether show close button
\r\ntype
\r\nString, one of\r\n success\r\n info\r\n warning\r\n danger
success
Components styles
\r\nduration
\r\nNumber
0
Auto close duration. Set 0 or a negative number will NOT be auto-close.
width
\r\nString
placement
\r\nString. one of top, top-right
how to position the component.
\r\nYou successfully read this important alert message.
\\nThis alert needs your attention.
\\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\n tempor incididunt ut labore et dolore magna aliqua.
\r\nUt enim ad minim veniam,\r\n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\r\n consequat.
\r\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\n tempor incididunt ut labore et dolore magna aliqua.
\r\nUt enim ad minim veniam,\r\n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\r\n consequat.
\r\nvalue
\r\nBoolean
Whether show the component.
\r\nplacement
\r\nString, one of left, right
right
how to position the component.
\r\nheader
\r\nString
Header text of the aside component.
\r\nwidth
\r\nNumber
\r\n
Checkbox value: {{ checkboxValue }}\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n
Radio value: {{ radioValue }}\r\n \r\n value
\r\nArray or String
If defined, then the defined values will be checked otherwise the elements with a checked attribute\r\n will be checked.
\r\nbuttons
\r\nBoolean
true
\r\n
Can enable/disable button style.
\r\nGroup normal checks if you want to set the same type color for all.
\r\n \r\ndisabled
\r\nBoolean
false
\r\n
Can enable/disable group values.
\r\nDisable it if you need independent values but want to group color and/or style.
\r\n \r\ntype
\r\nString, one of default\r\n primary\r\n danger\r\n info\r\n warning\r\n success
default
sunt in culpa qui officia deserunt mollit a.
\r\nsunt in culpa qui officia deserunt mollit a.
\r\nsunt in culpa qui officia deserunt mollit a.
\r\nindicators
\r\nBoolean
true
Whether to show the indicators.
\r\ncontrols
\r\nBoolean
true
Whether to show the direction controls.
\r\ninterval
\r\nNumber
5000
The amount of time to delay between automatically cycling an item. If set to 0 or a negative number,\r\n carousel will not automatically cycle.\r\n
\r\n\r\n
Checkbox values: {{ checkboxValue }}\r\n \r\n value
\r\nMixed
Handle the selected value.
\r\ntrue-value
\r\nMixed
true
Value when is checked.
\r\nfalse-value
\r\nMixed
false
Value when is not checked.
\r\ntype
\r\nString, one of default\r\n primary\r\n danger\r\n info\r\n warning\r\n success
default
button
\r\nBoolean
false
\r\nButton style.
\r\nSee Button Group for more options.
\r\n\r\n
Selected date is: {{dateString}}\r\n \r\n clear-button
\r\nBoolean
false
\r\nIf true shows an × shaped button to clear the selected date.\r\n Usefull in forms where date entry is optional.
\r\ndisabled-days-of-week
\r\nArray
Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday).\r\n Multiple values should be comma-separated.
\r\nformat
\r\nString
MMMM/dd/yyyy
The date format, combination of d, dd, M, MM, MMM, MMMM, yyyy.
\r\nplaceholder
\r\nString
Placeholder to put on the input field when no date (null or empty) is set
\r\nvalue
\r\nString
Value of the input DOM
\r\nwidth
\r\nString
Width of the input DOM
\r\nicons-font
\r\nString
glyphicon
The icon font used for arrows. Can be 'glyphicon' or 'fa' (Font Awesome)
\r\ninput
\r\n(value:string)
Return the selected value.
\r\n{{stringifyDayHeader(currDate)}}
\r\n{{stringifyYearHeader(currDate)}}
\r\n{{stringifyDecadeHeader(currDate)}}
\r\nvalue (v-model)
\r\nBoolean
false
\r\nWhether show the component.
\r\ndisabled
\r\nBoolean
false
text
\r\nString
Dropdown button text.
\r\ntype
\r\n\r\n String, one of\r\n default\r\n primary\r\n danger\r\n info\r\n warning\r\n success\r\n
default
input
\r\n(show:boolean)
Return if the dropdown is shown.
\r\nJust like the examples. With slots you can use it as the original Bootstrap way.
\r\nThis is not a style component, is just a global validation manager.
\r\nIf you need to evaluate if a group of elements are all valids, you can handle easier with this component.
\r\nIn this example, the buttons and tabs are disabled while the inner elements are empty.
\r\nValid user data : {{valid.user}}\r\n Valid direction : {{valid.direction}}\r\n All valid : {{valid.all}}\r\n valid
\r\nBoolean
Return if all the internal form elements (select, input) are valids.
This is not a style component, but a global validation manager.
\r\nIf you need to evaluate if a group of components are valids, you can handle easier with this component.
\r\nActually only supported input & select components.
\r\nIn this example, the buttons and tabs are disabled while the inner elements are empty.
\r\nValid user data : {{valid.user}}\r\n Valid direction : {{valid.direction}}\r\n All valid : {{valid.all}}\r\n valid
\r\nBoolean
Return if all the internal form elements (select, input) are valids.
\r\n This repository contains a set of native Vue.js components based on Bootstrap's markup and CSS.\r\n As a result no dependency on jQuery or Bootstrap's JavaScript is required.\r\n The only required dependencies are:\r\n
\r\n\r\n The dist folder contains vue-strap.js and vue-strap.min.js with\r\n all components exported in the window.VueStrap object. These bundles are also available on both the\r\n Bower and NPM packages.\r\n
If you want to enable language support, you have to add:
\r\nIf not included what you need, you can add your own, without editing the source code of vue-strap.
\r\nIf you need to enable/disable options if is a mobile device you can add:
\r\nThen in javascript you can check it just doing:
\r\nBased on Detect Mobile Browsers.
\r\nThe events return values as arguments, you have 2 ways to handle them:
\r\nThe number of arguments depend on the event.
\r\nAccording to the vue2 specifications, twoWay binding is not supported anymore, except for v-model.
The v-model directive in a component always link to value attribute.
Keep in mind that in vue2:
\r\nMore details in bootstrap input groups.
\r\nvalue
\r\nString
''
Input value. Use v-model=\"value\"
datalist
\r\nArray
null
\r\n A list of predefined values that you can select. Work closer to an autocomplete. The items must be String values.\r\n
disabled
\r\nBoolean
false
enterSubmit
\r\nBoolean
false
Submit when you press Enter. Not supported on type textarea.
error
\r\nString
null
Error message.
\r\nhelp
\r\nString
null
Help text behind the input
\r\nhide-help
\r\nBoolean
true
Only work with help and error.
Hide the help if have to show any error message.
icon
\r\nBoolean
false
label
\r\nString
null
Enable input label (name).
\r\nlang
\r\nString
Browser language
\r\nLanguage. Default en if the translation doesn't exist.
mask
\r\nFunction
null
Mask function that receive and edit the value.
\r\nmask-delay
\r\nNumber
100
Delay time before apply the mask.
\r\nmatch
\r\nString
''
Matching value. Both have to be the same value.
\r\nmaxlength
\r\nNumber
null
minlength
\r\nNumber
0
name
\r\nString
null
pattern
\r\nString, RegExp or Function
null
Validation pattern. A full regular expression or a function that evaluate the content and return true or false.
placeholder
\r\nString
null
required
\r\nBoolean
false
type
\r\nString
text
url
\r\nString
null
url for a datalist.
\r\nurl-map
\r\nFunction
null
A map function that handle the data receibed from the url.
\r\nvalidation-delay
\r\nNumber
250
Delay time before apply the validation.
\r\ntype
\r\nUse native validation with url and email.
min / max / step
\r\nThat attributes handle the values supported.\r\n Work with the following input types: number, range, date, datetime-local, month, time and week.
Modal TitleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\r\n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\r\n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\r\n cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\r\n proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\r\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\r\n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\r\n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\r\n cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\r\n proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\r\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\r\n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\r\n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\r\n cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\r\n proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\r\nbackdrop
\r\nBoolean
true
Enables/disables closing the modal by clicking on the backdrop.
\r\ncallback
\r\nFunction
A callback Function when you click the modal primary button.
\r\ncancel-text
\r\nString
Close
\r\nText for cancel button
\r\neffect
\r\nString
set the name of the effect to use on modal, like fade or zoom
\r\nlarge
\r\nBoolean
false
Large modal (see boostrap's documentation for .modal-lg)
\r\nok-text
\r\nString
Save changes
\r\nText for OK button
\r\nsmall
\r\nBoolean
false
Small modal (see boostrap's documentation for .modal-sm)
\r\ntitle
\r\nString
Title of the modal component.
\r\nvalue
\r\nBoolean
true if modal need to be shown, note the Modal has no intenal state
\r\nwidth
\r\nNumber, 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.
\r\ninput
\r\n(show:boolean)
Return if the modal is shown.
\r\nok
\r\n \r\nCalled if the modal was accepted.
\r\ncancel
\r\n \r\nCalled if the modal was canceled.
\r\nopened
\r\n \r\nCalled when the modal is opened.
\r\nclosed
\r\n \r\nCalled when the modal is closed.
\r\nNote: The default events are called if you use the default footer. Using a footer slot, you must implement your own events to the buttons.
\r\nModal Title\\n placement
\r\nString, one of top, bottom, static, or empty for normal.
''
type
\r\nString, one of inverse, default.
default
\r\n
trigger
\r\nString, one of click focus hover contextmenu
click
How the popover is triggered.
\r\neffect
\r\nString, one of scale fade
fade
title
\r\nString
content
\r\nString
header
\r\nBoolean
true
Whether to show the header.
\r\nplacement
\r\nString, one of top\r\n left\r\n right\r\n bottom
How to position the popover.
\r\nnow
\r\nNumber
The current value of progress completed. Required.
\r\ntype
\r\nString
Style type. Possible values are 'success', 'warning' etc.
\r\nlabel
\r\nBoolean
false
\r\nWhether to show the label.
\r\nstriped
\r\nBoolean
false
Whether the progressbar has striped effect or not.
\r\nRadio value: {{ radioValue }}\r\n button
\r\nBoolean
false
Enable/Disable button style.
\r\nselected-value
\r\nMixed
true
Value to return if the radio item is selected.
\r\ntype
\r\nString, one of default\r\n primary\r\n danger\r\n info\r\n warning\r\n success
default
value
\r\nMixed
Handle the selected value.
\r\nSee Button Group for more options.
\r\nBased in a bootstrap-select implementation.
\r\nNormal select data: {{select.normal}}\r\n \r\n Multiple select data : {{select.multiple.join(',')}}\r\n \r\n \r\n Only for Multiple:\r\n
Selected data : {{single}}\r\n Depend on vue-resource. Disabled if not present.
\r\nThe second select has inheritance, is enabled when the first get some value and the ajax return values.
\r\nAjax response:
\r\n \r\nmin-search
\r\nNumber
0
If defined, the searchbox is disabled if are less than the minimum value you set.
\r\nlang
\r\nString
Browser language
\r\nLanguage. Default en if the translation doesn't exist.
options-label
\r\nString
label
Define the value in the data used as label.
\r\noptions-value
\r\nString
value
Define the value in the data used as value.
\r\nplaceholder
\r\nString
Nothing Selected
\r\n \r\nsearch-text
\r\nString
change
\r\n(value)
Return the selected value(s).
\r\noptions
\r\n(options:Array)
Return the options array. Helpfull for dinamic/url options.
\r\nselected
\r\n(labels:String)
Return a string with the label(s) of the selected item(s).
\r\n\r\n \r\n \r\n \r\n
\r\nfixed
\r\nBoolean
false
Set to true if you want the spinner to occupy the entire window space.
\r\nglobal
\r\nBoolean
false
When is true, set global events for that spinner. Will be ignored if was set another global spinner.
\r\nsize
\r\nString, one of sm, md, lg, xl
md
The size of the spinner.
\r\ntext
\r\nString
''
The text to show under the spinner.
\r\nStyle:
Justified:
\r\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\r\n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\r\n consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse\r\n cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\r\n non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\r\n
\r\n\r\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\r\n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\r\n consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse\r\n cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\r\n non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\r\n
\r\n\r\n Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.\r\n
\r\nvalue (v-model)
\r\nNumber
0
Active tab index (0 based)
\r\njustified
\r\nBoolean
false
Justify (tabs and pills).
nav-style
\r\nString. One of tabs, pills, stacked.
'tabs'
Style for tabs
\r\nactive / input
\r\n(index:number)
Return the Active tab index (0 based).
\r\ndisabled
\r\nBoolean
false
Option can't be selected.
\r\nheader
\r\nString
null
Title
\r\nA 2 states button (single true/false) but with a better looking.
\r\n\r\n
Toggle values: {{ $data }}\r\n \r\n value
\r\nMixed
Handle the selected value.
\r\ntrue-type
\r\nString, one of default\r\n primary\r\n danger\r\n info\r\n warning\r\n success
primary
false-type
\r\nString, one of default\r\n primary\r\n danger\r\n info\r\n warning\r\n success
default
changed
\r\n(value:boolean)
If changed, return the actual state.
\r\ndisabled
\r\n \r\nCall this event if the button was disabled.
\r\nenabled
\r\n \r\nCall this event if the button was enabled.
\r\n\r\n
trigger
\r\nString, one of click focus hover contextmenu
click
How the tooltip is triggered.
\r\neffect
\r\nString, one of scale fadein
scale
content
\r\nString
placement
\r\nString, one of top\r\n left\r\n right\r\n bottom
How to position the tooltip.
\r\nvalue
\r\nString
''
data
\r\nArray
The local data source for suggestions. Expected to be a primitive array.
\r\nasync
\r\nString
An HTTP URL for asynchronous suggestions. Expected to return a JSON object.
\r\nasync-key
\r\nString
null
The remote JSON key you want to render. if null, render directly using the remote JSON(should be Array).
\r\nlimit
\r\nNumber
8
The max number of suggestions to be displayed.
\r\nmatch-case
\r\nBoolean
false
Case sensitive for suggestions.
\r\nmatch-start
\r\nBoolean
false
Match only against start of suggestions. E.g. if true, \"a\" matches \"ab\" but not \"ba\".
\r\non-hit
\r\nFunction
function(item){ return item }
A callback function when you hit on an item. Must return the value to asign to the input after selecting.
\r\ntype
\r\nString
text
Input type. Not dinamic (is set once, can't be changed later).
\r\ntemplate
\r\nString
<span v-html=\"item\"></span>
Used to render every suggestion. Handler:item. The item can be whatever (e.g. string/array/object)
offset
\nNumber
0
Pixels to offset from top of screen when calculating position of scroll.
\nThis alert needs your attention.
\nYou successfully read this important alert message.
\nvalue
\nBoolean
true
Whether show the component
\ndismissable
\nBoolean
false
Whether show close button
\ntype
\nString, one of\n success\n info\n warning\n danger
success
Components styles
\nduration
\nNumber
0
Auto close duration. Set 0 or a negative number will NOT be auto-close.
width
\nString
placement
\nString. one of top, top-right
how to position the component.
\nYou successfully read this important alert message.
\\nThis alert needs your attention.
\\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua.
\nUt enim ad minim veniam,\n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua.
\nUt enim ad minim veniam,\n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat.
\nvalue
\nBoolean
Whether show the component.
\nplacement
\nString, one of left, right
right
how to position the component.
\nheader
\nString
Header text of the aside component.
\nwidth
\nNumber
\n
Checkbox value: {{ checkboxValue }}\n \n \n
\n
\n \n
\n
Radio value: {{ radioValue }}\n \n value
\nArray or String
If defined, then the defined values will be checked otherwise the elements with a checked attribute\n will be checked.
\nbuttons
\nBoolean
true
\n
Can enable/disable button style.
\nGroup normal checks if you want to set the same type color for all.
\n \ndisabled
\nBoolean
false
\n
Can enable/disable group values.
\nDisable it if you need independent values but want to group color and/or style.
\n \ntype
\nString, one of default\n primary\n danger\n info\n warning\n success
default
sunt in culpa qui officia deserunt mollit a.
\nsunt in culpa qui officia deserunt mollit a.
\nsunt in culpa qui officia deserunt mollit a.
\nindicators
\nBoolean
true
Whether to show the indicators.
\ncontrols
\nBoolean
true
Whether to show the direction controls.
\ninterval
\nNumber
5000
The amount of time to delay between automatically cycling an item. If set to 0 or a negative number,\n carousel will not automatically cycle.\n
\n\n
Checkbox values: {{ checkboxValue }}\n \n value
\nMixed
Handle the selected value.
\ntrue-value
\nMixed
true
Value when is checked.
\nfalse-value
\nMixed
false
Value when is not checked.
\ntype
\nString, one of default\n primary\n danger\n info\n warning\n success
default
button
\nBoolean
false
\nButton style.
\nSee Button Group for more options.
\n\n
Selected date is: {{dateString}}\n \n clear-button
\nBoolean
false
\nIf true shows an × shaped button to clear the selected date.\n Usefull in forms where date entry is optional.
\ndisabled-days-of-week
\nArray
Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday).\n Multiple values should be comma-separated.
\nformat
\nString
MMMM/dd/yyyy
The date format, combination of d, dd, M, MM, MMM, MMMM, yyyy.
\nmin-date
\nString
Defines the minimum available date. E.g. \"2017-10-19\"
\nmax-date
\nString
Defines the maximum available date. E.g. \"2017-10-19\"
\nname
\nString
Name to put on the input field
\nplaceholder
\nString
Placeholder to put on the input field when no date (null or empty) is set
\nvalue
\nString
Value of the input DOM
\nwidth
\nString
Width of the input DOM
\nicons-font
\nString
glyphicon
The icon font used for arrows. Can be 'glyphicon' or 'fa' (Font Awesome)
\ninput
\n(value:string)
Return the selected value.
\n{{stringifyDayHeader(currDate)}}
\n{{stringifyYearHeader(currDate)}}
\n{{stringifyDecadeHeader(currDate)}}
\nvalue (v-model)
\nBoolean
false
\nWhether show the component.
\ndisabled
\nBoolean
false
text
\nString
Dropdown button text.
\ntype
\n\n String, one of\n default\n primary\n danger\n info\n warning\n success\n
default
input
\n(show:boolean)
Return if the dropdown is shown.
\nJust like the examples. With slots you can use it as the original Bootstrap way.
\nThis is not a style component, is just a global validation manager.
\nIf you need to evaluate if a group of elements are all valids, you can handle easier with this component.
\nIn this example, the buttons and tabs are disabled while the inner elements are empty.
\nValid user data : {{valid.user}}\n Valid direction : {{valid.direction}}\n All valid : {{valid.all}}\n valid
\nBoolean
Return if all the internal form elements (select, input) are valids.
This is not a style component, but a global validation manager.
\nIf you need to evaluate if a group of components are valids, you can handle easier with this component.
\nActually only supported input & select components.
\nIn this example, the buttons and tabs are disabled while the inner elements are empty.
\nValid user data : {{valid.user}}\n Valid direction : {{valid.direction}}\n All valid : {{valid.all}}\n valid
\nBoolean
Return if all the internal form elements (select, input) are valids.
\n This repository contains a set of native Vue.js components based on Bootstrap's markup and CSS.\n As a result no dependency on jQuery or Bootstrap's JavaScript is required.\n The only required dependencies are:\n
\n\n The dist folder contains vue-strap.js and vue-strap.min.js with\n all components exported in the window.VueStrap object. These bundles are also available on both the\n Bower and NPM packages.\n
If you want to enable language support, you have to add:
\nIf not included what you need, you can add your own, without editing the source code of vue-strap.
\nIf you need to enable/disable options if is a mobile device you can add:
\nThen in javascript you can check it just doing:
\nBased on Detect Mobile Browsers.
\nThe events return values as arguments, you have 2 ways to handle them:
\nThe number of arguments depend on the event.
\nAccording to the vue2 specifications, twoWay binding is not supported anymore, except for v-model.
The v-model directive in a component always link to value attribute.
Keep in mind that in vue2:
\nMore details in bootstrap input groups.
\nvalue
\nString
''
Input value. Use v-model=\"value\"
datalist
\nArray
null
\n A list of predefined values that you can select. Work closer to an autocomplete. The items must be String values.\n
disabled
\nBoolean
false
enterSubmit
\nBoolean
false
Submit when you press Enter. Not supported on type textarea.
error
\nString
null
Error message.
\nhelp
\nString
null
Help text behind the input
\nhide-help
\nBoolean
true
Only work with help and error.
Hide the help if have to show any error message.
icon
\nBoolean
false
label
\nString
null
Enable input label (name).
\nmask
\nFunction
null
Mask function that receive and edit the value.
\nmask-delay
\nNumber
100
Delay time before apply the mask.
\nmatch
\nString
''
Matching value. Both have to be the same value.
\nmaxlength
\nNumber
null
minlength
\nNumber
0
name
\nString
null
pattern
\nString, RegExp or Function
null
Validation pattern. A full regular expression or a function that evaluate the content and return true or false.
placeholder
\nString
null
required
\nBoolean
false
type
\nString
text
url
\nString
null
url for a datalist.
\nurl-map
\nFunction
null
A map function that handle the data receibed from the url.
\nvalidation-delay
\nNumber
250
Delay time before apply the validation.
\ntype
\nUse native validation with url and email.
min / max / step
\nThat attributes handle the values supported.\n Work with the following input types: number, range, date, datetime-local, month, time and week.
Modal TitleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nbackdrop
\nBoolean
true
Enables/disables closing the modal by clicking on the backdrop.
\ncallback
\nFunction
A callback Function when you click the modal primary button.
\ncancel-text
\nString
Close
\nText for cancel button
\neffect
\nString
set the name of the effect to use on modal, like fade or zoom
\nlarge
\nBoolean
false
Large modal (see boostrap's documentation for .modal-lg)
\nok-text
\nString
Save changes
\nText for OK button
\nsmall
\nBoolean
false
Small modal (see boostrap's documentation for .modal-sm)
\ntitle
\nString
Title of the modal component.
\nvalue
\nBoolean
true if modal need to be shown, note the Modal has no intenal state
\nwidth
\nNumber, 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.
\ninput
\n(show:boolean)
Return if the modal is shown.
\nok
\n \nCalled if the modal was accepted.
\ncancel
\n \nCalled if the modal was canceled.
\nopened
\n \nCalled when the modal is opened.
\nclosed
\n \nCalled when the modal is closed.
\nNote: The default events are called if you use the default footer. Using a footer slot, you must implement your own events to the buttons.
\nModal Title\\n placement
\nString, one of top, bottom, static, or empty for normal.
''
type
\nString, one of inverse, default.
default
\n
trigger
\nString, one of click focus hover contextmenu
click
How the popover is triggered.
\neffect
\nString, one of scale fade
fade
title
\nString
content
\nString
header
\nBoolean
true
Whether to show the header.
\nplacement
\nString, one of top\n left\n right\n bottom
How to position the popover.
\nnow
\nNumber
The current value of progress completed. Required.
\ntype
\nString
Style type. Possible values are 'success', 'warning' etc.
\nlabel
\nBoolean
false
\nWhether to show the label.
\nstriped
\nBoolean
false
Whether the progressbar has striped effect or not.
\nRadio value: {{ radioValue }}\n button
\nBoolean
false
Enable/Disable button style.
\nselected-value
\nMixed
true
Value to return if the radio item is selected.
\ntype
\nString, one of default\n primary\n danger\n info\n warning\n success
default
value
\nMixed
Handle the selected value.
\nSee Button Group for more options.
\nBased in a bootstrap-select implementation.
\nNormal select data: {{select.normal}}\n \n Multiple select data : {{select.multiple.join(',')}}\n \n \n Only for Multiple:\n
Selected data : {{single}}\n Depend on vue-resource. Disabled if not present.
\nThe second select has inheritance, is enabled when the first get some value and the ajax return values.
\nAjax response:
\n \nmin-search
\nNumber
0
If defined, the searchbox is disabled if are less than the minimum value you set.
\noptions-label
\nString
label
Define the value in the data used as label.
\noptions-value
\nString
value
Define the value in the data used as value.
\nplaceholder
\nString
Nothing Selected
\n \nsearch-text
\nString
change
\n(value)
Return the selected value(s).
\noptions
\n(options:Array)
Return the options array. Helpfull for dinamic/url options.
\nselected
\n(labels:String)
Return a string with the label(s) of the selected item(s).
\n\n \n \n \n
\nfixed
\nBoolean
false
Set to true if you want the spinner to occupy the entire window space.
\nglobal
\nBoolean
false
When is true, set global events for that spinner. Will be ignored if was set another global spinner.
\nsize
\nString, one of sm, md, lg, xl
md
The size of the spinner.
\ntext
\nString
''
The text to show under the spinner.
\nStyle:
Justified:
\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse\n cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\n non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n
\n\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse\n cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\n non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n
\n\n Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.\n
\nvalue (v-model)
\nNumber
0
Active tab index (0 based)
\njustified
\nBoolean
false
Justify (tabs and pills).
nav-style
\nString. One of tabs, pills, stacked.
'tabs'
Style for tabs
\nactive / input
\n(index:number)
Return the Active tab index (0 based).
\ndisabled
\nBoolean
false
Option can't be selected.
\nheader
\nString
null
Title
\nA 2 states button (single true/false) but with a better looking.
\n\n
Toggle values: {{ $data }}\n \n value
\nMixed
Handle the selected value.
\ntrue-type
\nString, one of default\n primary\n danger\n info\n warning\n success
primary
false-type
\nString, one of default\n primary\n danger\n info\n warning\n success
default
changed
\n(value:boolean)
If changed, return the actual state.
\ndisabled
\n \nCall this event if the button was disabled.
\nenabled
\n \nCall this event if the button was enabled.
\n\n
trigger
\nString, one of click focus hover contextmenu
click
How the tooltip is triggered.
\neffect
\nString, one of scale fadein
scale
content
\nString
placement
\nString, one of top\n left\n right\n bottom
How to position the tooltip.
\nvalue
\nString
''
data
\nArray
The local data source for suggestions. Expected to be a primitive array.
\nasync
\nString
An HTTP URL for asynchronous suggestions. Expected to return a JSON object.
\nasync-key
\nString
null
The remote JSON key you want to render. if null, render directly using the remote JSON(should be Array).
\nlimit
\nNumber
8
The max number of suggestions to be displayed.
\nmatch-case
\nBoolean
false
Case sensitive for suggestions.
\nmatch-start
\nBoolean
false
Match only against start of suggestions. E.g. if true, \"a\" matches \"ab\" but not \"ba\".
\non-hit
\nFunction
function(item){ return item }
A callback function when you hit on an item. Must return the value to asign to the input after selecting.
\ntype
\nString
text
Input type. Not dinamic (is set once, can't be changed later).
\ntemplate
\nString
<span v-html=\"item\"></span>
Used to render every suggestion. Handler:item. The item can be whatever (e.g. string/array/object)
{{stringifyDayHeader(currDate)}}
\n{{stringifyYearHeader(currDate)}}
\n{{stringifyDecadeHeader(currDate)}}
\n{{stringifyDayHeader(currDate)}}
\n{{stringifyYearHeader(currDate)}}
\n{{stringifyDecadeHeader(currDate)}}
\n{{stringifyDayHeader(currDate)}}
\n{{stringifyYearHeader(currDate)}}
\n{{stringifyDecadeHeader(currDate)}}
\n
Selected date is: {{dateString}}
- MMMM/dd/yyyy
The date format, combination of d, dd, M, MM, MMM, MMMM, yyyy.
min-date
+String
Defines the minimum available date. E.g. "2017-10-19"
+max-date
+String
Defines the maximum available date. E.g. "2017-10-19"
+name
String