diff --git a/live-editing/configs/TabsConfigGenerator.ts b/live-editing/configs/TabsConfigGenerator.ts index 69da0fc5bd..b213debd0f 100644 --- a/live-editing/configs/TabsConfigGenerator.ts +++ b/live-editing/configs/TabsConfigGenerator.ts @@ -9,69 +9,54 @@ 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(); + // 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', appConfig: BaseAppConfig, shortenComponentPathBy: "/layouts/tabs/" })); diff --git a/src/app/layouts/layouts-routes-data.ts b/src/app/layouts/layouts-routes-data.ts index cb49866c68..d6ae934091 100644 --- a/src/app/layouts/layouts-routes-data.ts +++ b/src/app/layouts/layouts-routes-data.ts @@ -71,14 +71,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-sample-0': { displayName: 'Elevated Card', parentName: 'Card' }, 'card-sample-1': { displayName: 'Outlined Card', parentName: 'Card' }, 'card-sample-2': { displayName: 'Horizontal Card', parentName: 'Card' }, diff --git a/src/app/layouts/layouts.routes.ts b/src/app/layouts/layouts.routes.ts index ff1087244c..1f191363ec 100644 --- a/src/app/layouts/layouts.routes.ts +++ b/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'; @@ -502,44 +498,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: CardComponent, diff --git a/src/app/layouts/tabs/tabs-alignment/tabs-alignment.component.html b/src/app/layouts/tabs/tabs-alignment/tabs-alignment.component.html deleted file mode 100644 index b55ab7d1cf..0000000000 --- a/src/app/layouts/tabs/tabs-alignment/tabs-alignment.component.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - Home - - - Home Content. - - - - - Recent - - - Recent contact list. - - - - - More - - - More detailed contact information. - - - diff --git a/src/app/layouts/tabs/tabs-alignment/tabs-alignment.component.scss b/src/app/layouts/tabs/tabs-alignment/tabs-alignment.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/app/layouts/tabs/tabs-alignment/tabs-alignment.component.ts b/src/app/layouts/tabs/tabs-alignment/tabs-alignment.component.ts deleted file mode 100644 index 346339e173..0000000000 --- a/src/app/layouts/tabs/tabs-alignment/tabs-alignment.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxButtonGroupComponent } from 'igniteui-angular/button-group'; -import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; - -@Component({ - selector: 'app-tabs-alignment', - templateUrl: './tabs-alignment.component.html', - imports: [IgxButtonGroupComponent, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent] -}) -export class TabsAlignmentComponent { - public tabAlignment = 'start'; - public tabAlignments = [ - { label: 'start', selected: this.tabAlignment === 'start', togglable: true }, - { label: 'center', selected: this.tabAlignment === 'center', togglable: true }, - { label: 'end', selected: this.tabAlignment === 'end', togglable: true }, - { label: 'justify', selected: this.tabAlignment === 'justify', togglable: true } - ]; - - changeAlignment(event) { - this.tabAlignment = this.tabAlignments[event.index].label; - } -} diff --git a/src/app/layouts/tabs/tabs-amount/tabs-amount.component.html b/src/app/layouts/tabs/tabs-amount/tabs-amount.component.html new file mode 100644 index 0000000000..1b36ff406b --- /dev/null +++ b/src/app/layouts/tabs/tabs-amount/tabs-amount.component.html @@ -0,0 +1,35 @@ +
+ Two Tabs + + @for (category of twoTabs; track category) { + + + {{ category }} + + + + } + + Five Tabs + + @for (category of fiveTabs; track category) { + + + {{ category }} + + + + } + + 5+ Tabs + + @for (category of moreTabs; track category) { + + + {{ category }} + + + + } + +
diff --git a/src/app/layouts/tabs/tabs-amount/tabs-amount.component.scss b/src/app/layouts/tabs/tabs-amount/tabs-amount.component.scss new file mode 100644 index 0000000000..3ef4d043c4 --- /dev/null +++ b/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); +} diff --git a/src/app/layouts/tabs/tabs-amount/tabs-amount.component.ts b/src/app/layouts/tabs/tabs-amount/tabs-amount.component.ts new file mode 100644 index 0000000000..b9bf604b16 --- /dev/null +++ b/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; +} diff --git a/src/app/layouts/tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix.html b/src/app/layouts/tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix.html deleted file mode 100644 index 80688125ac..0000000000 --- a/src/app/layouts/tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix.html +++ /dev/null @@ -1,16 +0,0 @@ - - @for (item of tabs; track item; let i = $index) { - - - -
{{item.header}}
- - - - {{item.content}} - - - } - diff --git a/src/app/layouts/tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix.scss b/src/app/layouts/tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/app/layouts/tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix.ts b/src/app/layouts/tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix.ts deleted file mode 100644 index bfff56bd7c..0000000000 --- a/src/app/layouts/tabs/tabs-header-prefix-suffix/tabs-header-prefix-suffix.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; -import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; -import { IgxIconButtonDirective } from 'igniteui-angular/directives'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - - -@Component({ - selector: 'app-tabs-header-prefix-suffix', - templateUrl: './tabs-header-prefix-suffix.html', - imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxPrefixDirective, IgxIconButtonDirective, IgxSuffixDirective, IgxIconComponent, IgxTabContentComponent] -}) -export class TabsHeaderPrefixSuffixComponent { - public tabs = [{ - image: 'assets/images/card/avatars/igLogo.png', - header: 'Tab1', - content: 'Content1' - }, { - image: 'assets/images/card/avatars/igLogo.png', - header: 'Tab2', - content: 'Content2' - }, { - image: 'assets/images/card/avatars/igLogo.png', - header: 'Tab3', - content: 'Content3' - }]; - - closeTab(index: number) { - this.tabs.splice(index, 1); - } -} diff --git a/src/app/layouts/tabs/tabs-overview/tabs-overview.component.html b/src/app/layouts/tabs/tabs-overview/tabs-overview.component.html new file mode 100644 index 0000000000..c31cae50f0 --- /dev/null +++ b/src/app/layouts/tabs/tabs-overview/tabs-overview.component.html @@ -0,0 +1,22 @@ +
+ + @for (team of teams; track team.name) { + + + {{ team.name }} + + + + @for (person of team.people; track person.name) { + + + {{ person.name }} + {{ person.team }} + + } + + + + } + +
diff --git a/src/app/layouts/tabs/tabs-overview/tabs-overview.component.scss b/src/app/layouts/tabs/tabs-overview/tabs-overview.component.scss new file mode 100644 index 0000000000..65b529f154 --- /dev/null +++ b/src/app/layouts/tabs/tabs-overview/tabs-overview.component.scss @@ -0,0 +1,34 @@ +:host { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.team-tabs { + width: 23.9375rem; + height: 17rem; + background: var(--ig-surface-500); +} + +.team-tabs igx-tabs { + height: 100%; +} + +.team-tabs igx-tab-content { + overflow: hidden; +} + +.team-tabs igx-list { + --ig-size: var(--ig-size-large); +} + +.team-name { + font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-2-font-size); + font-weight: var(--ig-subtitle-2-font-weight); + line-height: var(--ig-subtitle-2-line-height); + letter-spacing: var(--ig-subtitle-2-letter-spacing); + color: var(--ig-gray-900); +} diff --git a/src/app/layouts/tabs/tabs-overview/tabs-overview.component.ts b/src/app/layouts/tabs/tabs-overview/tabs-overview.component.ts new file mode 100644 index 0000000000..5f5ef8742a --- /dev/null +++ b/src/app/layouts/tabs/tabs-overview/tabs-overview.component.ts @@ -0,0 +1,47 @@ +import { Component } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListLineTitleDirective, IgxListThumbnailDirective } from 'igniteui-angular/list'; +import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; + +interface Person { + name: string; + team: string; + avatar: string; +} + +interface Team { + name: string; + people: Person[]; +} + +const people: Person[] = [ + { name: 'Emily Carter', team: 'Finance', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png' }, + { name: 'Jose Diaz', team: 'Engineering', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png' }, + { name: 'Kira Tanaka', team: 'Finance', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png' }, + { name: 'Liam Brooks', team: 'Engineering', avatar: 'https://dl.infragistics.com/x/img/avatars/avatar-profile-03.png' } +]; + +@Component({ + selector: 'app-tabs-overview', + styleUrls: ['./tabs-overview.component.scss'], + templateUrl: './tabs-overview.component.html', + imports: [ + IgxTabsComponent, + IgxTabItemComponent, + IgxTabHeaderComponent, + IgxTabHeaderLabelDirective, + IgxTabContentComponent, + IgxListComponent, + IgxListItemComponent, + IgxListThumbnailDirective, + IgxListLineTitleDirective, + IgxListActionDirective, + IgxAvatarComponent + ] +}) +export class TabsOverviewComponent { + public teams: Team[] = ['Everyone', 'Finance', 'Engineering'].map((name) => ({ + name, + people: people.filter((person) => name === 'Everyone' || person.team === name) + })); +} diff --git a/src/app/layouts/tabs/tabs-responsiveness/tabs-responsiveness.component.html b/src/app/layouts/tabs/tabs-responsiveness/tabs-responsiveness.component.html new file mode 100644 index 0000000000..a8588de53a --- /dev/null +++ b/src/app/layouts/tabs/tabs-responsiveness/tabs-responsiveness.component.html @@ -0,0 +1,24 @@ +
+ Content Fit + + @for (category of categories; track category) { + + + {{ category }} + + + + } + + Content Fix + + @for (day of days; track day) { + + + {{ day }} + + + + } + +
diff --git a/src/app/layouts/tabs/tabs-responsiveness/tabs-responsiveness.component.scss b/src/app/layouts/tabs/tabs-responsiveness/tabs-responsiveness.component.scss new file mode 100644 index 0000000000..d3cf457e7b --- /dev/null +++ b/src/app/layouts/tabs/tabs-responsiveness/tabs-responsiveness.component.scss @@ -0,0 +1,20 @@ +:host { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.modes { + display: grid; + grid-template-columns: 6.1875rem 33.125rem; + align-items: center; + row-gap: 3.75rem; +} + +.mode-label { + font: 400 13px / 20px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.3px; + color: var(--ig-gray-600); +} diff --git a/src/app/layouts/tabs/tabs-sample-2/tabs-sample-2.component.ts b/src/app/layouts/tabs/tabs-responsiveness/tabs-responsiveness.component.ts similarity index 51% rename from src/app/layouts/tabs/tabs-sample-2/tabs-sample-2.component.ts rename to src/app/layouts/tabs/tabs-responsiveness/tabs-responsiveness.component.ts index 0e27ffe1a7..4a2c96dfeb 100644 --- a/src/app/layouts/tabs/tabs-sample-2/tabs-sample-2.component.ts +++ b/src/app/layouts/tabs/tabs-responsiveness/tabs-responsiveness.component.ts @@ -2,13 +2,12 @@ import { Component } from '@angular/core'; import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; @Component({ - selector: 'app-tabs-sample-2', - styleUrls: ['./tabs-sample-2.component.scss'], - templateUrl: './tabs-sample-2.component.html', + selector: 'app-tabs-responsiveness', + styleUrls: ['./tabs-responsiveness.component.scss'], + templateUrl: './tabs-responsiveness.component.html', imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent] }) -export class TabsSample2Component { - - constructor() { } - +export class TabsResponsivenessComponent { + public categories = ['Podcasts', 'Playlists', 'Genres']; + public days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; } diff --git a/src/app/layouts/tabs/tabs-sample-1/tabs-sample-1.component.html b/src/app/layouts/tabs/tabs-sample-1/tabs-sample-1.component.html deleted file mode 100644 index 73b5771feb..0000000000 --- a/src/app/layouts/tabs/tabs-sample-1/tabs-sample-1.component.html +++ /dev/null @@ -1,32 +0,0 @@ - - - - Tab 1 - - Tab 1 Content - - - - Tab 2 - - Tab 2 Content - - - - Tab 3 - - Tab 3 Content - - - - Tab 4 - - Tab 4 Content - - - - Tab 5 - - Tab 5 Content - - diff --git a/src/app/layouts/tabs/tabs-sample-1/tabs-sample-1.component.scss b/src/app/layouts/tabs/tabs-sample-1/tabs-sample-1.component.scss deleted file mode 100644 index 03e76ccaed..0000000000 --- a/src/app/layouts/tabs/tabs-sample-1/tabs-sample-1.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -igx-tab-content { - padding: 8px; -} diff --git a/src/app/layouts/tabs/tabs-sample-1/tabs-sample-1.component.ts b/src/app/layouts/tabs/tabs-sample-1/tabs-sample-1.component.ts deleted file mode 100644 index 1b99abb8e3..0000000000 --- a/src/app/layouts/tabs/tabs-sample-1/tabs-sample-1.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; - -@Component({ - selector: 'app-tabs-sample-1', - styleUrls: ['./tabs-sample-1.component.scss'], - templateUrl: './tabs-sample-1.component.html', - imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent] -}) -export class TabsSample1Component { } diff --git a/src/app/layouts/tabs/tabs-sample-2/tabs-sample-2.component.html b/src/app/layouts/tabs/tabs-sample-2/tabs-sample-2.component.html deleted file mode 100644 index 41ab972498..0000000000 --- a/src/app/layouts/tabs/tabs-sample-2/tabs-sample-2.component.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - Home - - Home content. - - - - Recent - - Recent contacts list. - - - - More - - More detailed contact information. - - - - - - - Home - - Home content. - - - - Recent - - Recent contacts list. - - - - More - - More detailed contact information. - - diff --git a/src/app/layouts/tabs/tabs-sample-2/tabs-sample-2.component.scss b/src/app/layouts/tabs/tabs-sample-2/tabs-sample-2.component.scss deleted file mode 100644 index 60a16b9082..0000000000 --- a/src/app/layouts/tabs/tabs-sample-2/tabs-sample-2.component.scss +++ /dev/null @@ -1,12 +0,0 @@ -igx-tabs { - display: block; - - + igx-tabs { - margin-top: 120px; - } -} - -igx-tab-content { - padding: 8px; -} - diff --git a/src/app/layouts/tabs/tabs-sample-3/tabs-sample-3.component.html b/src/app/layouts/tabs/tabs-sample-3/tabs-sample-3.component.html deleted file mode 100644 index 79ac19eade..0000000000 --- a/src/app/layouts/tabs/tabs-sample-3/tabs-sample-3.component.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - library_music - Albums - - - Albums - - - - - favorite - Favorite - - - Favorite - - - - - info - Details - - - Details - - - diff --git a/src/app/layouts/tabs/tabs-sample-3/tabs-sample-3.component.scss b/src/app/layouts/tabs/tabs-sample-3/tabs-sample-3.component.scss deleted file mode 100644 index 03e76ccaed..0000000000 --- a/src/app/layouts/tabs/tabs-sample-3/tabs-sample-3.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -igx-tab-content { - padding: 8px; -} diff --git a/src/app/layouts/tabs/tabs-sample-3/tabs-sample-3.component.ts b/src/app/layouts/tabs/tabs-sample-3/tabs-sample-3.component.ts deleted file mode 100644 index 910a1a98bc..0000000000 --- a/src/app/layouts/tabs/tabs-sample-3/tabs-sample-3.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - -@Component({ - selector: 'app-tabs-sample-3', - styleUrls: ['./tabs-sample-3.component.scss'], - templateUrl: './tabs-sample-3.component.html', - imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxIconComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabContentComponent] -}) -export class TabsSample3Component { } diff --git a/src/app/layouts/tabs/tabs-sample-4/components/tabs-sample-4.component.html b/src/app/layouts/tabs/tabs-sample-4/components/tabs-sample-4.component.html deleted file mode 100644 index 8434b2f0b8..0000000000 --- a/src/app/layouts/tabs/tabs-sample-4/components/tabs-sample-4.component.html +++ /dev/null @@ -1,36 +0,0 @@ -
-

Current URL Path:

-

http://localhost:4200{{path}}

-
- - - - - Tab 1 - - - - - Tab 2 - - - - - Tab 3 - - - - - diff --git a/src/app/layouts/tabs/tabs-sample-4/components/tabs-sample-4.component.scss b/src/app/layouts/tabs/tabs-sample-4/components/tabs-sample-4.component.scss deleted file mode 100644 index b50d30f039..0000000000 --- a/src/app/layouts/tabs/tabs-sample-4/components/tabs-sample-4.component.scss +++ /dev/null @@ -1,24 +0,0 @@ -:host { - .url { - padding: 12px; - - &__title { - margin: 0; - padding: 0; - font-size: 14px; - font-weight: 600; - line-height: 1; - } - - &__path { - margin: 0; - padding: 0; - font-size: 13px; - } - } - - ::ng-deep p { - margin: 0; - padding: 8px; - } -} diff --git a/src/app/layouts/tabs/tabs-sample-4/components/tabs-sample-4.component.ts b/src/app/layouts/tabs/tabs-sample-4/components/tabs-sample-4.component.ts deleted file mode 100644 index 78db9b213c..0000000000 --- a/src/app/layouts/tabs/tabs-sample-4/components/tabs-sample-4.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { Component, OnInit, inject } from '@angular/core'; -import { NavigationEnd, Router, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router'; -import { filter } from 'rxjs/operators'; -import { IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; - -@Component({ - selector: 'app-tabs-sample-4', - styleUrls: ['./tabs-sample-4.component.scss'], - templateUrl: './tabs-sample-4.component.html', - imports: [IgxTabsComponent, IgxTabItemComponent, RouterLinkActive, IgxTabHeaderComponent, RouterLink, IgxTabHeaderLabelDirective, RouterOutlet] -}) -export class TabsSample4Component implements OnInit { - private router = inject(Router); - - public path: string; - - public ngOnInit() { - this.path = this.router.url; - - this.router.events.pipe( - filter(e => e instanceof NavigationEnd) - ).subscribe(args => this.path = args['url']); - } -} diff --git a/src/app/layouts/tabs/tabs-sample-4/routes.ts b/src/app/layouts/tabs/tabs-sample-4/routes.ts deleted file mode 100644 index 2ceec4061b..0000000000 --- a/src/app/layouts/tabs/tabs-sample-4/routes.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Routes } from "@angular/router"; -import { View1Component } from "../views/view1/view1.component"; -import { View2Component } from "../views/view2/view2.component"; -import { View3Component } from "../views/view3/view3.component"; -import { TabsSample4Component } from "./components/tabs-sample-4.component"; - -export const routes: Routes = [ - { - path: '', - pathMatch: 'full', - redirectTo: '/tabs-routing' - }, - { - path: 'tabs-routing', - component: TabsSample4Component, - children: [ - { path: 'view1', component: View1Component }, - { path: 'view2', component: View2Component }, - { path: 'view3', component: View3Component } - ] - }]; diff --git a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts deleted file mode 100644 index 8b13789179..0000000000 --- a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/app/layouts/tabs/tabs-states/tabs-states.component.html b/src/app/layouts/tabs/tabs-states/tabs-states.component.html new file mode 100644 index 0000000000..70a3320cd9 --- /dev/null +++ b/src/app/layouts/tabs/tabs-states/tabs-states.component.html @@ -0,0 +1,42 @@ +
+ + Active + Inactive + Disabled + Hover / Off + + + + Active + + + + + + Inactive + + + + + + Disabled + + + + + Hover / On + + + + Active + + + + + + Inactive + + + + +
diff --git a/src/app/layouts/tabs/tabs-states/tabs-states.component.scss b/src/app/layouts/tabs/tabs-states/tabs-states.component.scss new file mode 100644 index 0000000000..9e46853324 --- /dev/null +++ b/src/app/layouts/tabs/tabs-states/tabs-states.component.scss @@ -0,0 +1,61 @@ +:host { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.states { + display: grid; + grid-template-columns: 4.5rem repeat(3, 8.875rem); + align-items: center; + row-gap: 1.875rem; +} + +.state-label { + font: 400 13px / 20px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.3px; + color: var(--ig-gray-600); +} + +.state-column { + justify-self: center; +} + +.state-tabs { + grid-column: 2 / -1; + pointer-events: none; +} + +.state-tabs ::ng-deep .igx-tabs-header { + background: transparent; +} + +.state-tabs ::ng-deep .igx-tabs-header::after { + display: none; +} + +/* Each tab header sits centered in its own column, under its state label. */ +.state-tabs ::ng-deep .igx-tabs-header-scroll { + display: grid; + grid-template-columns: repeat(3, 8.875rem); +} + +.state-tabs igx-tab-header { + justify-self: center; +} + +.state-tabs igx-tab-header:not(.igx-tab-header--selected) { + border-bottom: 1px solid var(--border-color); +} + +.state-tabs igx-tab-header.hover { + color: var(--item-hover-color); + background: var(--item-hover-background); +} + +.state-tabs igx-tab-header.hover.igx-tab-header--selected { + color: var(--item-active-hover-color); + background: var(--item-active-hover-background); +} diff --git a/src/app/layouts/tabs/tabs-states/tabs-states.component.ts b/src/app/layouts/tabs/tabs-states/tabs-states.component.ts new file mode 100644 index 0000000000..5c04f283cc --- /dev/null +++ b/src/app/layouts/tabs/tabs-states/tabs-states.component.ts @@ -0,0 +1,16 @@ +import { Component, ElementRef, inject } from '@angular/core'; +import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; + +@Component({ + selector: 'app-tabs-states', + styleUrls: ['./tabs-states.component.scss'], + templateUrl: './tabs-states.component.html', + imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent] +}) +export class TabsStatesComponent { + constructor() { + // The tabs are display-only, so the keys are stopped before they reach the tab headers. + inject>(ElementRef).nativeElement + .addEventListener('keydown', (event) => event.stopPropagation(), { capture: true }); + } +} diff --git a/src/app/layouts/tabs/tabs-style/layout.scss b/src/app/layouts/tabs/tabs-style/layout.scss deleted file mode 100644 index 9554b3d83f..0000000000 --- a/src/app/layouts/tabs/tabs-style/layout.scss +++ /dev/null @@ -1,3 +0,0 @@ -igx-tab-content { - padding: 8px; -} \ No newline at end of file diff --git a/src/app/layouts/tabs/tabs-style/tabs-style.component.html b/src/app/layouts/tabs/tabs-style/tabs-style.component.html deleted file mode 100644 index 2760a1f2dc..0000000000 --- a/src/app/layouts/tabs/tabs-style/tabs-style.component.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - library_music - Albums - - - Albums - - - - - favorite - Favorite - - - Favorite - - - - - info - Details - - - Details - - - - diff --git a/src/app/layouts/tabs/tabs-style/tabs-style.component.scss b/src/app/layouts/tabs/tabs-style/tabs-style.component.scss deleted file mode 100644 index 420827ffac..0000000000 --- a/src/app/layouts/tabs/tabs-style/tabs-style.component.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use "layout.scss"; -@use "igniteui-angular/theming" as *; - -$dark-tabs: tabs-theme( - $item-background: #292826, - $item-active-color: #F4D45C, -); - -:host { - @include tokens($dark-tabs); -} diff --git a/src/app/layouts/tabs/tabs-style/tabs-style.component.ts b/src/app/layouts/tabs/tabs-style/tabs-style.component.ts deleted file mode 100644 index c0a43419e5..0000000000 --- a/src/app/layouts/tabs/tabs-style/tabs-style.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - -@Component({ - selector: 'app-tabs-style', - styleUrls: ['./tabs-style.component.scss'], - templateUrl: './tabs-style.component.html', - imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxIconComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabContentComponent] -}) -export class TabsStyleComponent { } diff --git a/src/app/layouts/tabs/tabs-styling/tabs-styling.component.html b/src/app/layouts/tabs/tabs-styling/tabs-styling.component.html new file mode 100644 index 0000000000..0333b18d91 --- /dev/null +++ b/src/app/layouts/tabs/tabs-styling/tabs-styling.component.html @@ -0,0 +1,29 @@ +
+ + + + Emily Carter + Finance lead - Sofia + Active + + + + @for (section of sections; track section.label) { + + + {{ section.label }} + + + + @for (detail of section.details; track detail.label) { + + {{ detail.label }} + {{ detail.value }} + + } + + + + } + +
diff --git a/src/app/layouts/tabs/tabs-styling/tabs-styling.component.scss b/src/app/layouts/tabs/tabs-styling/tabs-styling.component.scss new file mode 100644 index 0000000000..7c869761b0 --- /dev/null +++ b/src/app/layouts/tabs/tabs-styling/tabs-styling.component.scss @@ -0,0 +1,132 @@ +@use "sass:meta"; +@import url("https://use.typekit.net/bng2zgw.css"); +@include meta.load-css("igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light"); + +app-tabs-styling { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.profile-card { + --ig-font-family: aktiv-grotesk, sans-serif; + + display: flex; + flex-direction: column; + box-sizing: border-box; + width: 19.125rem; + height: 15.25rem; + padding: 0.5rem; + border: 1px solid #e5ebf3; + border-radius: 1rem; + background: #fff; +} + +.profile-card igx-list { + --ig-size: var(--ig-size-large); + --ig-list-background: #fff; + --ig-list-item-background: #fff; + + border: none; +} + +.profile-name { + font: 600 16px / 24px aktiv-grotesk, sans-serif; + letter-spacing: 0.15px; + color: #212121; +} + +.profile-role { + font: 600 12px / 16px aktiv-grotesk, sans-serif; + letter-spacing: 0.15px; + color: #556c86; +} + +.profile-status { + --ig-size: var(--ig-size-small); + --ig-chip-background: #cde6d1; + --ig-chip-hover-background: #cde6d1; + --ig-chip-text-color: #000; + --ig-chip-hover-text-color: #000; + --ig-chip-border-radius: 1rem; +} + +.profile-status .igx-chip__item { + font: 400 12px / 16px aktiv-grotesk, sans-serif; + letter-spacing: 0.4px; +} + +.profile-tabs { + --ig-tabs-item-background: #fff; + --ig-tabs-item-hover-background: #fff; + --ig-tabs-item-active-background: #fff; + --ig-tabs-item-active-hover-background: #fff; + --ig-tabs-item-text-color: #556c86; + --ig-tabs-item-hover-color: #344b65; + --ig-tabs-item-active-color: #0176ff; + --ig-tabs-item-active-hover-color: #0176ff; + --ig-tabs-item-disabled-color: #a9b8cc; + --ig-tabs-indicator-color: #0176ff; + --ig-tabs-border-color: transparent; + --ig-tabs-border-color--hover: transparent; + + flex: 1 1 0; + min-height: 0; +} + +.profile-tabs [igxTabHeaderLabel] { + font: 500 14px / 20px aktiv-grotesk, sans-serif; + letter-spacing: 0.25px; + text-transform: none; +} + +/* The theme draws no indicator under the selected tab, so the design's line is drawn here. */ +.profile-tabs .igx-tab-header--selected::before { + content: ""; + position: absolute; + inset: 0; + height: auto; + background: none; + box-shadow: inset 0 -2px 0 #0176ff; + z-index: -1; +} + +.profile-details { + --ig-list-border-color: #e5ebf3; + --ig-list-border-width: 1px; +} + +.profile-details igx-list-item { + box-sizing: border-box; + height: 2.25rem; +} + +/* The row's own padding sits on the item's content wrapper, which fills the row. */ +.profile-details .igx-list-item__content { + box-sizing: border-box; + height: 100%; +} + +.profile-details .igx-list-item__thumbnail { + display: none; +} + +/* The content wrapper paints the row's background, so the line above the + first row is drawn on it rather than on the item. */ +.profile-details igx-list-item:first-of-type .igx-list-item__content { + box-shadow: inset 0 1px 0 #e5ebf3; +} + +.detail-label { + font: 400 13px / 20px aktiv-grotesk, sans-serif; + letter-spacing: 0.3px; + color: #344b65; +} + +.detail-value { + font: 600 12px / 16px "Titillium Web", sans-serif; + letter-spacing: 0.15px; + color: #344b65; +} diff --git a/src/app/layouts/tabs/tabs-styling/tabs-styling.component.ts b/src/app/layouts/tabs/tabs-styling/tabs-styling.component.ts new file mode 100644 index 0000000000..ce32ea444b --- /dev/null +++ b/src/app/layouts/tabs/tabs-styling/tabs-styling.component.ts @@ -0,0 +1,63 @@ +import { Component, ViewEncapsulation } from '@angular/core'; +import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { IgxChipComponent } from 'igniteui-angular/chips'; +import { IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListThumbnailDirective } from 'igniteui-angular/list'; +import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; + +interface ProfileDetail { + label: string; + value: string; +} + +interface ProfileSection { + label: string; + disabled?: boolean; + details: ProfileDetail[]; +} + +@Component({ + selector: 'app-tabs-styling', + encapsulation: ViewEncapsulation.None, + styleUrls: ['./tabs-styling.component.scss'], + templateUrl: './tabs-styling.component.html', + imports: [ + IgxTabsComponent, + IgxTabItemComponent, + IgxTabHeaderComponent, + IgxTabHeaderLabelDirective, + IgxTabContentComponent, + IgxListComponent, + IgxListItemComponent, + IgxListThumbnailDirective, + IgxListLineTitleDirective, + IgxListLineSubTitleDirective, + IgxListActionDirective, + IgxAvatarComponent, + IgxChipComponent + ] +}) +export class TabsStylingComponent { + public sections: ProfileSection[] = [ + { + label: 'Overview', + details: [ + { label: 'Email', value: 'emily.carter@gmail.com' }, + { label: 'Team', value: 'Finance, 8 members' }, + { label: 'Joined', value: 'March 2023' } + ] + }, + { + label: 'Activity', + details: [ + { label: 'Last login', value: 'Today, 09:24' }, + { label: 'Reports', value: '12 this month' }, + { label: 'Approvals', value: '3 pending' } + ] + }, + { + label: 'Billing', + disabled: true, + details: [] + } + ]; +} diff --git a/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.html b/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.html deleted file mode 100644 index cf197ad919..0000000000 --- a/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - library_music - Albums - - - Albums - - - - - favorite - Favorite - - - Favorite - - - - - info - Details - - - Details - - - - diff --git a/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.scss b/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.scss deleted file mode 100644 index 3fc770ecd1..0000000000 --- a/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.scss +++ /dev/null @@ -1,4 +0,0 @@ -igx-tab-content { - padding: 8px; -} - diff --git a/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.ts b/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.ts deleted file mode 100644 index 1a1a925db8..0000000000 --- a/src/app/layouts/tabs/tabs-tailwind-style/tabs-tailwind-style.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - -@Component({ - selector: 'app-tabs-tailwind-style', - styleUrls: ['./tabs-tailwind-style.component.scss'], - templateUrl: './tabs-tailwind-style.component.html', - imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxIconComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabContentComponent] -}) -export class TabsTailwindStyleComponent { } diff --git a/src/app/layouts/tabs/tabs-tailwind-styling/tabs-tailwind-styling.component.html b/src/app/layouts/tabs/tabs-tailwind-styling/tabs-tailwind-styling.component.html new file mode 100644 index 0000000000..a0261eb8c8 --- /dev/null +++ b/src/app/layouts/tabs/tabs-tailwind-styling/tabs-tailwind-styling.component.html @@ -0,0 +1,13 @@ + + @for (destination of destinations; track destination.label) { + + + + {{ destination.label }} + + + + } + diff --git a/src/app/layouts/tabs/tabs-tailwind-styling/tabs-tailwind-styling.component.scss b/src/app/layouts/tabs/tabs-tailwind-styling/tabs-tailwind-styling.component.scss new file mode 100644 index 0000000000..d3003f13ef --- /dev/null +++ b/src/app/layouts/tabs/tabs-tailwind-styling/tabs-tailwind-styling.component.scss @@ -0,0 +1,17 @@ +@use "sass:meta"; +@import url("https://use.typekit.net/bng2zgw.css"); +@include meta.load-css("igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light"); + +app-tabs-tailwind-styling { + /* The navigation palette that the utilities in the template read. */ + --color-nav-surface: #112031; + --color-nav-hover: #1a314a; + --color-nav-active: #006ae6; + --color-nav-ink: #3392ff; + + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} diff --git a/src/app/layouts/tabs/tabs-tailwind-styling/tabs-tailwind-styling.component.ts b/src/app/layouts/tabs/tabs-tailwind-styling/tabs-tailwind-styling.component.ts new file mode 100644 index 0000000000..b44a4ce596 --- /dev/null +++ b/src/app/layouts/tabs/tabs-tailwind-styling/tabs-tailwind-styling.component.ts @@ -0,0 +1,41 @@ +import { Component, inject, ViewEncapsulation } from '@angular/core'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; +import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; + +const homeIcon = ''; +const placeIcon = ''; +const notificationsIcon = ''; +const messengerIcon = ''; +const personIcon = ''; + +interface Destination { + label: string; + icon: string; + selected?: boolean; +} + +@Component({ + selector: 'app-tabs-tailwind-styling', + encapsulation: ViewEncapsulation.None, + styleUrls: ['./tabs-tailwind-styling.component.scss'], + templateUrl: './tabs-tailwind-styling.component.html', + imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxIconComponent] +}) +export class TabsTailwindStylingComponent { + public destinations: Destination[] = [ + { label: 'Home', icon: 'home' }, + { label: 'Location', icon: 'place', selected: true }, + { label: 'Alerts', icon: 'notifications' }, + { label: 'Chat', icon: 'messenger' }, + { label: 'Profile', icon: 'person' } + ]; + + constructor() { + const iconService = inject(IgxIconService); + iconService.addSvgIconFromText('home', homeIcon, 'material'); + iconService.addSvgIconFromText('place', placeIcon, 'material'); + iconService.addSvgIconFromText('notifications', notificationsIcon, 'material'); + iconService.addSvgIconFromText('messenger', messengerIcon, 'material'); + iconService.addSvgIconFromText('person', personIcon, 'material'); + } +} diff --git a/src/app/layouts/tabs/tabs-type/tabs-type.component.html b/src/app/layouts/tabs/tabs-type/tabs-type.component.html new file mode 100644 index 0000000000..47f9b69a84 --- /dev/null +++ b/src/app/layouts/tabs/tabs-type/tabs-type.component.html @@ -0,0 +1,25 @@ +
+ Short Bar + + @for (step of steps; track step.label) { + + + {{ step.label }} + + + + } + + Tall Bar + + @for (step of steps; track step.label) { + + + + {{ step.label }} + + + + } + +
diff --git a/src/app/layouts/tabs/tabs-type/tabs-type.component.scss b/src/app/layouts/tabs/tabs-type/tabs-type.component.scss new file mode 100644 index 0000000000..e1959d6dcb --- /dev/null +++ b/src/app/layouts/tabs/tabs-type/tabs-type.component.scss @@ -0,0 +1,20 @@ +:host { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.types { + display: grid; + grid-template-columns: 6.1875rem 33.125rem; + align-items: center; + row-gap: 3.75rem; +} + +.type-label { + font: 400 13px / 20px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.3px; + color: var(--ig-gray-600); +} diff --git a/src/app/layouts/tabs/tabs-type/tabs-type.component.ts b/src/app/layouts/tabs/tabs-type/tabs-type.component.ts new file mode 100644 index 0000000000..af2137215e --- /dev/null +++ b/src/app/layouts/tabs/tabs-type/tabs-type.component.ts @@ -0,0 +1,33 @@ +import { Component, inject } from '@angular/core'; +import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; +import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; + +const shoppingBasketIcon = ''; +const deliveryIcon = ''; +const creditCardIcon = ''; + +interface Step { + label: string; + icon: string; +} + +@Component({ + selector: 'app-tabs-type', + styleUrls: ['./tabs-type.component.scss'], + templateUrl: './tabs-type.component.html', + imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabHeaderIconDirective, IgxTabContentComponent, IgxIconComponent] +}) +export class TabsTypeComponent { + public steps: Step[] = [ + { label: 'Cart', icon: 'shopping_basket' }, + { label: 'Shipping', icon: 'delivery' }, + { label: 'Payment', icon: 'credit_card' } + ]; + + constructor() { + const iconService = inject(IgxIconService); + iconService.addSvgIconFromText('shopping_basket', shoppingBasketIcon, 'material'); + iconService.addSvgIconFromText('delivery', deliveryIcon, 'material'); + iconService.addSvgIconFromText('credit_card', creditCardIcon, 'material'); + } +} diff --git a/src/app/layouts/tabs/views/view1/view1.component.html b/src/app/layouts/tabs/views/view1/view1.component.html deleted file mode 100644 index 4a3ac08321..0000000000 --- a/src/app/layouts/tabs/views/view1/view1.component.html +++ /dev/null @@ -1 +0,0 @@ -

Tab 1 Content

diff --git a/src/app/layouts/tabs/views/view1/view1.component.ts b/src/app/layouts/tabs/views/view1/view1.component.ts deleted file mode 100644 index b9b28ff9af..0000000000 --- a/src/app/layouts/tabs/views/view1/view1.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-view1', - templateUrl: './view1.component.html' -}) -export class View1Component { } diff --git a/src/app/layouts/tabs/views/view2/view2.component.html b/src/app/layouts/tabs/views/view2/view2.component.html deleted file mode 100644 index b646f1ffa0..0000000000 --- a/src/app/layouts/tabs/views/view2/view2.component.html +++ /dev/null @@ -1 +0,0 @@ -

Tab 2 Content

diff --git a/src/app/layouts/tabs/views/view2/view2.component.ts b/src/app/layouts/tabs/views/view2/view2.component.ts deleted file mode 100644 index 8dcb038e37..0000000000 --- a/src/app/layouts/tabs/views/view2/view2.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-view2', - templateUrl: './view2.component.html' -}) -export class View2Component { } diff --git a/src/app/layouts/tabs/views/view3/view3.component.html b/src/app/layouts/tabs/views/view3/view3.component.html deleted file mode 100644 index 1c8a18174d..0000000000 --- a/src/app/layouts/tabs/views/view3/view3.component.html +++ /dev/null @@ -1,2 +0,0 @@ -

Tab 3 Content

- diff --git a/src/app/layouts/tabs/views/view3/view3.component.ts b/src/app/layouts/tabs/views/view3/view3.component.ts deleted file mode 100644 index a02c858866..0000000000 --- a/src/app/layouts/tabs/views/view3/view3.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-view3', - templateUrl: './view3.component.html' -}) -export class View3Component { }