DevExtreme Accessibility Compliance
DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo's accessibility level, click the Run AXE® Validation button to launch the AXE® web accessibility evaluation tool.
All trademarks or registered trademarks are property of their respective owners. AXE® Terms of Use
The overall accessibility level of your application depends on the Popup features used.
Backend API
import React, { useCallback, useMemo, useState } from 'react';
import { Popup, Position, ToolbarItem } from 'devextreme-react/popup';
import type { ButtonTypes } from 'devextreme-react/button';
import notify from 'devextreme/ui/notify';
import { EmployeeItem } from './EmployeeItem.tsx';
import { employees } from './data.ts';
import type { Employee } from './types.ts';
export default function App() {
const [currentEmployee, setCurrentEmployee] = useState<Employee | null>(null);
const [popupVisible, setPopupVisible] = useState<boolean>(false);
const [positionOf, setPositionOf] = useState<string>('');
const showInfo = useCallback((employee: Employee): void => {
setCurrentEmployee(employee);
setPositionOf(`#image${employee.ID}`);
setPopupVisible(true);
}, []);
const hideInfo = useCallback(() => {
setCurrentEmployee(null);
setPopupVisible(false);
}, []);
const sendEmail = useCallback(() => {
const message = `Email is sent to ${currentEmployee?.FirstName} ${currentEmployee?.LastName}`;
notify(
{
message,
position: {
my: 'center top',
at: 'center top',
},
},
'success',
3000,
);
}, [currentEmployee]);
const showMoreInfo = useCallback(() => {
const message = `More info about ${currentEmployee?.FirstName} ${currentEmployee?.LastName}`;
notify(
{
message,
position: {
my: 'center top',
at: 'center top',
},
},
'success',
3000,
);
}, [currentEmployee]);
const getInfoButtonOptions = useMemo((): ButtonTypes.Properties => ({
text: 'More info',
onClick: showMoreInfo,
}), [showMoreInfo]);
const getEmailButtonOptions = useMemo((): ButtonTypes.Properties => ({
icon: 'email',
stylingMode: 'contained',
text: 'Send',
onClick: sendEmail,
}), [sendEmail]);
const getCloseButtonOptions = useMemo((): ButtonTypes.Properties => ({
text: 'Close',
stylingMode: 'outlined',
type: 'normal',
onClick: hideInfo,
}), [hideInfo]);
const getItems = useCallback(() => employees.map((employee: Employee) => (
<li key={employee.ID}>
<EmployeeItem employee={employee} showInfo={showInfo} />
</li>
)), [showInfo]);
return (
<div id="container">
<div className="header">Employees</div>
<ul>{getItems()}</ul>
<Popup
visible={popupVisible}
onHiding={hideInfo}
dragEnabled={false}
hideOnOutsideClick={true}
showCloseButton={false}
showTitle={true}
title="Information"
container=".dx-viewport"
width={300}
height={280}
>
<Position at="bottom" my="center" of={positionOf} collision="fit" />
<ToolbarItem
widget="dxButton"
toolbar="top"
locateInMenu="always"
options={getInfoButtonOptions}
/>
<ToolbarItem
widget="dxButton"
toolbar="bottom"
location="before"
options={getEmailButtonOptions}
/>
<ToolbarItem
widget="dxButton"
toolbar="bottom"
location="after"
options={getCloseButtonOptions}
/>
<p>
Full Name:
<span>{currentEmployee?.FirstName}</span>
<span>{currentEmployee?.LastName}</span>
</p>
<p>
Birth Date: <span>{currentEmployee?.BirthDate}</span>
</p>
<p>
Address: <span>{currentEmployee?.Address}</span>
</p>
<p>
Hire Date: <span>{currentEmployee?.HireDate}</span>
</p>
<p>
Position: <span>{currentEmployee?.Position}</span>
</p>
</Popup>
</div>
);
}
import React, { useCallback, useMemo, useState } from 'react';
import { Popup, Position, ToolbarItem } from 'devextreme-react/popup';
import notify from 'devextreme/ui/notify';
import { EmployeeItem } from './EmployeeItem.js';
import { employees } from './data.js';
export default function App() {
const [currentEmployee, setCurrentEmployee] = useState(null);
const [popupVisible, setPopupVisible] = useState(false);
const [positionOf, setPositionOf] = useState('');
const showInfo = useCallback((employee) => {
setCurrentEmployee(employee);
setPositionOf(`#image${employee.ID}`);
setPopupVisible(true);
}, []);
const hideInfo = useCallback(() => {
setCurrentEmployee(null);
setPopupVisible(false);
}, []);
const sendEmail = useCallback(() => {
const message = `Email is sent to ${currentEmployee?.FirstName} ${currentEmployee?.LastName}`;
notify(
{
message,
position: {
my: 'center top',
at: 'center top',
},
},
'success',
3000,
);
}, [currentEmployee]);
const showMoreInfo = useCallback(() => {
const message = `More info about ${currentEmployee?.FirstName} ${currentEmployee?.LastName}`;
notify(
{
message,
position: {
my: 'center top',
at: 'center top',
},
},
'success',
3000,
);
}, [currentEmployee]);
const getInfoButtonOptions = useMemo(
() => ({
text: 'More info',
onClick: showMoreInfo,
}),
[showMoreInfo],
);
const getEmailButtonOptions = useMemo(
() => ({
icon: 'email',
stylingMode: 'contained',
text: 'Send',
onClick: sendEmail,
}),
[sendEmail],
);
const getCloseButtonOptions = useMemo(
() => ({
text: 'Close',
stylingMode: 'outlined',
type: 'normal',
onClick: hideInfo,
}),
[hideInfo],
);
const getItems = useCallback(
() =>
employees.map((employee) => (
<li key={employee.ID}>
<EmployeeItem
employee={employee}
showInfo={showInfo}
/>
</li>
)),
[showInfo],
);
return (
<div id="container">
<div className="header">Employees</div>
<ul>{getItems()}</ul>
<Popup
visible={popupVisible}
onHiding={hideInfo}
dragEnabled={false}
hideOnOutsideClick={true}
showCloseButton={false}
showTitle={true}
title="Information"
container=".dx-viewport"
width={300}
height={280}
>
<Position
at="bottom"
my="center"
of={positionOf}
collision="fit"
/>
<ToolbarItem
widget="dxButton"
toolbar="top"
locateInMenu="always"
options={getInfoButtonOptions}
/>
<ToolbarItem
widget="dxButton"
toolbar="bottom"
location="before"
options={getEmailButtonOptions}
/>
<ToolbarItem
widget="dxButton"
toolbar="bottom"
location="after"
options={getCloseButtonOptions}
/>
<p>
Full Name:
<span>{currentEmployee?.FirstName}</span>
<span>{currentEmployee?.LastName}</span>
</p>
<p>
Birth Date: <span>{currentEmployee?.BirthDate}</span>
</p>
<p>
Address: <span>{currentEmployee?.Address}</span>
</p>
<p>
Hire Date: <span>{currentEmployee?.HireDate}</span>
</p>
<p>
Position: <span>{currentEmployee?.Position}</span>
</p>
</Popup>
</div>
);
}
import React, { useCallback } from 'react';
import { Button } from 'devextreme-react/button';
import type { Employee } from './types.ts';
export interface EmployeeItemProps {
employee: Employee;
showInfo: (employee: Employee) => void;
}
export function EmployeeItem(props: EmployeeItemProps) {
const { employee, showInfo } = props;
const onInfoButtonClick = useCallback(() => {
showInfo(employee);
}, [employee, showInfo]);
return (
<>
<img alt={`${employee.FirstName} ${employee.LastName}`} src={ employee.Picture } id={ `image${employee.ID}` } /><br />
<i>{employee.FirstName} {employee.LastName}</i><br />
<Button
className="button-info"
text="Details"
onClick={onInfoButtonClick}
/>
</>
);
}
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
import type { Employee } from './types.ts';
export const employees: Employee[] = [{
ID: 7,
FirstName: 'Sandra',
LastName: 'Johnson',
Prefix: 'Mrs.',
Position: 'Controller',
Picture: '../../../../images/employees/06.png',
BirthDate: '1974/11/15',
HireDate: '2005/05/11',
Notes: "Sandra is a CPA and has been our controller since 2008. She loves to interact with staff so if you've not met her, be certain to say hi.\r\n\r\nSandra has 2 daughters both of whom are accomplished gymnasts.",
Address: '4600 N Virginia Rd.',
}, {
ID: 10,
FirstName: 'Kevin',
LastName: 'Carter',
Prefix: 'Mr.',
Position: 'Shipping Manager',
Picture: '../../../../images/employees/07.png',
BirthDate: '1978/01/09',
HireDate: '2009/08/11',
Notes: 'Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months.\r\n\r\nWhen not in the office, he is usually on the basketball court playing pick-up games.',
Address: '424 N Main St.',
}, {
ID: 11,
FirstName: 'Cynthia',
LastName: 'Stanwick',
Prefix: 'Ms.',
Position: 'HR Assistant',
Picture: '../../../../images/employees/08.png',
BirthDate: '1985/06/05',
HireDate: '2008/03/24',
Notes: 'Cindy joined us in 2008 and has been in the HR department for 2 years. \r\n\r\nShe was recently awarded employee of the month. Way to go Cindy!',
Address: '2211 Bonita Dr.',
}, {
ID: 30,
FirstName: 'Kent',
LastName: 'Samuelson',
Prefix: 'Dr.',
Position: 'Ombudsman',
Picture: '../../../../images/employees/02.png',
BirthDate: '1972/09/11',
HireDate: '2009/04/22',
Notes: 'As our ombudsman, Kent is on the front-lines solving customer problems and helping our partners address issues out in the field. He is a classically trained musician and is a member of the Chamber Orchestra.',
Address: '12100 Mora Dr',
}];
export type Employee = {
ID: number;
FirstName: string;
LastName: string;
Prefix: string;
Position: string;
Picture: string;
BirthDate: string;
HireDate: string;
Notes: string;
Address: string;
};
import React, { useCallback } from 'react';
import { Button } from 'devextreme-react/button';
export function EmployeeItem(props) {
const { employee, showInfo } = props;
const onInfoButtonClick = useCallback(() => {
showInfo(employee);
}, [employee, showInfo]);
return (
<>
<img
alt={`${employee.FirstName} ${employee.LastName}`}
src={employee.Picture}
id={`image${employee.ID}`}
/>
<br />
<i>
{employee.FirstName} {employee.LastName}
</i>
<br />
<Button
className="button-info"
text="Details"
onClick={onInfoButtonClick}
/>
</>
);
}
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
export const employees = [
{
ID: 7,
FirstName: 'Sandra',
LastName: 'Johnson',
Prefix: 'Mrs.',
Position: 'Controller',
Picture: '../../../../images/employees/06.png',
BirthDate: '1974/11/15',
HireDate: '2005/05/11',
Notes:
"Sandra is a CPA and has been our controller since 2008. She loves to interact with staff so if you've not met her, be certain to say hi.\r\n\r\nSandra has 2 daughters both of whom are accomplished gymnasts.",
Address: '4600 N Virginia Rd.',
},
{
ID: 10,
FirstName: 'Kevin',
LastName: 'Carter',
Prefix: 'Mr.',
Position: 'Shipping Manager',
Picture: '../../../../images/employees/07.png',
BirthDate: '1978/01/09',
HireDate: '2009/08/11',
Notes:
'Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months.\r\n\r\nWhen not in the office, he is usually on the basketball court playing pick-up games.',
Address: '424 N Main St.',
},
{
ID: 11,
FirstName: 'Cynthia',
LastName: 'Stanwick',
Prefix: 'Ms.',
Position: 'HR Assistant',
Picture: '../../../../images/employees/08.png',
BirthDate: '1985/06/05',
HireDate: '2008/03/24',
Notes:
'Cindy joined us in 2008 and has been in the HR department for 2 years. \r\n\r\nShe was recently awarded employee of the month. Way to go Cindy!',
Address: '2211 Bonita Dr.',
},
{
ID: 30,
FirstName: 'Kent',
LastName: 'Samuelson',
Prefix: 'Dr.',
Position: 'Ombudsman',
Picture: '../../../../images/employees/02.png',
BirthDate: '1972/09/11',
HireDate: '2009/04/22',
Notes:
'As our ombudsman, Kent is on the front-lines solving customer problems and helping our partners address issues out in the field. He is a classically trained musician and is a member of the Chamber Orchestra.',
Address: '12100 Mora Dr',
},
];
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="./bundle.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
<script src="bundles/vendor/react.vendor.js"></script>
<script src="./bundle.js"></script>
</body>
</html>
.header {
font-size: 34px;
text-align: center;
}
#container {
padding: 10px;
}
#container ul {
list-style-type: none;
text-align: center;
}
#container ul li {
display: inline-block;
width: 160px;
margin: 10px;
}
#container ul li img {
width: 100px;
}
.button-info {
margin: 10px;
}
.dx-popup-content p {
margin-bottom: 10px;
margin-top: 0;
}
Show and Hide the Popup
Bind the visible property to a Boolean variable (popupVisible in this demo). Next, implement the showInfo(employee) method to set this Boolean variable to true. This causes the Popup to appear. To close a Popup, choose one of the following options:
-
Built-in close button
Enable the showCloseButton property to display the Close button in a Popup's top toolbar. -
Custom close button
This demo shows how to add custom buttons to a Popup. One of these buttons uses an onClick handler to set thepopupVisiblevariable tofalse, causing the Popup to disappear. Refer to the next section (Configure the Popup) to learn how you can populate a popup with custom controls. -
On outside click
Enable the hideOnOutsideClick property to allow users to hide the Popup by clicking outside the component.
Configure the Popup
The Popup inner area is divided into three parts:
-
Top toolbar
-
Predefined
Set showTitle totrueand use the title property to specify the caption. The Close button will appear if you do not disable the showCloseButton property. -
Custom
Add toolbarItems markup and set each item's toolbar property totop. If you want to display an item in the overflow menu, as shown in this demo, set the item's locateInMenu property toalways. You can also assignneverto this property to keep the item outside the overflow menu, or you can assignautoto hide the item in the menu if the Popup's width decreases.
-
-
Content
To populate the Popup with content, add markup inside the component. -
Bottom toolbar
To enable the bottom toolbar, declare toolbarItems in the markup as shown in this demo. Set each item's toolbar property tobottom. To learn more about toolbar configuration, refer to the following tutorial: Getting Started with Toolbar
Resize and Position
To specify Popup size, use the height and width properties.
In this demo, each Popup's location is relative to the image. The code specifies the my, at, and of properties of the position object. The configuration in the demo reads as follows: "place my center side at the bottom side of the #image${employee.ID} element."
Use the container property to select the container in which you want to render the Popup. If you set the container property to an element on the page, the shading applies to this element.
Turn on the dragEnabled option to allow users to move a Popup around the page.