| Name | Type | Default |
|---|
|
animationType
|
String
|
'fade'
|
Sets or gets the animation type.
Possible values:
"fade"
"slide"
"none"
<template>
<JqxRibbon ref="myRibbon"
:width="400" :animationType="'slide'">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
}
}
</script>
|
|
animationDelay
|
Number
|
400
|
Sets or gets the duration of the ribbon animation.
<template>
<JqxRibbon ref="myRibbon"
:width="400" :animationDelay="800">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
}
}
</script>
|
|
disabled
|
Boolean
|
false
|
Enables/disables the ribbon.
<template>
<JqxRibbon ref="myRibbon"
:width="400" :disabled="true">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
}
}
</script>
|
|
height
|
Number | String
|
100
|
Sets or gets the ribbon's height.
<template>
<JqxRibbon ref="myRibbon"
:width="400" :height="100">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
}
}
</script>
|
|
initContent
|
Function
|
null
|
Initializes the content of jqxRibbon. Useful for initializing other widgets.
<template>
<JqxRibbon ref="myRibbon"
:width="400" :initContent="initContent">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
},
methods: {
initContent: function () {
jqwidgets.createInstance('#button', 'jqxButton', { width: 50, height: 50 });
}
}
}
</script>
|
|
mode
|
String
|
'default'
|
Sets or gets the ribbon's display mode.
Possible values:
"default" - the ribbon's content is included in its height.
"popup" - the ribbon's content is not included in its height and is positioned absolutely. It overlaps elements underneath it.
<template>
<JqxRibbon ref="myRibbon"
:width="400" :mode="'popup'">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
}
}
</script>
|
|
popupCloseMode
|
String
|
'click'
|
Sets or gets the way to close selected content sections when the mode property is set to "popup".
Possible values:
"click"
"mouseLeave"
"none"
<template>
<JqxRibbon ref="myRibbon"
:width="400" :mode="'popup'" :popupCloseMode="'mouseLeave'">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
}
}
</script>
|
|
position
|
String
|
'top'
|
Sets or gets whether the ribbon's header is positioned at the top, bottom, left or right of the content.
Possible values:
"top"
"bottom"
"left"
"right"
<template>
<JqxRibbon ref="myRibbon"
:width="400" :position="'bottom'">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
}
}
</script>
|
|
reorder
|
Boolean
|
false
|
Sets or gets whether the ribbon's tabs can be reordered.
<template>
<JqxRibbon ref="myRibbon"
:width="400" :reorder="true">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
}
}
</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>
<JqxRibbon ref="myRibbon"
:width="400" :rtl="true">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
}
}
</script>
|
|
selectedIndex
|
Number
|
0
|
Sets or gets the selected index (tab).
<template>
<JqxRibbon ref="myRibbon"
:width="400" :selectedIndex="1">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
}
}
</script>
|
|
selectionMode
|
String
|
'click'
|
Sets or gets the selection mode.
Possible values:
"click"
"hover"
"none"
<template>
<JqxRibbon ref="myRibbon"
:width="400" :selectionMode="'hover'">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
}
}
</script>
|
|
scrollPosition
|
String
|
'both'
|
Sets or gets the position of the scrollbar buttons.
Possible values:
"both"
"near"
"far"
<template>
<JqxRibbon ref="myRibbon"
:width="100" :scrollPosition="'near'">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
}
}
</script>
|
|
scrollStep
|
Number
|
10
|
Sets or gets the scroll step.
<template>
<JqxRibbon ref="myRibbon"
:width="100" :scrollStep="20">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
}
}
</script>
|
|
scrollDelay
|
Number
|
50
|
Sets or gets the scroll delay.
<template>
<JqxRibbon ref="myRibbon"
:width="100" :scrollDelay="100">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
}
}
</script>
|
|
theme
|
String
|
''
|
Sets the widget's theme.
- Include the theme's CSS file after jqx.base.css.
The following code example adds the 'material' theme. <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css"type="text/css"/>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
- Set the widget's theme property to 'material' when you initialize it.
$('#jqxRibbon').jqxRibbon({ theme: 'material' });
<template>
<JqxRibbon ref="myRibbon"
:width="400" :theme="'material'">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
}
}
</script>
|
|
width
|
Number | String
|
null
|
Sets or gets the ribbon's width.
<template>
<JqxRibbon ref="myRibbon"
:width="400">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
}
}
</script>
|
|
|
|
change
|
Event
|
|
This event is triggered when the user selects or unselects an item.
Code examples
Bind to the change event of jqxRibbon.
<template>
<JqxRibbon ref="myRibbon" @change="onChange($event)"
:width="400">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
},
methods: {
onChange: function (event) {
alert('do something...');
}
}
}
</script>
|
|
reorder
|
Event
|
|
This event is triggered when the user reorders the jqxRibbon items with the mouse.
Code examples
Bind to the reorder event of jqxRibbon.
<template>
<JqxRibbon ref="myRibbon" @reorder="onReorder($event)"
:width="400">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
},
mounted: function () {
this.$refs.myRibbon.reorder = true;
},
methods: {
onReorder: function (event) {
alert('do something...');
}
}
}
</script>
|
|
select
|
Event
|
|
This event is triggered when the user selects an item.
Code examples
Bind to the select event of jqxRibbon.
<template>
<JqxRibbon ref="myRibbon" @select="onSelect($event)"
:width="400">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
},
methods: {
onSelect: function (event) {
alert('do something...');
}
}
}
</script>
|
|
unselect
|
Event
|
|
This event is triggered when the user unselects an item.
Code examples
Bind to the unselect event of jqxRibbon.
<template>
<JqxRibbon ref="myRibbon" @unselect="onUnselect($event)"
:width="400">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
},
methods: {
onUnselect: function (event) {
alert('do something...');
}
}
}
</script>
|
|
|
| Name | Arguments | Return Type |
|---|
|
addAt
|
index, item
|
None
|
Adds a new item by index.
- index - number;
- data - object with the following properties:
- title - string;
- content - string.
<template>
<JqxRibbon ref="myRibbon"
:width="400">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
},
mounted: function () {
this.$refs.myRibbon.addAt(0,{ title: "New item", content: "New content" });
}
}
</script>
|
|
clearSelection
|
None
|
None
|
Unselects the selected item and collapses its content.
<template>
<JqxRibbon ref="myRibbon"
:width="400">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
},
mounted: function () {
this.$refs.myRibbon.clearSelection();
}
}
</script>
|
|
disableAt
|
index
|
None
|
Disables an item by index. Index is a number.
<template>
<div>
<JqxRibbon ref="myRibbon"
:width="400">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
<JqxButton @click="enable">Enable</JqxButton>
<JqxButton @click="disable">Disable</JqxButton>
</div>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
export default {
components: {
JqxRibbon,
JqxButton
},
methods: {
enable: function () {
this.$refs.myRibbon.enableAt(0);
},
disable: function () {
this.$refs.myRibbon.disableAt(0);
}
}
}
</script>
<style>
.jqx-button {
display: inline-block;
margin-top: 15px;
margin-right: 20px;
}
</style>
|
|
destroy
|
None
|
None
|
Destroys the jqxRibbon widget.
<template>
<JqxRibbon ref="myRibbon"
:width="400">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
},
mounted: function () {
this.$refs.myRibbon.destroy();
}
}
</script>
|
|
enableAt
|
index
|
None
|
Enables a disabled item by index. Index is a number.
<template>
<div>
<JqxRibbon ref="myRibbon"
:width="400">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
<JqxButton @click="enable">Enable</JqxButton>
<JqxButton @click="disable">Disable</JqxButton>
</div>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
export default {
components: {
JqxRibbon,
JqxButton
},
methods: {
enable: function () {
this.$refs.myRibbon.enableAt(0);
},
disable: function () {
this.$refs.myRibbon.disableAt(0);
}
}
}
</script>
<style>
.jqx-button {
display: inline-block;
margin-top: 15px;
margin-right: 20px;
}
</style>
|
|
hideAt
|
index
|
None
|
Hides an item by index. Index is a number.
<template>
<div>
<JqxRibbon ref="myRibbon"
:width="400">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
<JqxButton @click="show">Show</JqxButton>
<JqxButton @click="hide">Hide</JqxButton>
</div>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
export default {
components: {
JqxRibbon,
JqxButton
},
methods: {
show: function () {
this.$refs.myRibbon.showAt(0);
},
hide: function () {
this.$refs.myRibbon.hideAt(0);
}
}
}
</script>
<style>
.jqx-button {
display: inline-block;
margin-top: 15px;
margin-right: 20px;
}
</style>
|
|
removeAt
|
index
|
None
|
Removes an item from the ribbon. Index is a number.
<template>
<JqxRibbon ref="myRibbon"
:width="400">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
},
mounted: function () {
this.$refs.myRibbon.removeAt(0);
}
}
</script>
|
|
render
|
None
|
None
|
Renders the jqxRibbon widget.
<template>
<JqxRibbon ref="myRibbon"
:width="400">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
},
mounted: function () {
this.$refs.myRibbon.render();
}
}
</script>
|
|
refresh
|
None
|
None
|
Refreshes the jqxRibbon widget.
<template>
<JqxRibbon ref="myRibbon"
:width="400">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
},
mounted: function () {
this.$refs.myRibbon.refresh();
}
}
</script>
|
|
selectAt
|
index
|
None
|
Selects the item with indicated index. Index is a number.
<template>
<JqxRibbon ref="myRibbon"
:width="400">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
},
mounted: function () {
this.$refs.myRibbon.selectAt(1);
}
}
</script>
|
|
showAt
|
index
|
None
|
Shows an item by index. Index is a number.
<template>
<div>
<JqxRibbon ref="myRibbon"
:width="400">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
<JqxButton @click="show">Show</JqxButton>
<JqxButton @click="hide">Hide</JqxButton>
</div>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
export default {
components: {
JqxRibbon,
JqxButton
},
methods: {
show: function () {
this.$refs.myRibbon.showAt(0);
},
hide: function () {
this.$refs.myRibbon.hideAt(0);
}
}
}
</script>
<style>
.jqx-button {
display: inline-block;
margin-top: 15px;
margin-right: 20px;
}
</style>
|
|
setPopupLayout
|
index, layout, width, height
|
None
|
Sets the layout of an item's content if mode is set to "popup".
- index - number;
- layout - string, possible values:
- "default" - the item's content is aligned with the widget's header;
- "near" - the item's content is left/top aligned with its title;
- "far" - the item's content is right/bottom aligned with its title;
- "center" - the item's content is centered under/next to its title.
- width - number/string;
- height - number/string.
<template>
<JqxRibbon ref="myRibbon"
:width="400">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
},
mounted: function () {
this.$refs.myRibbon.mode = 'popup';
this.$refs.myRibbon.setPopupLayout(0,'near',200,200);
}
}
</script>
|
|
updateAt
|
index, item
|
None
|
Updates an item.
Note: after an item has been updated with updateAt, initContent will be called again for that item (if set).
- index - number;
- newData - object with the following properties:
- newTitle - string;
- newContent - string.
<template>
<JqxRibbon ref="myRibbon"
:width="400">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
},
mounted: function () {
this.$refs.myRibbon.updateAt(1,{ newTitle: "Updated title", newContent: "Updated content" });
}
}
</script>
|
|
val
|
value
|
String
|
Sets or gets the selected index. Index is a number.
<template>
<JqxRibbon ref="myRibbon"
:width="400">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div>
<div>Content 1<input type='button' id='button' value='Button' /></div>
<div>Content 2</div>
</div>
</JqxRibbon>
</template>
<script>
import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
export default {
components: {
JqxRibbon
},
mounted: function () {
this.$refs.myRibbon.val(1);
}
}
</script>
|