8000 Update README.md · bootstrap-vue/bootstrap-vue@cabb899 · GitHub
[go: up one dir, main page]
Skip to content

Commit cabb899

Browse files
jacobmllr95jacobmllr95
committed
Update README.md
1 parent 15e23a7 commit cabb899

File tree

1 file changed

+29
-9
lines changed

1 file changed

+29
-9
lines changed

‎src/components/form-group/README.md

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -78,13 +78,26 @@ greater than `0`. Or you can set the prop to `true` to make the label and input(
7878
of the width of the rendered row (handy if you have custom Bootstrap with an odd number of columns),
7979
or set the value to `'auto'` so that the label occupies only the width that is needed.
8080

81-
| Prop | Description |
82-
| --------------- | --------------------------------- |
83-
| `label-cols` | Applies to breakpoint `xs` up |
84-
| `label-cols-sm` | Applies to breakpoint `sm` and up |
85-
| `label-cols-md` | Applies to breakpoint `md` and up |
86-
| `label-cols-lg` | Applies to breakpoint `lg` and up |
87-
| `label-cols-xl` | Applies to breakpoint `xl` and up |
81+
Since BootstrapVue `v2.21.0` it is also possible to specify how many columns the content should
82+
occupy in the row via the `content-cols` and `content-cols-{breakpoint}` props.
83+
84+
When using both, the `label-cols` and `content-cols` props, make sure that the total amount of
85+
columns doesn't exceed `12`.
86+
87+
See the [Layout and Grid System](/docs/components/layout#how-it-works) docs for further information.
88+
89+
| Prop | Description |
90+
| ----------------- | ------------------------------------------------------------------------------------- |
91+
| `label-cols` | Applies to breakpoint `xs` up |
92+
| `label-cols-sm` | Applies to breakpoint `sm` and up |
93+
| `label-cols-md` | Applies to breakpoint `md` and up |
94+
| `label-cols-lg` | Applies to breakpoint `lg` and up |
95+
| `label-cols-xl` | Applies to breakpoint `xl` and up |
96+
| `content-cols` | <span class="badge badge-secondary">v2.21.0+</span> Applies to breakpoint `xs` up |
97+
| `content-cols-sm` | <span class="badge badge-secondary">v2.21.0+</span> Applies to breakpoint `sm` and up |
98+
| `content-cols-md` | <span class="badge badge-secondary">v2.21.0+</span> Applies to breakpoint `md` and up |
99+
| `content-cols-lg` | <span class="badge badge-secondary">v2.21.0+</span> Applies to breakpoint `lg` and up |
100+
| `content-cols-xl` | <span class="badge badge-secondary">v2.21.0+</span> Applies to breakpoint `xl` and up |
88101

89102
```html
90103
<div>
@@ -93,6 +106,8 @@ or set the value to `'auto'` so that the label occupies only the width that is n
93106
id="fieldset-horizontal"
94107
label-cols-sm="4"
95108
label-cols-lg="3"
109+
content-cols-sm
110+
content-cols-lg="7"
96111
description="Let us know your name."
97112
label="Enter your name"
98113
label-for="input-horizontal"
@@ -136,7 +151,7 @@ for both horizontal and non-horizontal form groups.
136151
The label text may also optionally be aligned `left`, `center` or `right` by setting the respective
137152
value via the prop `label-text-align` and/or `label-align-{breakpoint}`.
138153

139-
| prop | description |
154+
| Prop | Description |
140155
| ---------------- | --------------------------------- |
141156
| `label-align` | Applies to breakpoint `xs` up |
142157
| `label-align-sm` | Applies to breakpoint `sm` and up |
@@ -304,11 +319,16 @@ associated with a single input. It is best to use the default rendered markup th
304319
`<fieldset>` + `<legend>` which will describe the group of inputs.
305320

306321
When placing multiple form controls inside a `<b-form-group>` (and you are not nesting
307-
`<b-form-group>`components), it is recommended to give each control its own associated `<label>`
322+
`<b-form-group>` components), it is recommended to give each control its own associated `<label>`
308323
(which may be visually hidden using the `.sr-only` class) and set the labels `for` attribute to the
309324
`id` of the associated input control. Alternatively, you can set the `aria-label` attribute on each
310325
input control instead of using a `<label>`. For `<b-form-radio>` and `<b-form-checkbox>` (or the
311326
group versions), you do not need to set individual labels, as the rendered markup for these types of
312327
inputs already includes a `<label>` element.
313328

329+
When the `<b-form-group>` has a `label-for` prop set, the `aria-describedby` attribute will be
330+
auto-assigned to the input. When the form group has multiple form controls, make sure to set the
331+
attribute to each control yourself by using the `ariaDescribedby` prop value from the optionally
332+
scoped `default` slot.
333+
314334
<!-- Component reference added automatically from component package.json -->

0 commit comments

Comments
 (0)
0