Skip to content

Commit

Permalink
docs(splitbutton): add disable left part kb article
Browse files Browse the repository at this point in the history
  • Loading branch information
filipKovachev committed Jul 25, 2024
1 parent b50bcd6 commit 8dcfbce
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 0 deletions.
4 changes: 4 additions & 0 deletions knowledge-base/examples/splitbutton-disable-left-part/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { createApp } from 'vue'
import App from './main.vue'

createApp(App).mount('#app')
26 changes: 26 additions & 0 deletions knowledge-base/examples/splitbutton-disable-left-part/main.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<template>
<div>
<splitbutton :items="items" :text="'Enabled Button'" />
&nbsp;
</div>
</template>
<script>
import { SplitButton } from '@progress/kendo-vue-buttons';
export default {
components: {
splitbutton: SplitButton,
},
data: function () {
return {
items: ['Item1', 'Item2', 'Item3'],
};
},
};
</script>
<style>
.k-button-group > .k-button:first-child:not(:only-child) {
pointer-events: none;
}
</style>

48 changes: 48 additions & 0 deletions knowledge-base/splitbutton-disable-left-part.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
---
title: Disable the left part of a SplitButton
description: An example on how to disable the left part of a SplitButton
type: how-to
page_title: Learn how to disable the left part of a SplitButton - Kendo UI for Vue SplitButton
slug: splitbutton-disable-left-part
tags: splitbutton, disable, button, left
res_type: kb
category: knowledge-base
---

## Environment

<table>
<tbody>
<tr>
<td>Product Version</td>
<td>4.3.1</td>
</tr>
<tr>
<td>Product</td>
<td>Progress® Kendo UI for Vue Native</td>
</tr>
</tbody>
</table>

## Description

I want to disable only the left part of the SplitButton.

## Solution

You can achieve this by setting [pointer-events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) to `none:

```css
.k-button-group > .k-button:first-child:not(:only-child) {
pointer-events: none;
}
```

### Runnable example

To test the following example, click on the left part of the SplitButton

{% meta height:350 %}
{% embed_file splitbutton-disable-left-part/main.vue preview %}
{% embed_file splitbutton-disable-left-part/main.js %}
{% endmeta %}

0 comments on commit 8dcfbce

Please sign in to comment.