Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
import React, { useCallback, useMemo, useState } from 'react';
import Drawer, { DrawerTypes } from 'devextreme-react/drawer';
import RadioGroup from 'devextreme-react/radio-group';
import Toolbar from 'devextreme-react/toolbar';
import HTMLReactParser from 'html-react-parser';
import { text } from './data.ts';
import NavigationList from './NavigationList.tsx';
const RadioGroupOpenedOptions = ['push', 'shrink', 'overlap'];
const RadioGroupPositionOptions = ['top', 'bottom'];
const RadioGroupRevealOptions = ['slide', 'expand'];
const App = () => {
const [opened, setOpened] = useState(false);
const [openedStateMode, setOpenedStateMode] = useState<DrawerTypes.OpenedStateMode>('shrink');
const [revealMode, setRevealMode] = useState<DrawerTypes.RevealMode>('expand');
const [position, setPosition] = useState<DrawerTypes.PanelLocation>('top');
const toolbarItems = useMemo(() => [{
widget: 'dxButton',
location: 'before',
options: {
icon: 'menu',
stylingMode: 'text',
onClick: () => setOpened(!opened),
},
}], [opened, setOpened]);
const onOpenedStateModeChanged = useCallback(({ value }) => {
setOpenedStateMode(value);
}, [setOpenedStateMode]);
const onRevealModeChanged = useCallback(({ value }) => {
setRevealMode(value);
}, [setRevealMode]);
const onPositionChanged = useCallback(({ value }) => {
setPosition(value);
}, [setPosition]);
const onOutsideClick = useCallback(() => {
setOpened(false);
return false;
}, [setOpened]);
return (
<div className="flex-container">
<Toolbar items={toolbarItems} id="toolbar" />
<Drawer
opened={opened}
closeOnOutsideClick={onOutsideClick}
openedStateMode={openedStateMode}
position={position}
component={NavigationList}
revealMode={revealMode}
height={400}
maxSize={200}
>
<div id="content">
{HTMLReactParser(text)}
</div>
</Drawer>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<label>Opened state mode</label>
<RadioGroup
items={RadioGroupOpenedOptions}
layout="horizontal"
value={openedStateMode}
onValueChanged={onOpenedStateModeChanged}
/>
</div>
{' '}
<div className="option">
<label>Position</label>
<RadioGroup
items={RadioGroupPositionOptions}
layout="horizontal"
value={position}
onValueChanged={onPositionChanged}
/>
</div>
{' '}
{openedStateMode !== 'push' && (
<div className="option">
<label>Reveal mode</label>
<RadioGroup
items={RadioGroupRevealOptions}
layout="horizontal"
value={revealMode}
onValueChanged={onRevealModeChanged}
/>
</div>
)}
</div>
</div>
);
};
export default App;
import React, { useCallback, useMemo, useState } from 'react';
import Drawer from 'devextreme-react/drawer';
import RadioGroup from 'devextreme-react/radio-group';
import Toolbar from 'devextreme-react/toolbar';
import HTMLReactParser from 'html-react-parser';
import { text } from './data.js';
import NavigationList from './NavigationList.js';
const RadioGroupOpenedOptions = ['push', 'shrink', 'overlap'];
const RadioGroupPositionOptions = ['top', 'bottom'];
const RadioGroupRevealOptions = ['slide', 'expand'];
const App = () => {
const [opened, setOpened] = useState(false);
const [openedStateMode, setOpenedStateMode] = useState('shrink');
const [revealMode, setRevealMode] = useState('expand');
const [position, setPosition] = useState('top');
const toolbarItems = useMemo(
() => [
{
widget: 'dxButton',
location: 'before',
options: {
icon: 'menu',
stylingMode: 'text',
onClick: () => setOpened(!opened),
},
},
],
[opened, setOpened],
);
const onOpenedStateModeChanged = useCallback(
({ value }) => {
setOpenedStateMode(value);
},
[setOpenedStateMode],
);
const onRevealModeChanged = useCallback(
({ value }) => {
setRevealMode(value);
},
[setRevealMode],
);
const onPositionChanged = useCallback(
({ value }) => {
setPosition(value);
},
[setPosition],
);
const onOutsideClick = useCallback(() => {
setOpened(false);
return false;
}, [setOpened]);
return (
<div className="flex-container">
<Toolbar
items={toolbarItems}
id="toolbar"
/>
<Drawer
opened={opened}
closeOnOutsideClick={onOutsideClick}
openedStateMode={openedStateMode}
position={position}
component={NavigationList}
revealMode={revealMode}
height={400}
maxSize={200}
>
<div id="content">{HTMLReactParser(text)}</div>
</Drawer>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<label>Opened state mode</label>
<RadioGroup
items={RadioGroupOpenedOptions}
layout="horizontal"
value={openedStateMode}
onValueChanged={onOpenedStateModeChanged}
/>
</div>{' '}
<div className="option">
<label>Position</label>
<RadioGroup
items={RadioGroupPositionOptions}
layout="horizontal"
value={position}
onValueChanged={onPositionChanged}
/>
</div>{' '}
{openedStateMode !== 'push' && (
<div className="option">
<label>Reveal mode</label>
<RadioGroup
items={RadioGroupRevealOptions}
layout="horizontal"
value={revealMode}
onValueChanged={onRevealModeChanged}
/>
</div>
)}
</div>
</div>
);
};
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
export const navigation = [
{ id: 1, text: 'Products' },
{ id: 2, text: 'Sales' },
{ id: 3, text: 'Customers' },
{ id: 4, text: 'Employees' },
{ id: 5, text: 'Reports' },
];
export const text = '<h2><b>Drawer Demo</b></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Penatibus et magnis dis parturient. Eget dolor morbi non arcu risus. Tristique magna sit amet purus gravida quis blandit. Auctor urna nunc id cursus metus aliquam eleifend mi in. Tellus orci ac auctor augue mauris augue neque gravida. Nullam vehicula ipsum a arcu. Nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi. Cursus in hac habitasse platea dictumst. Egestas dui id ornare arcu. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim.</p><p>Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Neque volutpat ac tincidunt vitae semper quis lectus. Sed sed risus pretium quam vulputate dignissim suspendisse in. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Amet cursus sit amet dictum sit amet justo donec enim. Vestibulum rhoncus est pellentesque elit ullamcorper. Id aliquet risus feugiat in ante metus dictum at.</p>';
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': '../../../../bundles/',
'externals:': '../../../../bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'html-react-parser': 'npm:html-react-parser@1.4.14/dist/html-react-parser.min.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
export const navigation = [
{ id: 1, text: 'Products' },
{ id: 2, text: 'Sales' },
{ id: 3, text: 'Customers' },
{ id: 4, text: 'Employees' },
{ id: 5, text: 'Reports' },
];
export const text = '<h2><b>Drawer Demo</b></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Penatibus et magnis dis parturient. Eget dolor morbi non arcu risus. Tristique magna sit amet purus gravida quis blandit. Auctor urna nunc id cursus metus aliquam eleifend mi in. Tellus orci ac auctor augue mauris augue neque gravida. Nullam vehicula ipsum a arcu. Nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi. Cursus in hac habitasse platea dictumst. Egestas dui id ornare arcu. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim.</p><p>Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Neque volutpat ac tincidunt vitae semper quis lectus. Sed sed risus pretium quam vulputate dignissim suspendisse in. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Amet cursus sit amet dictum sit amet justo donec enim. Vestibulum rhoncus est pellentesque elit ullamcorper. Id aliquet risus feugiat in ante metus dictum at.</p>';
<!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/24.2.3/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.tsx");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
.demo-container {
overflow: visible;
}
.flex-container {
display: flex;
flex-direction: column;
}
.dx-drawer-content {
display: flex;
}
#toolbar {
background-color: var(--dx-component-color-bg);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08);
padding: 5px 10px;
z-index: 10000;
}
.dx-drawer-shrink #content {
overflow: hidden;
transition: all 0.4s ease-out;
column-width: 900px;
}
.dx-drawer-shrink.dx-drawer-opened #content {
margin-right: -10px;
}
.panel-list {
height: 200px;
padding-top: 12px;
background-color: var(--dx-color-main-bg);
}
.panel-list .dx-list-item {
text-align: center;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
display: inline-block;
margin-right: 50px;
}
label {
font-weight: bold;
}
#content {
height: 100%;
padding: 10px 20px;
background-color: var(--dx-component-color-bg);
}
#content h2 {
font-size: 26px;
}
Use the radio buttons at the bottom of this demo module to try different layout modes. You can also change the Drawer's position and revealMode properties.
Note this demo's markup. The Drawer definition encloses the view content (the formatted text). The Drawer's own content (navigation links) is set by the template property. Finally, the toolbar markup is separate from other elements.
To get started with the DevExtreme Drawer component, refer to the following step-by-step tutorial: Getting Started with Navigation Drawer.