Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/ApiReference/UI_Components/dxPopup/Configuration/ below:

Vue Popup Props | Vue Documentation

An object defining configuration properties for the Popup UI component.

Specifies the shortcut key that sets focus on the UI component.

Selector: access-key

Default Value: undefined

The value of this property will be passed to the accesskey attribute of the HTML element that underlies the UI component.

The following code shows default values of the object depending on the device type:

{
    show: {
        type: 'pop',
        duration: 300,
        from: {
            scale: 0.55
        }
    },
    hide: {
        type: 'pop',
        duration: 300,
        to: {
            opacity: 0,
            scale: 0.55
        },
        from: {
            opacity: 1,
            scale: 1
        }
    }
}

{
    show: {
        type: 'slide',
        duration: 400,
        from: {
            position: {
                my: 'top',
                at: 'bottom'
            }
        },
        to: {
            position: {
                my: 'center',
                at: 'center'
            }   
        }
    },
    hide: {
        type: 'slide',
        duration: 400,
        from: {
            opacity: 1,
            position: {
                my: 'center',
                at: 'center'
            }
        },
        to: {
            opacity: 1,
            position: {
                my: 'top',
                at: 'bottom'
            }
        }
    }
}

{
    show: {
        type: 'fade',
        duration: 400,
        from: 0,
        to: 1
    },
    hide: {
        type: 'fade',
        duration: 400,
        from: 1,
        to: 0
    }   
}

{
    show: {
        type: 'slide',
        duration: 300,
        from: {
            top: '30%',
            opacity: 0
        },
        to: {
            top: 0,
            opacity: 1
        }
    },
    hide: {
        type: 'slide',
        duration: 300,
        from: {
            top: 0,
            opacity: 1
        },
        to: {
            top: '30%',
            opacity: 0
        }
    }
}

Use the position property to specify the position in which the UI component is shown and from which it is hidden.

Set the animation object to null or undefined to disable animations.

Specifies the container in which to render the UI component.

This property accepts one of the following values:

• A CSS selector, or a jQuery selector if you use jQuery

  jQuery

  $(function(){
      $("#popupContainer").dxPopup({
          // ...
          container: '#containerElement'
      });
  });

  Angular

  <dx-popup ... 
      container="#containerElement"
  >
  </dx-popup>

  Vue

  <template>
      <DxPopup ... 
          container="#containerElement"
      >
      </DxPopup>
  </template>
  <script>
  import { DxPopup } from 'devextreme-vue/popup';
  
  export default {
      components: {
          DxPopup
      }
  };
  </script>

  React

  import Popup from 'devextreme-react/popup';
  // ...
  function App() {
      return (
          <Popup ... 
              container="#containerElement"
          >
          </Popup>
      );
  }

• A jQuery wrapper

  jQuery

  $(function(){
      $("#popupContainer").dxPopup({
          // ...
          container: $('#containerElement')
      });
  });

• A DOM element

  jQuery

  $(function(){
      $("#popupContainer").dxPopup({
          // ...
          container: document.getElementById('#containerElement')
      });
  });

  Angular

  <dx-popup ... 
      [container]="containerElement"
  >
  </dx-popup>

  // ...
  export class AppComponent {
      containerElement: Element;
      constructor() {
          this.containerElement = document.getElementById('#containerElement') as Element;
      }
  }

  Vue

  <template>
      <DxPopup ... 
          :container="containerElement"
      >
      </DxPopup>
  </template>
  <script>
  import { DxPopup } from 'devextreme-vue/popup';
  
  export default {
      components: {
          DxPopup
      },
      data() {
          return {
              containerElement: null
          }
      },
      mounted() {
          this.containerElement = document.getElementById('containerElement');
      }
  };
  </script>

  React

  import React, { useEffect, useState } from 'react';
  import Popup from 'devextreme-react/popup';
  // ...
  function App() {
      const [containerElement, setContainerElement] = useState(null);
      useEffect(() => {
          setContainerElement(document.getElementById('containerElement'));
      }, []);
      return (
          <Popup ... 
              container={containerElement}
          >
          </Popup>
      );
  }

The UI component defines the default container on its initialization. This default container can be one of the following (if the element is absent, the component selects the next one):

• color swatch container

• .dx-viewport

• body

If you set this property to a specific element, the shading applies to this element. The Popup calculates its size relative to the element.

Popup Demo

Specifies a custom template for the UI component content.

Selector: content-template

Default Name: 'content'

Specifies whether to render the UI component's content when it is displayed. If false, the content is rendered immediately.

Selector: defer-rendering

Default Value: true

If you set the deferRendering property to true, wrap the content in the Angular named template.

If you set the deferRendering property to true, wrap the content in the Vue named template.

Specifies whether the UI component responds to user interaction.

Specifies an element with boundaries within which users can drag and resize the Popup. Ignored if the dragOutsideBoundary property is set to true.

Selector: drag-and-resize-area

Default Value: undefined

If you leave this property unspecified, users can drag and resize the Popup within boundaries of the element defined by the container property.

Specifies whether or not to allow a user to drag the popup window.

Selector: drag-enabled

Default Value: false, true (desktop)

A user can drag the popup window by the title. Therefore, this property makes sense if the showTitle property is set to true.

You can set the restorePosition property to false if you want to display the Popup at the same position to which users dragged it.

Dragging is possible only if the "height: 100%" style setting is applied to the html element and "min-height: 100%" - to the body element.

<html style="height: 100%;">
    <head>
    . . .
    </head>
    <body style="min-height: 100%;">
    . . .
    </body>
</html>

Allows users to drag the Popup within the browser window or beyond the window's borders.

Selector: drag-outside-boundary

Default Value: false

When you set this property to true, drag area boundaries defined by dragAndResizeArea and container properties are ignored.

Specifies whether to enable page scrolling when the UI component is visible.

Selector: enable-body-scroll

Default Value: true

Disable this property to hide the body scrollbar and prevent scrolling of the page.

Specifies whether the UI component can be focused using keyboard navigation.

Selector: focus-state-enabled

Default Value: true (desktop)

Specifies whether to display the Popup in full-screen mode.

Selector: full-screen

Default Value: false

When

is

, the UI component always occupies the entire screen and disregards the

value.

Specifies the UI component's height.

This property accepts a value of one of the following types:

• Number
  The height in pixels.

• String
  A CSS-accepted measurement of height. For example, "55px", "20vh", "80%", "inherit".

The Popup calculates its height relative to one of the elements in the following priority: container => position.of => window.

Specifies whether to hide the UI component if a user clicks outside it.

Selector: hide-on-outside-click

true if the UI component should be hidden; otherwise false.

Default Value: false

The function passed to this property enables you to specify a custom condition for UI component hiding. For instance, you can prevent hiding until a user clicks a certain element.

$(function () {
    $("#popupContainer").dxPopup({
        // ...
        hideOnOutsideClick: function(e) {
            return e.target === $("#someElement").get()[0];
        }
    });
});

import { DxPopupModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
    hideOnOutsideClick(e) {
        return e.target === document.getElementById("someElement");
    }
}
@NgModule({
     imports: [
         // ...
         DxPopupModule
     ],
     // ...
 })

<dx-popup ...
    [hideOnOutsideClick]="hideOnOutsideClick">
</dx-popup>

<template>
    <DxPopup ....
        :hide-on-outside-click="hideOnOutsideClick">
    </DxPopup>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxPopup from 'devextreme-vue/popup';

export default {
    components: {
        DxPopup
    },
    methods: {
        hideOnOutsideClick (e) {
            return e.target === document.getElementById("someElement");
        }
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import Popup from 'devextreme-react/popup';

const hideOnOutsideClick = (e) => {
    return e.target === document.getElementById("someElement");
};

export default function App() {
    return (
        <Popup ...
            hideOnOutsideClick={hideOnOutsideClick}>
        </Popup>
    );
}

The hideOnOutsideClick function is called when a user clicks the UI component or outside it.

Popup Demo

Specifies whether to hide the Popup when users scroll one of its parent elements.

Selector: hide-on-parent-scroll

Default Value: false

Specifies text for a hint that appears when a user pauses on the UI component.

Specifies whether the UI component changes its state when a user pauses on it.

Selector: hover-state-enabled

Default Value: false

Specifies the maximum height the UI component can reach while resizing.

Selector: max-height

Default Value: null

This property accepts a value of one of the following types:

• Number
  The height in pixels.

• String
  A CSS-accepted measurement of height. For example, "55px", "20vh", "80%", "inherit".

Specifies the maximum width the UI component can reach while resizing.

Selector: max-width

Default Value: null

This property accepts a value of one of the following types:

• Number
  The width in pixels.

• String
  A CSS-accepted measurement of width. For example, "55px", "20vw", "80%", "auto", "inherit".

Specifies the minimum height the UI component can reach while resizing.

Selector: min-height

Default Value: null

This property accepts a value of one of the following types:

• Number
  The height in pixels.

• String
  A CSS-accepted measurement of height. For example, "55px", "20vh", "80%", "inherit".

Specifies the minimum width the UI component can reach while resizing.

Selector: min-width

Default Value: null

This property accepts a value of one of the following types:

• Number
  The width in pixels.

• String
  A CSS-accepted measurement of width. For example, "55px", "20vw", "80%", "auto", "inherit".

A function that is executed when the UI component is rendered and each time the component is repainted.

Selector: @content-ready

Information about the event.

Object structure:

Default Value: null

A function that is executed before the UI component is disposed of.

Selector: @disposing

Information about the event.

Object structure:

Default Value: null

A function that is executed after the UI component is hidden.

Selector: @hidden

Information about the event.

Object structure:

Default Value: null

A function that is executed before the UI component is hidden.

Selector: @hiding

Information about the event.

Object structure:

Default Value: null

A function used in JavaScript frameworks to save the UI component instance.

Selector: @initialized

Information about the event.

Object structure:

Default Value: null

A function that is executed after a UI component property is changed.

Selector: @option-changed

Information about the event.

Object structure:

Model data. Available only if you use Knockout.

String

The path to the modified property that includes all parent properties.

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

Popup

The UI component's instance.

String

The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into.

The modified property's new value.

The UI component's previous value.

Default Value: null

The following example shows how to subscribe to component property changes:

$(function() {
    $("#popupContainer").dxPopup({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

<dx-popup ...
    (onOptionChanged)="handlePropertyChange($event)"> 
</dx-popup>

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    // ...
    handlePropertyChange(e) {
        if(e.name === "changedProperty") { 
            // handle the property change here
        }
    }
}

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxPopupModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxPopupModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }  

<template> 
    <DxPopup ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxPopup from 'devextreme-vue/popup'; 

export default { 
    components: { 
        DxPopup
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script> 

import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import Popup from 'devextreme-react/popup'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <Popup ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
} 

View on GitHub

A function that is executed each time the UI component is resized by one pixel.

Selector: @resize

Information about the event.

Object structure:

Default Value: null

A function that is executed when resizing ends.

Selector: @resize-end

Information about the event.

Object structure:

Default Value: null

A function that is executed when resizing starts.

Selector: @resize-start

Information about the event.

Object structure:

Default Value: null

A function that is executed before the UI component is displayed.

Selector: @showing

Information about the event.

Object structure:

Popup

The UI component's instance.

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

Model data. Available only if Knockout is used.

Boolean

Promise<Boolean> (jQuery or native)

Set this field to true if you want to prevent the Popup from being displayed.

Default Value: null

A function that is executed after the UI component is displayed.

Selector: @shown

Information about the event.

Object structure:

Default Value: null

A function that is executed when the UI component's title is rendered.

Selector: @title-rendered

Information about the event.

Object structure:

Default Value: null

Positions the UI component.

Selector: DxPosition

Default Value: { my: 'center', at: 'center', of: window }

This property accepts one of the following:

• Position configuration object
  An object that specifies the UI component's position.

• String
  A shortcut listed in the accepted values. Positions the UI component relative to the window.

• Function (deprecated since v21.2)
  Refer to the W0018 warning description for information on how to migrate to other property values.

If you do not specify the container property and set the position.of to a specific element, the shading applies to this element. The Popup calculates its size relative to the element.

Popup Demo

• restorePostion

Specifies whether or not an end user can resize the UI component.

Selector: resize-enabled

Default Value: false

Specifies whether to display the Popup at the initial position when users reopen it.

Selector: restore-position

Default Value: true

Switches the UI component to a right-to-left representation.

Selector: rtl-enabled

Default Value: false

When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

DevExpress.config({
    rtlEnabled: true
});

DataGrid Demo Navigation UI Demo Editors Demo

Specifies whether to shade the background when the UI component is active.

Shading applies to the first specified element in the following sequence: container => position.of => window

If this property is set to true, the Popup is displayed in modal mode, and users cannot interact with other UI components.

Specifies the shading color. Applies only if shading is enabled.

Selector: shading-color

Default Value: ''

Specifies whether or not the UI component displays the Close button.

Selector: show-close-button

Default Value: false, false (Material), true (desktop)

The property makes sense only if the

property is set to

.

A Boolean value specifying whether or not to display the title in the popup window.

Selector: show-title

Default Value: true

View Demo

Specifies the number of the element when the Tab key is used for navigating.

Selector: tab-index

Default Value: 0

The value of this property will be passed to the tabindex attribute of the HTML element that underlies the UI component.

The title in the overlay window.

Specifies a custom template for the UI component title. Does not apply if the title is defined.

Selector: title-template

Default Name: 'title'

Configures toolbar items.

In the following code, two items are defined on the toolbar: one is plain text, another is the Button UI component:

$(function() {
    $("#popupContainer").dxPopup({
        // ...
        toolbarItems: [{
            text: "Title",
            location: "before"
        }, {
            widget: "dxButton",
            location: "after",
            options: { 
                text: "Refresh", 
                onClick: function(e) { /* ... */ }
            }
        }]
    });
});

<div id="popupContainer">
    <p>Popup content</p>
</div>

<dx-popup ... >
    <div *dxTemplate="let data of 'content'">
        <p>Popup content</p>
    </div>
    <dxi-popup-toolbar-item
        text="Title"
        location="before">
    </dxi-popup-toolbar-item>
    <dxi-popup-toolbar-item
        widget="dxButton"
        location="after"
        [options]="{
            text: 'Refresh',
            onClick: refresh
        }">
    </dxi-popup-toolbar-item>
</dx-popup>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    refresh () { /* ... */ }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxPopupModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxPopupModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

@(Html.DevExtreme().Popup()
    <!-- ... -->
    .ContentTemplate(@<text>
        <p>Popup content</p>
    </text>)
    .ToolbarItems(ti => {
        ti.Add()
            .Text("Title")
            .Location(ToolbarItemLocation.Before);
        ti.Add()
            .Widget(w => w.Button()
                .Text("Refresh")
                .OnClick("refresh"))
            .Location(ToolbarItemLocation.After);
    }
)

<script type="text/javascript">
    function refresh() { /* ... */ }
</script>

<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.light.css';

import DxPopup, { DxToolbarItem } from 'devextreme-vue/popup';

export default {
    components: {
        DxPopup
    },
    data() {
        return {
            buttonOptions: {
                text: 'Refresh',
                onClick: function(e) { /* ... */ }
            }
        }
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { Popup, ToolbarItem } from 'devextreme-react/popup';

class App extends React.Component {
    constructor() {
        this.buttonOptions = {
            text: 'Refresh',
            onClick: function(e) { /* ... */ }
        };
    }
    render() {
        return (
            <Popup ... >
                <p>Popup Content</p>
                <ToolbarItem 
                    text="Title" 
                    location="before">
                </ToolbarItem>
                <ToolbarItem 
                    widget="dxButton" 
                    location="after" 
                    options={this.buttonOptions}>
                </ToolbarItem>
            </Popup>
        );
    }
}
export default App;

Popup Demo

A Boolean value specifying whether or not the UI component is visible.

Popup Demo

Specifies the UI component's width.

This property accepts a value of one of the following types:

• Number
  The width in pixels.

• String
  A CSS-accepted measurement of width. For example, "55px", "20vw", "80%", "auto", "inherit".

The Popup calculates its width relative to one of the elements in the following priority: container => position.of => window.

Specifies the global attributes for the UI component's wrapper element.

Selector: wrapper-attr

Type: any

Default Value: {}

$(function(){
    $("#popupContainer").dxPopup({
        // ...
        wrapperAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

<dx-popup ...
    [wrapperAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-popup>

import { Component } from '@angular/core';
// ...
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxPopupModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxPopupModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

<template>
    <DxPopup ...
        :wrapper-attr="popupAttributes">
    </DxPopup>
</template>

<script>
import DxPopup from 'devextreme-vue/popup';

export default {
    components: {
        DxPopup
    },
    data() {
        return {
            popupAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

import React, { useMemo } from 'react';

import Popup from 'devextreme-react/popup';

function App() {
    const popupAttributes = useMemo(() => {
        return {
            id: 'elementId',
            class: 'class-name'
        }
    }, []);

    return (
        <Popup ...
            wrapperAttr={popupAttributes}>
        </Popup>
    );
}
export default App;

The code above specifies the id and class attributes for the wrapper element and produces markup similar to this:

<body>
    <!-- The following is the wrapper element. -->
    <!-- It is nested inside an element defined by the `container` property (`<body>` by default). -->
    <div id="elementId" class="dx-overlay-wrapper dx-popup-wrapper class-name" ... > 

        <!-- The following element contains toolbars and component content. -->
        <div class="dx-overlay-content">

            <!-- The following element displays content specified in the `contentTemplate`. -->
            <div class="dx-popup-content" ... >
                <!-- ... -->
            </div>
        </div>
    </div>
</body>

You can specify attributes to the component's root element directly in HTML code:

<div id="myPopup" class="myClass"></div>

You can specify attributes to the component's root element directly in HTML code:

<dx-popup ... class="myClass">
</dx-popup>

You can specify attributes to the component's root element directly in HTML code:

<Popup ... className="myClass" />

To add an attribute to an ASP.NET Core control, use its OnInitialized method:

@(Html.DevExtreme().Popup()...
    .OnInitialized("(e) => e.element.addClass('myClass')")
)

To add an attribute to an ASP.NET MVC control, use its OnInitialized method:

    @(Html.DevExtreme().Popup()...
    .OnInitialized("(e) => e.element.addClass('myClass')")
)

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4