set selected index by default

DevExpress · Sep 14, 2023 · 28ec86e · 28ec86e
1 parent 9e2bb67
commit 28ec86e
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 1 deletion.
diff --git a/JSDemos/Demos/Tabs/Overview/Angular/app/app.component.html b/JSDemos/Demos/Tabs/Overview/Angular/app/app.component.html
@@ -4,6 +4,7 @@
       <dx-tabs
         #withText
         id="withText"
+        [selectedIndex]="0"
         [dataSource]="tabsWithText"
         [scrollByContent]="false"
         [showNavButtons]="false"
@@ -13,6 +14,7 @@
       <dx-tabs
         #withIconAndText
         id="withIconAndText"
+        [selectedIndex]="0"
         [dataSource]="tabsWithIconAndText"
         [scrollByContent]="false"
         [showNavButtons]="false"
@@ -22,6 +24,7 @@
       <dx-tabs
         #withIcon
         id="withIcon"
+        [selectedIndex]="0"
         [dataSource]="tabsWithIcon"
         [scrollByContent]="false"
         [showNavButtons]="false"

diff --git a/JSDemos/Demos/Tabs/Overview/React/App.js b/JSDemos/Demos/Tabs/Overview/React/App.js
@@ -67,6 +67,7 @@ const App = () => {
             showNavButtons={showNavigation}
             orientation={orientation}
             stylingMode={stylingMode}
+            selectedIndex={0}
           />
         </div>
         <div className="tabs-container">
@@ -77,6 +78,7 @@ const App = () => {
             orientation={orientation}
             stylingMode={stylingMode}
             iconPosition={iconPosition}
+            selectedIndex={0}
           />
         </div>
         <div className="tabs-container">
@@ -87,6 +89,7 @@ const App = () => {
             orientation={orientation}
             stylingMode={stylingMode}
             iconPosition={iconPosition}
+            selectedIndex={0}
           />
         </div>
       </div>

diff --git a/JSDemos/Demos/Tabs/Overview/Vue/App.vue b/JSDemos/Demos/Tabs/Overview/Vue/App.vue
@@ -4,6 +4,7 @@
       <div class="tabs-container">
         <DxTabs
           :data-source="tabsWithText"
+          selectedIndex="0"
           @initialized="saveTabInstance1"
           id="withText"
           :scroll-by-content="false"
@@ -14,6 +15,7 @@
         <DxTabs
           :data-source="tabsWithIconAndText"
           @initialized="saveTabInstance2"
+          selectedIndex="0"
           id="withIconAndText"
           :scroll-by-content="false"
           :show-nav-buttons="false"
@@ -22,6 +24,7 @@
       <div class="tabs-container">
         <DxTabs
           :data-source="tabsWithIcon"
+          selectedIndex="0"
           @initialized="saveTabInstance3"
           id="withIcon"
           :scroll-by-content="false"
@@ -189,7 +192,7 @@ export default {
 }
 
 .dx-tab {
-  width: 120px;
+  width: 135px;
 }
 
 .tabs-container {

diff --git a/JSDemos/Demos/Tabs/Overview/jQuery/index.js b/JSDemos/Demos/Tabs/Overview/jQuery/index.js
@@ -2,17 +2,20 @@ $(() => {
   const tab1 = $('#withText').dxTabs({
     showNavButtons: false,
     dataSource: tabsText,
+    selectedIndex: 0,
   }).dxTabs('instance');
 
   const tab2 = $('#withIconAndText').dxTabs({
     showNavButtons: false,
     dataSource: tabsIconAndText,
     iconPosition: iconPositions[0],
+    selectedIndex: 0,
   }).dxTabs('instance');
 
   const tab3 = $('#withIcon').dxTabs({
     showNavButtons: false,
     dataSource: tabsIcon,
+    selectedIndex: 0,
   }).dxTabs('instance');
 
   $('#orientation').dxSelectBox({