Checkboxes: Difference between revisions

From Bitnami MediaWiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
<strong>Use BoostrapVue's checkbox:</strong>
<strong>Use BoostrapVue's checkbox:</strong>
<nowiki><b-form-checkbox
<nowiki><b-form-checkbox
   v-model="isBar"
   v-model="isBar"

Revision as of 18:12, 1 October 2023

Use BoostrapVue's checkbox:

<b-form-checkbox v-model="isBar" > Bar </b-form-checkbox>

Confusingly, it can also be <b-checkbox> (src).

Tab navigation. See Tab Key Navigation section. To navigate away from the dropdown, define the keydown event handler: private onKeyDownFooCheckbox(e: KeyboardEvent) {

 this.emulateTab(
   e,
   () => {
     (this.$refs.barField as any).$el.focus();
     (this.$refs.barField as any).$el.select();
   },
   () => {
     (this.$refs.bazField as any).$el.focus();
     (this.$refs.bazField as any).$el.select();
   });
 }

Then add @keydown="onKeyDownFooCheckbox" define a method to set the keydown event listener on the checkbox and call it in mounted() callback: private initializeKeyDownEvents() {

 (this.$refs.fooCheckbox as any).$el.parentNode.removeEventListener('keydown', this.onKeyDownFooCheckbox);
 (this.$refs.fooCheckbox as any).$el.parentNode.addEventListener('keydown', this.onKeyDownFooCheckbox);

}