Vue Popup - toolbarItems
In the following code, two items are defined on the toolbar: one is plain text, another is the Button widget:
- <template>
- <DxPopup ... >
- <p>Popup content</p>
- <DxToolbarItem
- text="Title"
- location="before">
- </DxToolbarItem>
- <DxToolbarItem
- widget="dxButton"
- :options="buttonOptions"
- location="after">
- </DxToolbarItem>
- </DxPopup>
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import DxPopup, { DxToolbarItem } from 'devextreme-vue/popup';
- export default {
- components: {
- DxPopup
- },
- data() {
- return {
- buttonOptions: {
- text: 'Refresh',
- onClick: function(e) { /* ... */ }
- }
- }
- }
- }
- </script>
component
An alias for the template option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
location
Use the ToolbarItemLocation
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Before
, After
, and Center
.
options
Specifies a configuration object for the widget that presents a toolbar item.
When using ASP.NET MVC 5 Controls or DevExtreme-Based ASP.NET Core Controls, configure the widget with a lambda expression as follows:
- // Instead of Popup here you can use Popover
- @(Html.DevExtreme().Popup()
- .ToolbarItems(items => {
- items.Add().Widget(w => w
- // Instead of Button here can be any other widget
- .Button()
- .Text("Back")
- );
- })
- )
- ' Instead of Popup here you can use Popover
- @(Html.DevExtreme().Popup() _
- .ToolbarItems(Sub(items)
- items.Add().Widget(Function(w)
- ' Instead of Button here can be any other widget
- Return w.Button().Text("Back")
- End Function)
- End Sub)
- )
render
An alias for the template option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.
template
Whether you use a default or a custom template for widget items, you can specify a specific template for a particular item. To do so, set the template field for the data source object of this item. The following types of the specified value are available.
- Assign a jQuery object of the template's container.
- Assign a DOM Node of the template's container.
- Assign a function that returns the jQuery object or a DOM Node of the template's container.
toolbar
Use the Toolbar
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Top
and Bottom
.
widget
When using ASP.NET MVC 5 Controls or DevExtreme-Based ASP.NET Core Controls, configure the widget with a lambda expression as follows:
- // Instead of Popup here you can use Popover
- @(Html.DevExtreme().Popup()
- .ToolbarItems(items => {
- items.Add().Widget(w => w
- // Instead of Button here can be any other widget
- .Button()
- .Text("Back")
- );
- })
- )
- ' Instead of Popup here you can use Popover
- @(Html.DevExtreme().Popup() _
- .ToolbarItems(Sub(items)
- items.Add().Widget(Function(w)
- ' Instead of Button here can be any other widget
- Return w.Button().Text("Back")
- End Function)
- End Sub)
- )
If you have technical questions, please create a support ticket in the DevExpress Support Center.