zindex fixes to SplitButton

pull/12/head
cagataycivici 2019-05-21 14:51:08 +03:00
parent 7d50e537eb
commit 33fa933808
2 changed files with 79 additions and 41 deletions

View File

@ -23,11 +23,34 @@ import DomHandler from '../utils/DomHandler';
export default { export default {
props: { props: {
label: String, label: {
icon: String, type: String,
model: Array, default: null
disabled: Boolean, },
tabindex: String icon: {
type: String,
default: null
},
model: {
type: Array,
default: null
},
disabled: {
type: Boolean,
default: false
},
tabindex: {
type: String,
default: null
},
autoZIndex: {
type: Boolean,
default: true
},
baseZIndex: {
type: Number,
default: 0
},
}, },
data() { data() {
return { return {
@ -53,6 +76,9 @@ export default {
event.preventDefault(); event.preventDefault();
}, },
onOverlayEnter() { onOverlayEnter() {
if (this.autoZIndex) {
this.$refs.overlay.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
}
this.alignOverlay(); this.alignOverlay();
this.bindOutsideClickListener(); this.bindOutsideClickListener();
}, },

View File

@ -76,44 +76,56 @@ export default {
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>label</td> <td>label</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Text of the button.</td> <td>Text of the button.</td>
</tr> </tr>
<tr> <tr>
<td>icon</td> <td>icon</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Name of the icon.</td> <td>Name of the icon.</td>
</tr> </tr>
<tr> <tr>
<td>model</td> <td>model</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>MenuModel instance to define the overlay items.</td> <td>MenuModel instance to define the overlay items.</td>
</tr> </tr>
<tr> <tr>
<td>disabled</td> <td>disabled</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>When present, it specifies that the component should be disabled.</td> <td>When present, it specifies that the component should be disabled.</td>
</tr> </tr>
<tr> <tr>
<td>tabIndex</td> <td>tabindex</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Index of the element in tabbing order.</td> <td>Index of the element in tabbing order.</td>
</tr> </tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>