| Name | Type | Default |
|---|
|
columns
|
Array
|
[]
|
Defines the layout of the widget's elements. Each Array item should be a Percentage Value and the total should be "100%".
<template>
<JqxNavBar ref="myNavBar"
:width="'90%'" :height="50" :columns="columns">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
</template>
<script>
import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
export default {
components: {
JqxNavBar
},
data: function () {
return {
columns: ['30%', '40%', '30%']
}
}
}
</script>
|
|
disabled
|
Boolean
|
false
|
Enables/disables the navbar.
<template>
<JqxNavBar ref="myNavBar"
:width="'90%'" :height="50" :disabled="true">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
</template>
<script>
import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
export default {
components: {
JqxNavBar
}
}
</script>
|
|
height
|
Number | String
|
null
|
Sets or gets the NavBar's height.
<template>
<JqxNavBar ref="myNavBar"
:width="'90%'" :height="50">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
</template>
<script>
import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
export default {
components: {
JqxNavBar
}
}
</script>
|
|
minimized
|
Boolean
|
false
|
Defines whether the NavBar is minimized.
<template>
<JqxNavBar ref="myNavBar"
:width="'90%'" :height="50" :minimized="true">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
</template>
<script>
import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
export default {
components: {
JqxNavBar
}
}
</script>
|
|
minimizeButtonPosition
|
String
|
'left'
|
Defines the position of the Toggle Button in the minimized state.
<template>
<JqxNavBar ref="myNavBar"
:width="'90%'" :height="50" :minimized="true" :minimizeButtonPosition="'right'">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
</template>
<script>
import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
export default {
components: {
JqxNavBar
}
}
</script>
|
|
minimizedHeight
|
Number
|
30
|
Defines the NavBar's height in minimized state.
<template>
<JqxNavBar ref="myNavBar"
:width="'90%'" :height="50" :minimized="true" :minimizedHeight="40">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
</template>
<script>
import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
export default {
components: {
JqxNavBar
}
}
</script>
|
|
minimizedTitle
|
String
|
""
|
Defines the NavBar's Title in minimized state.
<template>
<JqxNavBar ref="myNavBar"
:width="'90%'" :height="50" :minimized="true" :minimizedTitle="'custom element'">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
</template>
<script>
import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
export default {
components: {
JqxNavBar
}
}
</script>
|
|
orientation
|
String
|
"horizontal"
|
Defines the NavBar's orientation. Possible values: "horizontal", "vertical".
<template>
<JqxNavBar ref="myNavBar"
:width="'90%'" :height="50" :orientation="'vertical'">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
</template>
<script>
import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
export default {
components: {
JqxNavBar
}
}
</script>
|
|
popupAnimationDelay
|
Number
|
250
|
Defines the animation speed of the NavBar's Popup in minimized state.
<template>
<JqxNavBar ref="myNavBar"
:width="'90%'" :height="50" :minimized="true" :popupAnimationDelay="400">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
</template>
<script>
import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
export default {
components: {
JqxNavBar
}
}
</script>
|
|
rtl
|
Boolean
|
false
|
Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.
<template>
<JqxNavBar ref="myNavBar"
:width="'90%'" :height="50" :rtl="true">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
</template>
<script>
import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
export default {
components: {
JqxNavBar
}
}
</script>
|
|
selection
|
Boolean
|
true
|
Sets or gets whether the items can be selected.
<template>
<JqxNavBar ref="myNavBar"
:width="'90%'" :height="50" :selection="false">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
</template>
<script>
import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
export default {
components: {
JqxNavBar
}
}
</script>
|
|
selectedItem
|
Number
|
0
|
Sets or gets the selected item. The property is taken into account when selection is true.
<template>
<JqxNavBar ref="myNavBar"
:width="'90%'" :height="50" :selectedItem="1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
</template>
<script>
import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
export default {
components: {
JqxNavBar
}
}
</script>
|
|
theme
|
String
|
''
|
Sets the widget's theme.
<template>
<JqxNavBar ref="myNavBar"
:width="'90%'" :height="50" :theme="'material'">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
</template>
<script>
import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
export default {
components: {
JqxNavBar
}
}
</script>
|
|
width
|
Number | String
|
'100%'
|
Sets or gets the NavBar's width.
<template>
<JqxNavBar ref="myNavBar"
:width="'90%'" :height="50">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
</template>
<script>
import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
export default {
components: {
JqxNavBar
}
}
</script>
|
|
|
|
change
|
Event
|
|
This event is triggered when the user selects an item.
Code examples
Bind to the change event of jqxNavBar.
<template>
<JqxNavBar ref="myNavBar" @change="onChange($event)"
:width="'90%'" :height="50">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
</template>
<script>
import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
export default {
components: {
JqxNavBar
},
methods: {
onChange: function (event) {
alert('do something...');
}
}
}
</script>
|
|
|
| Name | Arguments | Return Type |
|---|
|
close
|
None
|
None
|
When NavBar is minimized, closes the popup.
<template>
<div>
<JqxNavBar ref="myNavBar"
:width="'90%'" :height="50" :minimized="true">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
<JqxButton class="button" @click="open">Open</JqxButton>
<JqxButton class="button" @click="close">Close</JqxButton>
</div>
</template>
<script>
import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
export default {
components: {
JqxNavBar,
JqxButton
},
methods: {
open: function () {
this.$refs.myNavBar.open();
},
close: function () {
this.$refs.myNavBar.close();
}
}
}
</script>
<style>
.button {
display: inline-block;
margin-top: 80px;
margin-right: 20px;
}
</style>
|
|
destroy
|
None
|
None
|
Destroys the jqxNavBar widget.
<template>
<JqxNavBar ref="myNavBar"
:width="'90%'" :height="50">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
</template>
<script>
import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
export default {
components: {
JqxNavBar
},
mounted: function () {
this.$refs.myNavBar.destroy();
}
}
</script>
|
|
getSelectedIndex
|
None
|
Number
|
Gets the index of the selected item. The returned value is the index of the selected item. If there's no selected item, -1 is returned.
<template>
<JqxNavBar ref="myNavBar"
:width="'90%'" :height="50">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
</template>
<script>
import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
export default {
components: {
JqxNavBar
},
mounted: function () {
const value = this.$refs.myNavBar.getSelectedIndex();
}
}
</script>
|
|
open
|
None
|
None
|
When NavBar is minimized, opens the popup.
<template>
<div>
<JqxNavBar ref="myNavBar"
:width="'90%'" :height="50" :minimized="true">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
<JqxButton class="button" @click="open">Open</JqxButton>
<JqxButton class="button" @click="close">Close</JqxButton>
</div>
</template>
<script>
import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
export default {
components: {
JqxNavBar,
JqxButton
},
methods: {
open: function () {
this.$refs.myNavBar.open();
},
close: function () {
this.$refs.myNavBar.close();
}
}
}
</script>
<style>
.button {
display: inline-block;
margin-top: 80px;
margin-right: 20px;
}
</style>
|
|
selectAt
|
index
|
None
|
Selects the item with indicated index. Index is a number.
<template>
<JqxNavBar ref="myNavBar"
:width="'90%'" :height="50">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</JqxNavBar>
</template>
<script>
import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
export default {
components: {
JqxNavBar
},
mounted: function () {
this.$refs.myNavBar.selectAt(1);
}
}
</script>
|