Specifying the Content Template
The example below shows how to create a template consisting of static (text) and dynamic (the Button UI component) content.
- <template>
- <DxPopup
- v-model:visible="isPopupVisible"
- title="Popup Title">
- <template>
- <p>Static content</p>
- <DxButton
- text="Click me"
- @click="buttonClick"
- />
- </template>
- </DxPopup>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxPopup } from 'devextreme-vue/popup';
- import { DxButton } from 'devextreme-vue/button';
- export default {
- components: {
- DxButton
- },
- data() {
- return {
- isPopupVisible: true
- };
- },
- methods: {
- buttonClick() {
- // ...
- }
- }
- }
- </script>
Switching Templates On the Fly
If you need to render different templates depending on a specific condition, define them inside the Popup container using the DevExtreme dxTemplate markup component. You can switch the templates on the fly by changing the contentTemplate property's value.
- <template>
- <div>
- <DxPopup
- title="Popup Title"
- v-model:visible="isPopupVisible"
- :contentTemplate="currentTemplate">
- <template #template1>
- <p>First template</p>
- </template>
- <template #template2>
- <p>Second template</p>
- </template>
- </DxPopup>
- <DxButton
- text="Change the Template"
- @click="changeTemplate"
- />
- </div>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxPopup } from 'devextreme-vue/popup';
- import { DxButton } from 'devextreme-vue/button';
- export default {
- components: {
- DxPopup,
- DxButton
- },
- data() {
- return {
- isPopupVisible: true,
- currentTemplate: "template1"
- };
- },
- methods: {
- changeTemplate () {
- this.currentTemplate = (this.currentTemplate === 'template1' ? 'template2' : 'template1')
- }
- }
- }
- </script>
See Also
Add Scrolling
The Popup component always displays a native scrollbar when the height of the Popup's content is greater than that of the Popup.
You can also implement a scrollbar that belongs to the ScrollView component. This implementation is more flexible. For example, you can enable right-to-left representation or scroll the content to a specific position. For more information about the available options, refer to the ScrollView API section.
To implement this solution, follow the steps below:
Wrap the content in the ScrollView component and place it in the Popup container.
Set the height and width of the ScrollView to
100%
of the popup content area.
- <template>
- <div id="app-container">
- <DxPopup ... >
- <template #content>
- <DxScrollView
- height="100%"
- width="100%">
- <!-- ... -->
- </DxScrollView>
- </template>
- </DxPopup>
- <!-- ... -->
- </div>
- </template>
- <script>
- // ...
- import { DxScrollView } from "devextreme-vue/scroll-view";
- export default {
- // ...
- components: {
- // ...
- DxScrollView
- }
- }
- </script>
If you have technical questions, please create a support ticket in the DevExpress Support Center.