@@ -14,14 +14,76 @@ Note that it is not possible to change the defaults when using BootstrapVue via
14 14 15 15
### Default configuration
16 16 17 -
Default breakpoint names are stored in the `breakpoints` property, default form control size is
18 -
stored under the `formControls` property, while component specific defaults are keyed by their
19 -
<samp>PascalCase</samp> name with the props as <samp>camelCase</samp> properties. Only properties
20 -
defined in the default configuration can be overridden. Attempting to set a config property that is
21 -
not defined in the default will generate a console warning.
17 +
Default breakpoint names are stored in the `breakpoints` property and all other shared component
18 +
configurations (like `formControls`) are listed below.
19 + 20 +
Component specific defaults are keyed by their `PascalCase` name with the props as `camelCase`
21 +
properties.
22 22 23 23
```json
24 -
{{ defaultConfig }}
24 +
{
25 +
// Breakpoint configuration
26 +
"breakpoints": ["xs", "sm", "md", "lg", "xl"],
27 + 28 +
// Shared component configuration
29 +
"formControls": {
30 +
"disabled": undefined,
31 +
"required": false,
32 +
"form": undefined,
33 +
"autofocus": false,
34 +
"plain": false,
35 +
"size": undefined
36 +
},
37 +
"formOptionControls": {
38 +
"options": [],
39 +
"valueField": "value",
40 +
"textField": "text",
41 +
"htmlField": "html",
42 +
"disabledField": "disabled"
43 +
},
44 +
"formRadioCheckGroups": {
45 +
"validated": false,
46 +
"ariaInvalid": false,
47 +
"stacked": false,
48 +
"buttons": false,
49 +
"buttonVariant": undefined,
50 +
"plain": false
51 +
},
52 +
"formRadioCheckControls": {
53 +
"value": undefined,
54 +
"checked": undefined,
55 +
"inline": false,
56 +
"button": false,
57 +
"buttonVariant": undefined,
58 +
"ariaLabel": undefined,
59 +
"ariaLabelledby": undefined,
60 +
"plain": false
61 +
},
62 +
"formState": {
63 +
"state": null
64 +
},
65 +
"formTextControls": {
66 +
"value": "",
67 +
"ariaInvalid": false,
68 +
"readonly": false,
69 +
"plaintext": false,
70 +
"autocomplete": undefined,
71 +
"placeholder": undefined,
72 +
"formatter": undefined,
73 +
"lazyFormatter": false,
74 +
"trim": false,
75 +
"number": false,
76 +
"lazy": false,
77 +
"debounce": 0
78 +
},
79 + 80 +
// Component configuration
81 +
"BAlert": {
82 +
"variant": "info"
83 +
// ...
84 +
}
85 +
// ...
86 +
}
25 87
```
26 88 27 89
### Setting new configuration values
@@ -30,11 +92,12 @@ When you `Vue.use(BootstrapVue)`, you can optionally pass a configuration object
30 92
values to replace the default values. For example if you wish to define new breakpoint names (which
31 93
will generate appropriate properties on components such as `<b-col>` and `<b-form-group>`), so that
32 94
the new breakpoints are `['aa', 'bb', 'cc', 'dd']` then `<b-col>` will now have `bb`, `cc`, and `dd`
33 -
props instead of `sm`, `md`, `lg` and `xl` props (Similar for the `label-cols-{breakpoint}` and
34 -
`label-align-{breakpoint}`props on `<b-form-group>`):
95 +
props instead of `sm`, `md`, `lg` and `xl` props (similar for the `label-cols-{breakpoint}` and
96 +
`label-align-{breakpoint}` props on `<b-form-group>`):
35 97 36 98
```js
37 99
import BootstrapVue from 'bootstrap-vue'
100 + 38 101
Vue.use(BootstrapVue, {
39 102
breakpoints: [`xs`, 'sm', 'md', 'lg', 'xl', 'xxl']
40 103
})
@@ -44,6 +107,7 @@ Or if changing the default variants for `<b-button>` and `<b-alert>`:
44 107 45 108
```js
46 109
import BootstrapVue from 'bootstrap-vue'
110 + 47 111
Vue.use(BootstrapVue, {
48 112
BAlert: { variant: 'danger' },
49 113
BButton: { variant: 'primary' }
@@ -72,7 +136,6 @@ and subsequent changes to the breakpoints will **not** be reflected.
72 136
<!-- eslint-disable import/first, import/no-duplicates -->
73 137 74 138
```js
75 -
// Component group plugins
76 139
import { LayoutPlugin, AlertPlugin, ButtonPlugin } from 'bootstrap-vue'
77 140 78 141
// Supply configs via each plugin as it is `Vue.use()`'d
@@ -86,7 +149,6 @@ Vue.use(ButtonPlugin, { BButton: { variant: 'primary' } })
86 149
<!-- eslint-disable import/first, import/no-duplicates -->
87 150 88 151
```js
89 -
// Component group plugins
90 152
import { LayoutPlugin, AlertPlugin, ButtonPlugin } from 'bootstrap-vue'
91 153 92 154
// Supply complete config to first `Vue.use()`'d plugin
@@ -104,7 +166,6 @@ Vue.use(ButtonPlugin)
104 166
<!-- eslint-disable import/first, import/no-duplicates -->
105 167 106 168
```js
107 -
// BootstrapVue configuration helper plugin and Component group plugins
108 169
import { BVConfigPlugin, LayoutPlugin, AlertPlugin, ButtonPlugin } from 'bootstrap-vue'
109 170 110 171
// Supply complete config to the BVConfigPlugin helper plugin
@@ -125,7 +186,6 @@ Vue.use(ButtonPlugin)
125 186
<!-- eslint-disable import/first, import/no-duplicates -->
126 187 127 188
```js
128 -
// Import BootstrapVue configuration helper plugin and Individual components
129 189
import { BVConfigPlugin, BAlert, BButton, BRow, BCol } from 'bootstrap-vue'
130 190 131 191
// Supply complete config to the BVConfig helper plugin
@@ -161,12 +221,12 @@ in **Example 3** and **Example 4** above. The `BVConfigPlugin` plugin should be
161 221
entry point of your app, and **before** any `Vue.use()` of component plugins or `Vue.component()` or
162 222
individual components.
163 223 164 -
### Setting the config via Nuxt.js BootstrapVue plugin
224 +
### Setting the config via Nuxt.js module
165 225 166 -
Refer to the [Getting Started](/docs/#nuxtjs-plugin-module) documentation for information on passing
167 -
the config object to the Nuxt.js plugin module.
226 +
Refer to the [Getting Started](/docs/#nuxtjs-module) documentation for information on passing the
227 +
config object to the BootstrapVue Nuxt.js module.
168 228 169 -
## Disabling BootstrapVue console warnings
229 +
## Disabling console warnings
170 230 171 231
BootstrapVue will warn (via `console.warn()`) when you try and use a deprecated prop, or pass an
172 232
invalid value to certain props. These warnings are provided to help you ensure that your application
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4