feat(tabs): update samples content

live-editing/configs/TabsConfigGenerator.ts

@@ -9,69 +9,56 @@ import { IgxButtonGroupModule } from 'igniteui-angular/button-group';
 import {AppModuleConfig, Config, IConfigGenerator} from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';;
 export class TabsConfigGenerator implements IConfigGenerator {
-    public additionalImports = {
-        TabsSample4Module: '../../src/app/layouts/tabs/tabs-sample-4/tabs-sample-4.module',
-        View1Component: '../../src/app/layouts/tabs/views/view1/view1.component',
-        View2Component: '../../src/app/layouts/tabs/views/view2/view2.component',
-        View3Component: '../../src/app/layouts/tabs/views/view3/view3.component'
-};
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
+        // tabs overview
         configs.push(new Config({
-            component: 'TabsSample1Component',
+            component: 'TabsOverviewComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/layouts/tabs/"
         }));
 
+        // tabs type
         configs.push(new Config({
-            component: 'TabsSample2Component',
+            component: 'TabsTypeComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/layouts/tabs/"
         }));
 
+        // tabs responsiveness
         configs.push(new Config({
-            component: 'TabsSample3Component',
+            component: 'TabsResponsivenessComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/layouts/tabs/"
         }));
 
+        // tabs amount
         configs.push(new Config({
-            component: 'TabsSample4Component',
-            additionalFiles: [
-                "/src/app/layouts/tabs/views/view1/view1.component.ts",
-                "/src/app/layouts/tabs/views/view1/view1.component.html",
-                "/src/app/layouts/tabs/views/view2/view2.component.ts",
-                "/src/app/layouts/tabs/views/view2/view2.component.html",
-                "/src/app/layouts/tabs/views/view3/view3.component.ts",
-                "/src/app/layouts/tabs/views/view3/view3.component.html",
-                "/src/app/layouts/tabs/tabs-sample-4/routes.ts"
-            ],
-             appConfig: {
-                ...BaseAppConfig,
-                routesConfig: {
-                    router: true,
-                    routesImportPath: './tabs-sample-4/routes'
-                }
-            },
+            component: 'TabsAmountComponent',
+            appConfig: BaseAppConfig,
             shortenComponentPathBy: "/layouts/tabs/"
         }));
 
+        // tabs states
         configs.push(new Config({
-            component: 'TabsStyleComponent',
-            additionalFiles: ["/src/app/layouts/tabs/tabs-style/layout.scss"],
+            component: 'TabsStatesComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/layouts/tabs/"
         }));
 
+        // tabs styling
         configs.push(new Config({
-            component: 'TabsAlignmentComponent',
+            component: 'TabsStylingComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/layouts/tabs/"
         }));
 
+        // tabs tailwind styling
         configs.push(new Config({
-            component: 'TabsHeaderPrefixSuffixComponent',
+            component: 'TabsTailwindStylingComponent',
+            additionalDependencies: ["tailwindcss", "@tailwindcss/postcss"],
+            additionalFiles: [".postcssrc.json"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/layouts/tabs/"
         }));

src/app/layouts/layouts-routes-data.ts

@@ -72,14 +72,13 @@ export const layoutsRoutesData = {
     'tabbar-sample-3': { displayName: 'Bottom Navigation Routing', parentName: 'Bottom Navigation' },
     'tabbar-style': { displayName: 'Bottom Navigation Styling', parentName: 'Bottom Navigation' },
     'tabbar-tailwind-style': { displayName: 'Bottom Navigation Tailwind Styling', parentName: 'Bottom Navigation' },
-    'tabs-sample-1': { displayName: 'Tabs Overview', parentName: 'Tabs' },
-    'tabs-sample-2': { displayName: 'Tabs Types', parentName: 'Tabs' },
-    'tabs-sample-3': { displayName: 'Tabs Customizing', parentName: 'Tabs' },
-    'tabs-sample-4': { displayName: 'Tabs Routing', parentName: 'Tabs' },
-    'tabs-style': { displayName: 'Tabs Styling', parentName: 'Tabs' },
-    'tabs-tailwind-style': { displayName: 'Tabs Tailwind Styling', parentName: 'Tabs' },
-    'tabs-alignment': { displayName: 'Tabs Alignment', parentName: 'Tabs' },
-    'tabs-header-prefix-suffix': { displayName: 'Tabs Prefix/Suffix', parentName: 'Tabs' },
+    'tabs-overview': { displayName: 'Tabs Overview', parentName: 'Tabs' },
+    'tabs-type': { displayName: 'Tabs Type', parentName: 'Tabs' },
+    'tabs-responsiveness': { displayName: 'Tabs Responsiveness', parentName: 'Tabs' },
+    'tabs-amount': { displayName: 'Tabs Amount', parentName: 'Tabs' },
+    'tabs-states': { displayName: 'Tabs States', parentName: 'Tabs' },
+    'tabs-styling': { displayName: 'Tabs Styling', parentName: 'Tabs' },
+    'tabs-tailwind-styling': { displayName: 'Tabs Tailwind Styling', parentName: 'Tabs' },
     'card-overview': { displayName: 'Overview', parentName: 'Card' },
     'card-actions': { displayName: 'Card Actions', parentName: 'Card' },
     'card-media': { displayName: 'Card Media', parentName: 'Card' },

src/app/layouts/layouts.routes.ts

@@ -94,17 +94,13 @@ import { TabbarTailwindStyleComponent } from './tabbar/tabbar-tailwind-style/tab
 import { TabbarView1Component } from './tabbar/views/view1/view1.component';
 import { TabbarView2Component } from './tabbar/views/view2/view2.component';
 import { TabbarView3Component } from './tabbar/views/view3/view3.component';
-import { TabsSample1Component } from './tabs/tabs-sample-1/tabs-sample-1.component';
-import { TabsSample2Component } from './tabs/tabs-sample-2/tabs-sample-2.component';
-import { TabsSample3Component } from './tabs/tabs-sample-3/tabs-sample-3.component';
-import { TabsSample4Component } from './tabs/tabs-sample-4/components/tabs-sample-4.component';
-import { TabsStyleComponent } from './tabs/tabs-style/tabs-style.component';
-import { TabsTailwindStyleComponent } from './tabs/tabs-tailwind-style/tabs-tailwind-style.component';
-import { TabsAlignmentComponent } from './tabs/tabs-alignment/tabs-alignment.component';
-import { TabsHeaderPrefixSuffixComponent } from './tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix';
-import { View1Component } from './tabs/views/view1/view1.component';
-import { View2Component } from './tabs/views/view2/view2.component';
-import { View3Component } from './tabs/views/view3/view3.component';
+import { TabsOverviewComponent } from './tabs/tabs-overview/tabs-overview.component';
+import { TabsTypeComponent } from './tabs/tabs-type/tabs-type.component';
+import { TabsResponsivenessComponent } from './tabs/tabs-responsiveness/tabs-responsiveness.component';
+import { TabsAmountComponent } from './tabs/tabs-amount/tabs-amount.component';
+import { TabsStatesComponent } from './tabs/tabs-states/tabs-states.component';
+import { TabsStylingComponent } from './tabs/tabs-styling/tabs-styling.component';
+import { TabsTailwindStylingComponent } from './tabs/tabs-tailwind-styling/tabs-tailwind-styling.component';
 import { AccordionSample1Component } from './accordion/accordion-sample-1/accordion-sample-1.component';
 import { AccordionCustomizationComponent } from './accordion/accordion-customization/accordion-customization.component';
 import { AccordionNestedScenarioComponent } from './accordion/accordion-nested-scenario/accordion-nested-scenario.component';
@@ -507,44 +503,39 @@ export const LayoutsRoutes: Routes = [
         path: 'tabbar-tailwind-style'
     },
     {
-        component: TabsSample1Component,
-        data: layoutsRoutesData['tabs-sample-1'],
-        path: 'tabs-sample-1'
+        component: TabsOverviewComponent,
+        data: layoutsRoutesData['tabs-overview'],
+        path: 'tabs-overview'
     },
     {
-        component: TabsSample2Component,
-        data: layoutsRoutesData['tabs-sample-2'],
-        path: 'tabs-sample-2'
+        component: TabsTypeComponent,
+        data: layoutsRoutesData['tabs-type'],
+        path: 'tabs-type'
     },
     {
-        component: TabsSample3Component,
-        data: layoutsRoutesData['tabs-sample-3'],
-        path: 'tabs-sample-3'
+        component: TabsResponsivenessComponent,
+        data: layoutsRoutesData['tabs-responsiveness'],
+        path: 'tabs-responsiveness'
     },
     {
-        component: TabsSample4Component,
-        path: 'tabs-sample-4',
-        children: [
-            { path: 'view1', component: View1Component },
-            { path: 'view2', component: View2Component },
-            { path: 'view3', component: View3Component }
-        ]
-    },
-    {
-        component: TabsStyleComponent,
-        path: 'tabs-style'
+        component: TabsAmountComponent,
+        data: layoutsRoutesData['tabs-amount'],
+        path: 'tabs-amount'
     },
     {
-        component: TabsTailwindStyleComponent,
-        path: 'tabs-tailwind-style'
+        component: TabsStatesComponent,
+        data: layoutsRoutesData['tabs-states'],
+        path: 'tabs-states'
     },
     {
-        component: TabsAlignmentComponent,
-        path: 'tabs-alignment'
+        component: TabsStylingComponent,
+        data: layoutsRoutesData['tabs-styling'],
+        path: 'tabs-styling'
     },
     {
-        component: TabsHeaderPrefixSuffixComponent,
-        path: 'tabs-header-prefix-suffix'
+        component: TabsTailwindStylingComponent,
+        data: layoutsRoutesData['tabs-tailwind-styling'],
+        path: 'tabs-tailwind-styling'
     },
     {
         component: CardOverviewComponent,

src/app/layouts/tabs/tabs-amount/tabs-amount.component.html

@@ -0,0 +1,35 @@
+<div class="amounts">
+    <span class="amount-label">Two Tabs</span>
+    <igx-tabs tabAlignment="justify">
+        @for (category of twoTabs; track category) {
+            <igx-tab-item [selected]="$first">
+                <igx-tab-header>
+                    <span igxTabHeaderLabel>{{ category }}</span>
+                </igx-tab-header>
+                <igx-tab-content></igx-tab-content>
+            </igx-tab-item>
+        }
+    </igx-tabs>
+    <span class="amount-label">Five Tabs</span>
+    <igx-tabs tabAlignment="justify">
+        @for (category of fiveTabs; track category) {
+            <igx-tab-item [selected]="$first">
+                <igx-tab-header>
+                    <span igxTabHeaderLabel>{{ category }}</span>
+                </igx-tab-header>
+                <igx-tab-content></igx-tab-content>
+            </igx-tab-item>
+        }
+    </igx-tabs>
+    <span class="amount-label">5+ Tabs</span>
+    <igx-tabs>
+        @for (category of moreTabs; track category) {
+            <igx-tab-item [selected]="$first">
+                <igx-tab-header>
+                    <span igxTabHeaderLabel>{{ category }}</span>
+                </igx-tab-header>
+                <igx-tab-content></igx-tab-content>
+            </igx-tab-item>
+        }
+    </igx-tabs>
+</div>

src/app/layouts/tabs/tabs-amount/tabs-amount.component.scss

@@ -0,0 +1,20 @@
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.amounts {
+    display: grid;
+    grid-template-columns: 5.6875rem 35rem;
+    align-items: center;
+    row-gap: 3.75rem;
+}
+
+.amount-label {
+    font: 400 13px / 20px "Aktiv Grotesk", sans-serif;
+    letter-spacing: 0.3px;
+    color: var(--ig-gray-600);
+}

src/app/layouts/tabs/tabs-amount/tabs-amount.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs';
+
+const categories = ['Podcasts', 'Playlists', 'Genres', 'Albums', 'Artists', 'Audiobooks', 'Radio'];
+
+@Component({
+    selector: 'app-tabs-amount',
+    styleUrls: ['./tabs-amount.component.scss'],
+    templateUrl: './tabs-amount.component.html',
+    imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent]
+})
+export class TabsAmountComponent {
+    public twoTabs = categories.slice(0, 2);
+    public fiveTabs = categories.slice(0, 5);
+    public moreTabs = categories;
+}

src/app/layouts/tabs/tabs-overview/tabs-overview.component.html

@@ -0,0 +1,22 @@
+<div class="team-tabs">
+    <igx-tabs tabAlignment="justify">
+        @for (team of teams; track team.name) {
+            <igx-tab-item [selected]="$first">
+                <igx-tab-header>
+                    <span igxTabHeaderLabel>{{ team.name }}</span>
+                </igx-tab-header>
+                <igx-tab-content>
+                    <igx-list>
+                        @for (person of team.people; track person.name) {
+                            <igx-list-item>
+                                <igx-avatar igxListThumbnail [src]="person.avatar" shape="circle" [attr.aria-label]="person.name"></igx-avatar>
+                                <span igxListLineTitle>{{ person.name }}</span>
+                                <span igxListAction class="team-name">{{ person.team }}</span>
+                            </igx-list-item>
+                        }
+                    </igx-list>
+                </igx-tab-content>
+            </igx-tab-item>
+        }
+    </igx-tabs>
+</div>