Selection
This demo processes tab selection and uses SelectBox and MultiView components to emulate page content. Both these components are bound to Tabs, and vice versa.
You can use the following properties to configure selection:
-
selectedIndex
The index of the selected item. -
selectedItem
The selected item. -
selectedItems
An array of selected items. -
selectedItemKeys
An array of selected item keys. -
selectionMode
Specifies whether the component allows users to select only a single item or multiple items. -
onSelectionChanged
A function that is executed when a collection item is selected or selection is canceled.
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
<div id="center-content">
<div id="demo-items-container">
<div class="content dx-fieldset">
<div class="dx-field">
<dx-tabs #tabs [dataSource]="employees" [selectedItem]="employees[0]">
</dx-tabs>
</div>
<div class="dx-field select-box-container">
<div class="dx-field-label">Selected user:</div>
<div class="dx-field-value">
<dx-select-box
id="selectbox"
displayExpr="text"
[dataSource]="employees"
[inputAttr]="{ 'aria-label': 'Select Employee' }"
[(value)]="tabs.selectedItem"
></dx-select-box>
</div>
</div>
<div class="dx-field multiview-container">
<dx-multi-view
[height]="112"
[dataSource]="employees"
[(selectedItem)]="tabs.selectedItem"
[loop]="false"
[animationEnabled]="true"
>
<div *dxTemplate="let data of 'item'">
<div class="employee-info">
<img
[alt]="data.text"
class="employee-photo dx-theme-border-color"
[src]="data.picture"
/>
<p class="employee-notes">
<b>Position: {{ data.position }}</b
><br />
{{ data.notes }}
</p>
</div>
</div>
</dx-multi-view>
</div>
<div class="icon-container">
<span class="dx-icon dx-icon-info"></span>
<span class="demo-info">You can use swipe gestures in this area.</span>
</div>
</div>
</div>
</div>
import { NgModule, Component, enableProdMode } from '@angular/core';
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxTabsModule, DxSelectBoxModule, DxMultiViewModule } from 'devextreme-angular';
import { Tab, Service } from './app.service';
if (!/localhost/.test(document.location.host)) {
enableProdMode();
}
declare var __moduleName: string;
@Component({
selector: 'demo-app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
moduleId: __moduleName,
providers: [Service],
})
export class AppComponent {
employees: Tab[];
constructor(service: Service) {
this.employees = service.getEmployees();
}
}
@NgModule({
imports: [
BrowserModule,
BrowserTransferStateModule,
DxTabsModule,
DxMultiViewModule,
DxSelectBoxModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #center-content {
display: flex;
align-items: center;
justify-content: center;
}
::ng-deep .select-box-container,
.multiview-container {
padding: 16px;
}
::ng-deep #demo-items-container {
width: 680px;
}
::ng-deep .employee-info {
display: flex;
align-items: center;
}
::ng-deep .employee-photo {
height: 80px;
width: 80px;
border-radius: 50%;
border-width: 1px;
border-style: solid;
flex-shrink: 0;
object-fit: contain;
margin-right: 24px;
}
::ng-deep .employee-notes b {
display: inline-block;
margin-bottom: 8px;
}
::ng-deep .dx-field-label {
font-size: 16px;
}
::ng-deep #multiview {
cursor: move;
}
::ng-deep .demo-info {
padding-left: 8px;
opacity: 0.6;
}
::ng-deep .icon-container {
padding-left: 16px;
display: flex;
align-items: center;
}
::ng-deep .dx-icon {
font-size: 18px;
}
import { Injectable } from '@angular/core';
export class Tab {
id: number;
text: string;
icon: string;
}
const employees = [
{
id: 0,
icon: 'user',
text: 'John Heart',
position: 'CEO',
picture: '../../../../images/employees/01.png',
notes: 'John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003. When not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.',
},
{
id: 1,
icon: 'user',
text: 'Olivia Peyton',
position: 'Sales Assistant',
picture: '../../../../images/employees/09.png',
notes: 'Olivia loves to sell. She has been selling DevAV products since 2012. Olivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.',
},
{
id: 2,
icon: 'user',
text: 'Robert Reagan',
position: 'CMO',
picture: '../../../../images/employees/03.png',
notes: 'Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team. Robert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.',
},
];
@Injectable()
export class Service {
getEmployees(): Tab[] {
return employees;
}
}
// In real applications, you should not transpile code in the browser.
// You can see how to create your own application with Angular and DevExtreme here:
// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
},
meta: {
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
map: {
'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'@angular/core': 'npm:@angular/core@12.2.17',
'@angular/platform-browser': 'npm:@angular/platform-browser@12.2.17',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.17',
'@angular/forms': 'npm:@angular/forms@12.2.17',
'@angular/common': 'npm:@angular/common@12.2.17',
'@angular/compiler': 'npm:@angular/compiler@12.2.17',
'tslib': 'npm:tslib@2.6.2/tslib.js',
'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js',
'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@23.2.5/cjs',
'devextreme/bundles/dx.all': 'npm:devextreme@23.2.5/bundles/dx.all.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.6.4/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.51',
'devextreme-angular': 'npm:devextreme-angular@23.2.5',
'@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@7.4.11/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',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js',
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
'rxjs': {
defaultExtension: 'js',
},
'rxjs/operators': {
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
'npm:@angular/*/package.json',
'npm:@angular/common@12.2.17/*/package.json',
'npm:rxjs@7.5.3/package.json',
'npm:rxjs@7.5.3/operators/package.json',
'npm:devextreme-angular@23.2.5/*/package.json',
'npm:devextreme-angular@23.2.5/ui/*/package.json',
'npm:devextreme-angular@23.2.5/package.json',
'npm:devexpress-diagram@2.2.5/package.json',
'npm:devexpress-gantt@4.1.51/package.json',
],
};
System.config(window.config);
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.12.0/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.13/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import("app").catch(console.error.bind(console));
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
</body>
</html>