RetroSearch Browse

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

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

React Popup Props | React Documentation

An object defining configuration properties for the Popup UI component.

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

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.

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

Angular

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

Vue

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.

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.

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.

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.

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.

Default Value: true (desktop)

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

When

fullScreen

true

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

container

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.

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.

jQuery

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

Angular

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>

Vue

<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>

React

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.

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.

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

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.

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.

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.

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.

Function parameters:

Information about the event.

Object structure:

Default Value: null

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

Function parameters:

Information about the event.

Object structure:

Default Value: null

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

Function parameters:

Information about the event.

Object structure:

Default Value: null

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

Function parameters:

Information about the event.

Object structure:

Default Value: null

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

Function parameters:

Information about the event.

Object structure:

Default Value: null

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

Function parameters:

Information about the event.

Object structure:

Name Type Description model any

Model data. Available only if you use Knockout.

fullName

String

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

element

HTMLElement | jQuery

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

component

Popup

The UI component's instance.

name

String

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

value any

The modified property's new value.

previousValue any

The UI component's previous value.

Default Value: null

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

jQuery

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

Angular

<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 { }

Vue

<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>

React

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.

Function parameters:

Information about the event.

Object structure:

Default Value: null

A function that is executed when resizing ends.

Function parameters:

Information about the event.

Object structure:

Default Value: null

A function that is executed when resizing starts.

Function parameters:

Information about the event.

Object structure:

Default Value: null

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

Function parameters:

Information about the event.

Object structure:

Name Type Description component

Popup

The UI component's instance.

element

HTMLElement | jQuery

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

model any

Model data. Available only if Knockout is used.

cancel

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.

Function parameters:

Information about the event.

Object structure:

Default Value: null

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

Function parameters:

Information about the event.

Object structure:

Default Value: null

Positions the UI component.

Selector: Position

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

See Also

restorePostion

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

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

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

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.

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

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

The property makes sense only if the

showTitle

property is set to

true

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

View Demo

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

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.

Configures toolbar items.

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

jQuery

$(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>

Angular

<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 { }

ASP.NET MVC Controls

@(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>

Vue

<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>

React

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.

Type: any

Default Value: {}

jQuery

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

Angular

<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 { }

Vue

<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>

React

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>

jQuery

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

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

Angular

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

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

React

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

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

ASP.NET Core Controls

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

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

ASP.NET MVC Controls

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

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

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!

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