Commit28eb51c

committed

feat(CFormCheck): add a reverse property to allow put checkboxes and radios to the opposite side

1 parent9fad9d2 commit28eb51cCopy full SHA for 28eb51c

File tree

+33

-0

lines changed

+33

-0

lines changed

Lines changed: 7 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -83,6 +83,12 @@ const CFormCheck = defineComponent({`
`83`	`83`	`type:[Boolean,String],`
`84`	`84`	`value:undefined,`
`85`	`85`	`},`
	`86`	`+/**`
	`87`	`+ * Put checkboxes or radios on the opposite side.`
	`88`	`+ *`
	`89`	`+ *@sinve 4.8.0`
	`90`	`+ */`
	`91`	`+reverse:Boolean,`
`86`	`92`	`/**`
`87`	`93`	`* Display validation feedback in a styled tooltip.`
`88`	`94`	`*`
`@@ -126,6 +132,7 @@ const CFormCheck = defineComponent({`
`126`	`132`	`'form-check',`
`127`	`133`	`{`
`128`	`134`	`'form-check-inline':props.inline,`
	`135`	`+'form-check-reverse':props.reverse,`
`129`	`136`	`'is-invalid':props.invalid,`
`130`	`137`	`'is-valid':props.valid,`
`131`	`138`	`},`

Lines changed: 13 additions & 0 deletions

Original file line number	Diff line number	Diff line change
@@ -73,6 +73,19 @@ Group checkboxes on the same horizontal row by adding `inline` boolean property
`73`	`73`	`<CFormCheck inline id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>`
`74`	`74`	```
`75`	`75`
	`76`	`+##Reverse`
	`77`	`+`
	`78`	+Put your checkboxes on the opposite side by adding`reverse` boolean property.
	`79`	`+`
	`80`	`+::: demo`
	`81`	`+<CFormCheckreverseid="reverseCheckbox1"value="option1"label="Reverse checkbox"/>`
	`82`	`+<CFormCheckreverseid="reverseCheckbox2"value="option2"label="Disabled reverse checkbox"disabled/>`
	`83`	`+:::`
	`84`	+```vue
	`85`	`+<CFormCheck reverse id="reverseCheckbox1" value="option1" label="Reverse checkbox"/>`
	`86`	`+<CFormCheck reverse id="reverseCheckbox2" value="option2" label="Disabled reverse checkbox" disabled/>`
	`87`	+```
	`88`	`+`
`76`	`89`	`##Without labels`
`77`	`90`
`78`	`91`	Remember to still provide some form of accessible name for assistive technologies (for instance, using`aria-label`).

Lines changed: 13 additions & 0 deletions

Original file line number	Diff line number	Diff line change
@@ -63,6 +63,19 @@ Group radios on the same horizontal row by adding `inline` boolean property to a
`63`	`63`	`<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>`
`64`	`64`	```
`65`	`65`
	`66`	`+##Reverse`
	`67`	`+`
	`68`	+Put your radios on the opposite side by adding`reverse` boolean property.
	`69`	`+`
	`70`	`+::: demo`
	`71`	`+<CFormCheckreversetype="radio"id="reverseOption1"value="option1"label="Reverse radio"/>`
	`72`	`+<CFormCheckreversetype="radio"id="reverseOption2"value="option2"label="Disabled reverse radio"disabled/>`
	`73`	`+:::`
	`74`	+```vue
	`75`	`+<CFormCheck reverse type="radio" id="reverseOption1" value="option1" label="Reverse radio"/>`
	`76`	`+<CFormCheck reverse type="radio" id="reverseOption2" value="option2" label="Disabled reverse radio" disabled/>`
	`77`	+```
	`78`	`+`
`66`	`79`	`##Without labels`
`67`	`80`
`68`	`81`	Remember to still provide some form of accessible name for assistive technologies (for instance, using`aria-label`).

Comments

(0)