Buttons: Difference between revisions
(Created page with "<strong>Template.</strong> <pre><kendo-button class="k-outline" type="button"> <span class="k-icon k-i-search"></span> </kendo-button> </pre> However, the k-outline class makes it look plain compared to other options. See [https://www.telerik.com/kendo-vue-ui/components/buttons/button/ official documentation]. See list of icons [https://www.telerik.com/kendo-vue-ui/components/styling/icons/ here]. <strong>Add a tooltip:</strong> <pre><kendo-tooltip title="Tooltip L...") |
No edit summary |
||
Line 17: | Line 17: | ||
</pre> | </pre> | ||
OK-Cancel button placement order. Use the Windows-style with [ OK ] [ Cancel ] button placement rather than [ Cancel ] [ OK ]. | <strong>OK-Cancel button placement order.</strong> Use the Windows-style with [ OK ] [ Cancel ] button placement rather than [ Cancel ] [ OK ]. | ||
Focus event. Add ref="fooButton" and then call (this.$refs.fooButton as any).$el.focus(). | |||
Keydown event. The Kendo button only exposes the click event so you need to use a ref attribute and use the native JavaScript API to add the listener: | <strong>Focus event.</strong> Add ref="fooButton" and then call | ||
(this.$refs.fooButton as any).$el.removeEventListener('keydown', this.onKeyDownFooButton); | |||
(this.$refs.fooButton as any).$el.focus(). | |||
<strong>Keydown event.</strong> The Kendo button only exposes the click event so you need to use a ref attribute and use the native JavaScript API to add the listener: | |||
<pre>(this.$refs.fooButton as any).$el.removeEventListener('keydown', this.onKeyDownFooButton); | |||
(this.$refs.fooButton as any).$el.addEventListener('keydown', this.onKeyDownFooButton); | (this.$refs.fooButton as any).$el.addEventListener('keydown', this.onKeyDownFooButton); | ||
</pre> | |||
The removeEventListener() call is to ensure that the same event listener is not added twice. | The removeEventListener() call is to ensure that the same event listener is not added twice. | ||
Tab navigation. See Tab Key Navigation section. To navigate away from the button, define the keydown event handler: | |||
<strong>Tab navigation.</strong See Tab Key Navigation section. To navigate away from the button, define the keydown event handler: | |||
private onKeyDownFooButton(e: KeyboardEvent) { | private onKeyDownFooButton(e: KeyboardEvent) { | ||
this.emulateTab( | this.emulateTab( |
Revision as of 13:49, 22 September 2023
Template.
<kendo-button class="k-outline" type="button"> <span class="k-icon k-i-search"></span> </kendo-button>
However, the k-outline class makes it look plain compared to other options. See official documentation. See list of icons here.
Add a tooltip:
<kendo-tooltip title="Tooltip Label" :position="'top'"> <kendo-button> ... </kendo-button> </kendo-tooltip>
OK-Cancel button placement order. Use the Windows-style with [ OK ] [ Cancel ] button placement rather than [ Cancel ] [ OK ].
Focus event. Add ref="fooButton" and then call
(this.$refs.fooButton as any).$el.focus().
Keydown event. The Kendo button only exposes the click event so you need to use a ref attribute and use the native JavaScript API to add the listener:
(this.$refs.fooButton as any).$el.removeEventListener('keydown', this.onKeyDownFooButton); (this.$refs.fooButton as any).$el.addEventListener('keydown', this.onKeyDownFooButton);
The removeEventListener() call is to ensure that the same event listener is not added twice.
Tab navigation. {
(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 define a method to set the keydown event listener on the button and call it in mounted() callback: private initializeKeyDownEvents() {
(this.$refs.fooButton as any).$el.parentNode.removeEventListener('keydown', this.onKeyDownFooButton); (this.$refs.fooButton as any).$el.parentNode.addEventListener('keydown', this.onKeyDownFooButton);
}