diff --git a/src/app/all-components/all-components.component.html b/src/app/all-components/all-components.component.html index 0b9f7c7..eb5b615 100644 --- a/src/app/all-components/all-components.component.html +++ b/src/app/all-components/all-components.component.html @@ -71,13 +71,9 @@ - - - person - - + - Default with Subtitle and Avatar + Image asset Subtitle... @@ -87,9 +83,25 @@ - + + + Image URL + Subtitle... + + + keyboard_arrow_right + + + + + + + + person + + - Image Avatar + Default with Subtitle and Avatar Subtitle... @@ -598,12 +610,15 @@
people - - - + + + + + +
diff --git a/src/app/all-components/all-components.component.scss b/src/app/all-components/all-components.component.scss index 6f8eee6..27a931d 100644 --- a/src/app/all-components/all-components.component.scss +++ b/src/app/all-components/all-components.component.scss @@ -13,7 +13,7 @@ .group { justify-content: flex-start; align-items: stretch; - align-content: flex-start; + align-content: stretch; gap: 24px; overflow: auto; position: relative; @@ -33,7 +33,7 @@ align-content: flex-start; gap: 24px; position: relative; - min-width: 400px; + min-width: 320px; min-height: 50px; flex-grow: 1; flex-basis: 0; @@ -86,7 +86,7 @@ gap: 16px; overflow: auto; position: relative; - min-width: 50px; + min-width: 320px; min-height: 50px; flex-grow: 1; flex-basis: 0; @@ -165,7 +165,7 @@ align-content: flex-start; gap: 16px; position: relative; - min-width: 50px; + min-width: 240px; min-height: 50px; flex-grow: 1; flex-basis: 0; diff --git a/src/app/all-components/all-components.component.ts b/src/app/all-components/all-components.component.ts index 9f20700..27318ca 100644 --- a/src/app/all-components/all-components.component.ts +++ b/src/app/all-components/all-components.component.ts @@ -4,8 +4,8 @@ import { IgcFormsModule, IGX_ACCORDION_DIRECTIVES, IGX_BANNER_DIRECTIVES, IGX_BU import { IgxCategoryChartModule } from 'igniteui-angular-charts'; import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents'; import { Subject, takeUntil } from 'rxjs'; -import { BoxOfficeRevenueType } from '../models/financial/box-office-revenue-type'; import { EmployeesType } from '../models/northwind/employees-type'; +import { BoxOfficeRevenueType } from '../models/financial/box-office-revenue-type'; import { FinancialService } from '../services/financial.service'; import { NorthwindService } from '../services/northwind.service'; diff --git a/src/app/app.component.html b/src/app/app.component.html index d91535e..5751e14 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -55,6 +55,12 @@
Forms
+
+ + view_list + + Lists +
radio_button_checked diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 74faf00..8a01ef3 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -5,6 +5,7 @@ import { AllComponentsComponent } from './all-components/all-components.componen import { AvatarsImagesComponent } from './avatars-images/avatars-images.component'; import { CalendarComponent } from './calendar/calendar.component'; import { FormsComponent } from './forms/forms.component'; +import { ListsComponent } from './lists/lists.component'; import { RadiogroupComponent } from './radiogroup/radiogroup.component'; import { StepperComponent } from './stepper/stepper.component'; @@ -15,6 +16,7 @@ export const routes: Routes = [ { path: 'avatars-images', component: AvatarsImagesComponent, data: { text: 'Avatars-Images' } }, { path: 'calendar', component: CalendarComponent, data: { text: 'Calendar' } }, { path: 'forms', component: FormsComponent, data: { text: 'Forms' } }, + { path: 'lists', component: ListsComponent, data: { text: 'Lists' } }, { path: 'radiogroup', component: RadiogroupComponent, data: { text: 'Radiogroup' } }, { path: 'stepper', component: StepperComponent, data: { text: 'Stepper' } }, { path: '**', component: PageNotFoundComponent } // must always be last diff --git a/src/app/lists/lists.component.html b/src/app/lists/lists.component.html new file mode 100644 index 0000000..f1fd2f0 --- /dev/null +++ b/src/app/lists/lists.component.html @@ -0,0 +1,232 @@ +
+
+ + Header + + Single Line Item Default + + + keyboard_arrow_right + + + + + Single Line Item Default + + + Single Line Item Default + + + keyboard_arrow_right + + + + + + Header + + Subtitle... + + + keyboard_arrow_right + + + + + Subtitle... + + + keyboard_arrow_right + + + + + Subtitle... + + + keyboard_arrow_right + + + + + + Header + + + + + person + + + + Single Line Item Default + + + keyboard_arrow_right + + + + + + + + person + + + + Single Line Item Default + + + keyboard_arrow_right + + + + + + + + person + + + + Single Line Item Default + + + keyboard_arrow_right + + + + + + Header + + + + + Single Line Item Default + + + keyboard_arrow_right + + + + + + + + Single Line Item Default + + + keyboard_arrow_right + + + + + + + + Single Line Item Default + + + keyboard_arrow_right + + + + +
+
+ + Header + + Image URL + Subtitle... + + + Image URL + Subtitle... + + + Image URL + Subtitle... + + + + Header + + + + + Image URL + Subtitle... + + + keyboard_arrow_right + + + + + + + + Image URL + Subtitle... + + + keyboard_arrow_right + + + + + + + + Image URL + Subtitle... + + + keyboard_arrow_right + + + + + + Header + + + + + Default with Subtitle and Avatar + Subtitle... + + + keyboard_arrow_right + + + + + + + + Default with Subtitle and Avatar + Subtitle... + + + keyboard_arrow_right + + + + + + + + Default with Subtitle and Avatar + Subtitle... + + + keyboard_arrow_right + + + + +
+
diff --git a/src/app/lists/lists.component.scss b/src/app/lists/lists.component.scss new file mode 100644 index 0000000..6841835 --- /dev/null +++ b/src/app/lists/lists.component.scss @@ -0,0 +1,44 @@ +:host { + height: 100%; + display: flex; + justify-content: flex-start; + align-items: stretch; + align-content: flex-start; +} +.row-layout { + display: flex; +} +.group { + justify-content: center; + align-items: center; + align-content: flex-start; + gap: 24px; + position: relative; + min-width: 50px; + min-height: 50px; + flex-grow: 1; + flex-basis: 0; +} +.column-layout { + display: flex; + flex-direction: column; +} +.group_1 { + justify-content: flex-start; + align-items: stretch; + align-content: flex-start; + gap: 24px; + position: relative; +} +.list { + height: max-content; +} +.icon { + --size: 24px; + font-size: 24px; + width: 24px; + height: 24px; +} +.avatar { + --igx-avatar-background: transparent; +} diff --git a/src/app/lists/lists.component.spec.ts b/src/app/lists/lists.component.spec.ts new file mode 100644 index 0000000..77fdcef --- /dev/null +++ b/src/app/lists/lists.component.spec.ts @@ -0,0 +1,29 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { FormsModule } from '@angular/forms'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; + +import { IGX_LIST_DIRECTIVES, IgxIconComponent, IgxAvatarComponent } from '@infragistics/igniteui-angular'; +import { ListsComponent } from './lists.component'; + +describe('ListsComponent', () => { + let component: ListsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ListsComponent ], + imports: [ NoopAnimationsModule, FormsModule, IGX_LIST_DIRECTIVES, IgxIconComponent, IgxAvatarComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ListsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/lists/lists.component.ts b/src/app/lists/lists.component.ts new file mode 100644 index 0000000..f7b916e --- /dev/null +++ b/src/app/lists/lists.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; +import { IGX_LIST_DIRECTIVES, IgxAvatarComponent, IgxIconComponent } from '@infragistics/igniteui-angular'; + +@Component({ + selector: 'app-lists', + standalone: true, + imports: [IGX_LIST_DIRECTIVES, IgxIconComponent, IgxAvatarComponent], + templateUrl: './lists.component.html', + styleUrls: ['./lists.component.scss'] +}) +export class ListsComponent {}