@@ -14,14 +14,76 @@ Note that it is not possible to change the defaults when using BootstrapVue via
1414
1515### Default configuration
1616
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 .
2222
2323``` 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+ }
2587```
2688
2789### Setting new configuration values
@@ -30,11 +92,12 @@ When you `Vue.use(BootstrapVue)`, you can optionally pass a configuration object
3092values to replace the default values. For example if you wish to define new breakpoint names (which
3193will generate appropriate properties on components such as ` <b-col> ` and ` <b-form-group> ` ), so that
3294the 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> ` ):
3597
3698``` js
3799import BootstrapVue from ' bootstrap-vue'
100+
38101Vue .use (BootstrapVue, {
39102 breakpoints: [` xs` , ' sm' , ' md' , ' lg' , ' xl' , ' xxl' ]
40103})
@@ -44,6 +107,7 @@ Or if changing the default variants for `<b-button>` and `<b-alert>`:
44107
45108``` js
46109import BootstrapVue from ' bootstrap-vue'
110+
47111Vue .use (BootstrapVue, {
48112 BAlert: { variant: ' danger' },
49113 BButton: { variant: ' primary' }
@@ -72,7 +136,6 @@ and subsequent changes to the breakpoints will **not** be reflected.
72136<!-- eslint-disable import/first, import/no-duplicates -->
73137
74138``` js
75- // Component group plugins
76139import { LayoutPlugin , AlertPlugin , ButtonPlugin } from ' bootstrap-vue'
77140
78141// Supply configs via each plugin as it is `Vue.use()`'d
@@ -86,7 +149,6 @@ Vue.use(ButtonPlugin, { BButton: { variant: 'primary' } })
86149<!-- eslint-disable import/first, import/no-duplicates -->
87150
88151``` js
89- // Component group plugins
90152import { LayoutPlugin , AlertPlugin , ButtonPlugin } from ' bootstrap-vue'
91153
92154// Supply complete config to first `Vue.use()`'d plugin
@@ -104,7 +166,6 @@ Vue.use(ButtonPlugin)
104166<!-- eslint-disable import/first, import/no-duplicates -->
105167
106168``` js
107- // BootstrapVue configuration helper plugin and Component group plugins
108169import { BVConfigPlugin , LayoutPlugin , AlertPlugin , ButtonPlugin } from ' bootstrap-vue'
109170
110171// Supply complete config to the BVConfigPlugin helper plugin
@@ -125,7 +186,6 @@ Vue.use(ButtonPlugin)
125186<!-- eslint-disable import/first, import/no-duplicates -->
126187
127188``` js
128- // Import BootstrapVue configuration helper plugin and Individual components
129189import { BVConfigPlugin , BAlert , BButton , BRow , BCol } from ' bootstrap-vue'
130190
131191// Supply complete config to the BVConfig helper plugin
@@ -161,12 +221,12 @@ in **Example 3** and **Example 4** above. The `BVConfigPlugin` plugin should be
161221entry point of your app, and ** before** any ` Vue.use() ` of component plugins or ` Vue.component() ` or
162222individual components.
163223
164- ### Setting the config via Nuxt.js BootstrapVue plugin
224+ ### Setting the config via Nuxt.js module
165225
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.
168228
169- ## Disabling BootstrapVue console warnings
229+ ## Disabling console warnings
170230
171231BootstrapVue will warn (via ` console.warn() ` ) when you try and use a deprecated prop, or pass an
172232invalid value to certain props. These warnings are provided to help you ensure that your application
0 commit comments