DevExtreme Vue - Specify Toolbar Items
The Popover has two toolbars: top and bottom. Items on these toolbars can be plain text or widgets. To configure the items, populate the toolbarItems array with objects. Each object configures an individual toolbar item. For example, the following code adds two toolbar items to the Popover: one is plain text, another is the Button widget. They both occupy the top toolbar, because their toolbar option assumes its default value.
- <template>
- <div>
- <img id="image" src="https://url/to/an/image" />
- <DxPopover
- :width="200"
- target="#image"
- show-event="dxhoverstart"
- hide-event="dxhoverend">
- <template>
- <p>Popover content</p>
- </template>
- <DxToolbarItem
- text="Title"
- location="before"
- />
- <DxToolbarItem
- :options="buttonOptions"
- widget="dxButton"
- location="after"
- />
- </DxPopover>
- </div>
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import {
- DxPopover,
- DxToolbarItem
- } from 'devextreme-vue/popover';
- export default {
- components: {
- DxPopover,
- DxToolbarItem
- },
- data() {
- return {
- buttonOptions: {
- text: 'Refresh',
- onClick: function() {
- // ...
- }
- }
- };
- }
- }
- </script>
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.