TabPanel: Update Overview demo with tabsPosition, stylingMode and ico…

…nPosition
DevExpress · Sep 18, 2023 · a7aec8c · a7aec8c
1 parent c6fb72a
commit a7aec8c
Show file tree

Hide file tree

Showing 42 changed files with 3,087 additions and 940 deletions.
diff --git a/JSDemos/Demos/TabPanel/Overview/Angular/app/app.component.css b/JSDemos/Demos/TabPanel/Overview/Angular/app/app.component.css
@@ -1,45 +1,114 @@
-::ng-deep .tabpanel-item {
-  height: 200px;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  padding-left: 25px;
-  padding-top: 55px;
+::ng-deep .tabpanel-demo {
+  display: flex;
+  height: 100%;
+  min-height: 450px;
 }
 
-::ng-deep .mobile .tabpanel-item {
-  padding-top: 10px;
+::ng-deep .widget-container {
+  display: inline;
+  flex-grow: 1;
+  min-width: 450px;
+  padding: 16px 32px;
 }
 
-::ng-deep .tabpanel-item > div {
-  float: left;
-  padding: 0 85px 10px 10px;
+::ng-deep .dx-theme-material .dx-tabpanel {
+  border-radius: 8px;
+  overflow: clip;
 }
 
-::ng-deep .tabpanel-item p {
-  font-size: 16px;
-  margin: 0;
-}
-
-::ng-deep .item-box {
-  font-size: 16px;
-  margin: 15px 0 45px 10px;
+::ng-deep .dx-tabs-vertical {
+  min-width: 120px;
 }
 
 ::ng-deep .options {
+  display: inline-flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: 300px;
   padding: 20px;
   background-color: rgba(191, 191, 191, 0.15);
-  margin-top: 20px;
+}
+
+::ng-deep .tabpanel-item {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 24px;
 }
 
 ::ng-deep .caption {
-  font-size: 18px;
   font-weight: 500;
+  font-size: 18px;
 }
 
 ::ng-deep .option {
-  margin-top: 10px;
+  margin-top: 20px;
+}
+
+::ng-deep .task-item {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 48px;
+  padding: 8px;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
+}
+
+::ng-deep .task-item::before {
+  content: '';
+  position: absolute;
+  top: 8px;
+  left: 6px;
+  bottom: 8px;
+  width: 3px;
+  border-radius: 4px;
+}
+
+::ng-deep .task-item-priority-high::before {
+  background-color: #e1bee7;
+}
+
+::ng-deep .task-item-priority-medium::before {
+  background-color: #ffe0b2;
+}
+
+::ng-deep .task-item-priority-low::before {
+  background-color: #c8e6c9;
+}
+
+::ng-deep .task-item-text,
+::ng-deep .task-item-info {
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 16px;
+  margin: 0;
+}
+
+::ng-deep .task-item-info {
+  width: 240px;
+  min-width: 240px;
+  font-size: 12px;
+  opacity: 0.38;
+}
+
+::ng-deep .task-item-pseudo-button {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  font-size: 18px;
+  transform: translateY(-50%);
+  cursor: pointer;
+  opacity: 0.6;
+}
+
+::ng-deep .dx-theme-material .widget-container {
+  background-color: rgba(191, 191, 191, 0.15);
+}
+
+::ng-deep .dx-color-scheme-contrast .task-item {
+  border: 1px solid #fff;
 }
diff --git a/JSDemos/Demos/TabPanel/Overview/Angular/app/app.component.html b/JSDemos/Demos/TabPanel/Overview/Angular/app/app.component.html
@@ -1,64 +1,78 @@
-<dx-tab-panel
-  #tabPanel
-  [height]="260"
-  [dataSource]="companies"
-  [selectedIndex]="0"
-  [loop]="false"
-  [animationEnabled]="true"
-  [swipeEnabled]="true"
->
-  <div *dxTemplate="let company of 'title'">
-    <span>{{ company.CompanyName }}</span>
-  </div>
-  <div *dxTemplate="let company of 'item'">
-    <div class="tabpanel-item">
-      <div>
-        <p>
-          <b>{{ company.City }}</b>
-          (<span>{{ company.State }}</span
-          >)
-        </p>
-        <p>
-          <span>{{ company.Zipcode }}</span>
-          <span>{{ company.Address }}</span>
-        </p>
-      </div>
-      <div>
-        <p>
-          Phone: <b>{{ company.Phone }}</b>
-        </p>
-        <p>
-          Fax: <b>{{ company.Fax }}</b>
-        </p>
-        <p>
-          Website:
-          <a href="{{ company.Website }}" target="_blank">
-            {{ company.Website }}
-          </a>
-        </p>
+<div class="tabpanel-demo">
+  <div class="widget-container">
+    <dx-tab-panel
+      class="dx-theme-background-color"
+      width="100%"
+      [height]="418"
+      [animationEnabled]="true"
+      [swipeEnabled]="true"
+      [dataSource]="dataSource"
+      [selectedIndex]="selectedIndex"
+      [tabsPosition]="tabsPosition"
+      [stylingMode]="stylingMode"
+      [iconPosition]="iconPosition"
+      [showNavButtons]="showNavButtons"
+    >
+      <div *dxTemplate="let tabPanelItem of 'item'">
+        <div class="tabpanel-item">
+          <div
+            *ngFor="let task of tabPanelItem.tasks"
+            [className]="getTaskClassName(task.priority)"
+          >
+            <p class="task-item-text">
+              {{ task.text }}
+            </p>
+
+            <p class="task-item-info">
+              {{ task.date }} by {{ task.assignedBy }}
+            </p>
+
+            <i class="task-item-pseudo-button dx-icon dx-icon-overflow"></i>
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
-</dx-tab-panel>
-<div class="item-box">
-  Item <span>{{ tabPanel.selectedIndex + 1 }}</span> of
-  <span>{{ itemCount }}</span>
-</div>
-<div class="options">
-  <div class="caption">Options</div>
-  <div class="option">
-    <dx-check-box text="Loop enabled" [(value)]="tabPanel.loop"></dx-check-box>
+    </dx-tab-panel>
   </div>
-  <div class="option">
-    <dx-check-box
-      text="Animation enabled"
-      [(value)]="tabPanel.animationEnabled"
-    ></dx-check-box>
-  </div>
-  <div class="option">
-    <dx-check-box
-      text="Swipe enabled"
-      [(value)]="tabPanel.swipeEnabled"
-    ></dx-check-box>
+
+  <div class="options">
+    <div class="caption">Options</div>
+
+    <div class="option">
+      <div class="option-label">Tabs position</div>
+
+      <dx-select-box
+        [inputAttr]="{ 'aria-label': 'Tabs positions' }"
+        [items]="tabsPositions"
+        [(value)]="tabsPosition"
+      ></dx-select-box>
+    </div>
+
+    <div class="option">
+      <div class="option-label">Styling mode</div>
+
+      <dx-select-box
+        [inputAttr]="{ 'aria-label': 'Styling mode' }"
+        [items]="stylingModes"
+        [(value)]="stylingMode"
+      ></dx-select-box>
+    </div>
+
+    <div class="option">
+      <div class="option-label">Icon position</div>
+
+      <dx-select-box
+        [inputAttr]="{ 'aria-label': 'Icon positions' }"
+        [items]="iconPositions"
+        [(value)]="iconPosition"
+      ></dx-select-box>
+    </div>
+
+    <div class="option">
+      <dx-check-box
+        text="Show navigation buttons"
+        [elementAttr]="{ 'aria-label': 'Show navigation buttons' }"
+        [(value)]="showNavButtons"
+      ></dx-check-box>
+    </div>
   </div>
 </div>
diff --git a/JSDemos/Demos/TabPanel/Overview/Angular/app/app.component.ts b/JSDemos/Demos/TabPanel/Overview/Angular/app/app.component.ts
@@ -2,9 +2,11 @@ import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { DxTabPanelModule, DxCheckBoxModule, DxTemplateModule } from 'devextreme-angular';
+import {
+  DxTabPanelModule, DxCheckBoxModule, DxSelectBoxModule, DxTemplateModule,
+} from 'devextreme-angular';
 
-import { Company, Service } from './app.service';
+import { TabPanelItem, Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -17,14 +19,45 @@ if (!/localhost/.test(document.location.host)) {
   providers: [Service],
   preserveWhitespaces: true,
 })
+
 export class AppComponent {
-  companies: Company[];
+  dataSource: TabPanelItem[];
+
+  tabsPositions: string[] = [
+    'left',
+    'top',
+    'right',
+    'bottom',
+  ];
+
+  tabsPosition: string = this.tabsPositions[0];
+
+  stylingModes: string[] = [
+    'secondary',
+    'primary',
+  ];
+
+  stylingMode: string = this.stylingModes[0];
 
-  itemCount: number;
+  iconPositions: string[] = [
+    'top',
+    'start',
+    'end',
+    'bottom',
+  ];
+
+  iconPosition: string = this.iconPositions[0];
+
+  selectedIndex = 0;
+
+  showNavButtons = true;
 
   constructor(service: Service) {
-    this.companies = service.getCompanies();
-    this.itemCount = this.companies.length;
+    this.dataSource = service.getItems();
+  }
+
+  getTaskClassName(priority: string) {
+    return `task-item task-item-priority-${priority}`;
   }
 }
 
@@ -34,6 +67,7 @@ export class AppComponent {
     BrowserTransferStateModule,
     DxTabPanelModule,
     DxCheckBoxModule,
+    DxSelectBoxModule,
     DxTemplateModule,
   ],
   declarations: [AppComponent],