Angular List View 구성 요소 개요
Ignite UI for Angular 항목 행을 표시하고 하나 이상의 헤더 항목과 목록 항목의 검색 및 필터링을 지원합니다. 각 목록 항목은 완전히 템플릿화할 수 있으며 모든 유효한 HTML 또는 Angular 구성 요소를 지원합니다. 목록 구성 요소는 또한 내장된 패닝 기능, 비어 있는 상태 및 로드 중인 상태에 대한 템플릿을 제공하고 IgxForOf
지시문을 사용하여 큰 목록에 대한 가상화를 지원합니다.
Angular 목록 예제
다음 예는 이름 과 전화번호 속성이 있는 연락처로 채워진 목록을 나타냅니다. IgxList
구성 요소는 igx-avatar
및 igx-icon
사용하여 사용자 경험을 풍부하게 하고 연락처 즐겨찾기 에 대한 아바타 사진 및 다양한 아이콘 설정 기능을 제공합니다. 또한 목록 보기에는 필터링 파이프를 사용하여 달성된 정렬 기능이 표시됩니다.
import { Component, HostBinding, OnInit } from '@angular/core' ;
import { IgxFilterOptions, IgxButtonGroupComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxFilterPipe } from 'igniteui-angular' ;
import { FormsModule } from '@angular/forms' ;
import { NgIf, NgFor } from '@angular/common' ;
@Component ({
selector : 'app-contact-list2' ,
styleUrls : ['./list-sample-4.component.scss' ],
templateUrl : './list-sample-4.component.html' ,
imports : [IgxButtonGroupComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, NgIf, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, NgFor, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxFilterPipe]
})
export class ListSample4Component implements OnInit {
public searchContact: string ;
public contacts = [
{
isFavorite : false ,
name : 'Terrance Orta' ,
phone : '770-504-2217' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/men/27.jpg'
},
{
isFavorite : true ,
name : 'Richard Mahoney' ,
phone : '423-676-2869' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/men/1.jpg'
},
{
isFavorite : false ,
name : 'Donna Price' ,
phone : '859-496-2817' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/women/50.jpg'
},
{
isFavorite : false ,
name : 'Lisa Landers' ,
phone : '901-747-3428' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/women/3.jpg'
},
{
isFavorite : true ,
name : 'Dorothy H. Spencer' ,
phone : '573-394-9254' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/women/67.jpg'
}
];
public size = 'large' ;
public sizes;
constructor ( ) { }
public ngOnInit ( ) {
this .sizes = [
{ label : 'large' , selected : this .size === 'large' , togglable : true },
{ label : 'medium' , selected : this .size === 'medium' , togglable : true },
{ label : 'small' , selected : this .size === 'small' , togglable : true }
];
}
@HostBinding ('style.--ig-size' )
protected get sizeStyle () {
return `var(--ig-size-${this .size} )` ;
}
public selectSize (event ) {
this .size = this .sizes[event.index].label;
}
public toggleFavorite (contact: any , event: Event ) {
event.stopPropagation();
contact.isFavorite = !contact.isFavorite;
}
get filterContacts () {
const fo = new IgxFilterOptions();
fo.key = 'name' ;
fo.inputValue = this .searchContact;
return fo;
}
public mousedown (event: Event ) {
event.stopPropagation();
}
}
ts コピー <div class ="density-chooser" >
<igx-buttongroup [values ]="sizes" (selected )="selectSize($event)" > </igx-buttongroup >
</div >
<igx-input-group type ="search" class ="search" >
<igx-prefix >
<igx-icon > search</igx-icon >
</igx-prefix >
<input #search igxInput placeholder ="Search Contacts" [(ngModel )]="searchContact" >
<igx-suffix *ngIf ="search.value.length > 0" (click )="searchContact = null" >
<igx-icon > clear</igx-icon >
</igx-suffix >
</igx-input-group >
<div class ="list-sample" >
<igx-list >
<igx-list-item [isHeader ]="true" > Contacts</igx-list-item >
<igx-list-item igxRipple igxRippleTarget =".igx-list__item-content" #item
*ngFor ="let contact of contacts | igxFilter: filterContacts;" >
<igx-avatar igxListThumbnail [src ]="contact.photo" shape ="circle" > </igx-avatar >
<span igxListLineTitle > {{ contact.name }}</span >
<span igxListLineSubTitle > {{ contact.phone }}</span >
<igx-icon igxListAction [style.color ]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple ="pink"
[igxRippleCentered ]="true" (click )="toggleFavorite(contact, $event)"
(mousedown )="mousedown($event)" > star</igx-icon >
</igx-list-item >
</igx-list >
</div >
html コピー :host {
display : block;
padding : 16px ;
}
.list-sample {
box-shadow : 0px 1px 3px 0px rgba(0 , 0 , 0 , 0.2 ),
0px 1px 1px 0px rgba(0 , 0 , 0 , 0.14 ),
0px 2px 1px -1px rgba(0 , 0 , 0 , 0.12 );
}
.density-chooser {
margin-bottom : 16px ;
}
igx-icon {
cursor : pointer;
position : relative;
}
.search {
margin-bottom : 16px ;
}
scss コピー
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
Ignite UI for Angular 목록 시작하기
Ignite UI for Angular List View 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.
ng add igniteui-angular
cmd
Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.
다음 단계는 IgxListModule
에서 app.module.ts 파일.
이 구성 요소는 HammerModule
필요 . 터치 조작이 예상대로 작동하도록 응용 프로그램의 루트 모듈로 가져올 수 있습니다. .
import { HammerModule } from '@angular/platform-browser' ;
import { IgxListModule } from 'igniteui-angular' ;
@NgModule ({
...
imports : [..., IgxListModule, HammerModule],
...
})
export class AppModule {}
typescript
또는 16.0.0
부터 IgxListComponent
독립 실행형 종속성으로 가져오거나 IGX_LIST_DIRECTIVES
토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시어를 가져올 수 있습니다.
import { HammerModule } from '@angular/platform-browser' ;
import { IGX_LIST_DIRECTIVES } from 'igniteui-angular' ;
@Component ({
selector : 'app-home' ,
template : `
<igx-list>
<igx-list-item isHeader="true">Header</igx-list-item>
<igx-list-item>Item 1</igx-list-item>
<igx-list-item>Item 2</igx-list-item>
<igx-list-item>Item 3</igx-list-item>
</igx-list>
` ,
styleUrls : ['home.component.scss' ],
standalone : true ,
imports : [IGX_LIST_DIRECTIVES, HammerModule]
})
export class HomeComponent {}
typescript
이제 Ignite UI for Angular List 모듈이나 지침을 가져왔으므로 igx-list
구성 요소를 사용할 수 있습니다.
Angular List 사용하기
그런 다음 연락처 구성 요소의 템플릿에서 목록을 만들 수 있지만 현재(또는 미래의 어느 시점) 목록에 항목이 없는 경우는 어떻게 할까요? 이 경우 Angular 목록은 목록이 비어 있을 때 사용되는 기본 템플릿을 제공합니다. igxEmptyList
지시문을 사용하여 비어 있는 목록의 모양에 대한 자체 템플릿을 항상 제공할 수 있습니다. 이 경우 기본 템플릿은 사용되지 않습니다.
<igx-list >
<ng-template igxEmptyList >
<p class ="empty" > No contacts! :(</p >
</ng-template >
</igx-list >
html
빈 템플릿에 대한 스타일은 다음과 같습니다.
.empty {
color : rgba (0 , 153 , 255 , 1 );
font-size : 25px ;
font-weight : 600 ;
text-shadow : 2px 1px 2px rgba (150 , 150 , 150 , 1 );
}
css
모든 것이 잘 되었다면 빈 목록은 다음과 같습니다.
import { Component } from '@angular/core' ;
import { IgxListComponent, IgxEmptyListTemplateDirective } from 'igniteui-angular' ;
@Component ({
selector : 'app-list-sample-5' ,
styleUrls : ['./list-sample-5.component.scss' ],
templateUrl : './list-sample-5.component.html' ,
imports : [IgxListComponent, IgxEmptyListTemplateDirective]
})
export class ListSample5Component {
constructor ( ) { }
}
ts コピー <igx-list >
<ng-template igxEmptyList >
<p class ="empty" > No contacts! :(</p >
</ng-template >
</igx-list >
html コピー .empty {
color : rgba(0 , 153 , 255 , 1 );
font-size : 25px ;
font-weight : 600 ;
text-shadow : 2px 1px 2px rgba(150 , 150 , 150 , 1 );
}
scss コピー
때로는 데이터 로딩이 지연될 수 있습니다. 이 경우 목록의 isLoading
속성을 true
로 설정할 수 있으며 기본 템플릿은 진행 중인 데이터 로드 프로세스에 대해 사용자에게 알립니다. igxDataLoading
지시문을 사용하여 자체 로딩 템플릿을 제공할 수도 있습니다.
<igx-list >
<ng-template igxDataLoading >
<p class ="loading" > Patience, we are currently loading your data...</p >
</ng-template >
</igx-list >
html
.loading {
color : rgba (255 , 153 , 0 , 1 );
font-size : 25px ;
font-weight : 600 ;
text-shadow : 2px 1px 2px rgba (150 , 150 , 150 , 1 );
}
css
import { Component, ViewChild } from '@angular/core' ;
import { IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxEmptyListTemplateDirective, IgxButtonDirective, IgxDataLoadingTemplateDirective } from 'igniteui-angular' ;
import { NgFor } from '@angular/common' ;
@Component ({
selector : 'app-list-sample-6' ,
styleUrls : ['./list-sample-6.component.scss' ],
templateUrl : './list-sample-6.component.html' ,
imports : [IgxListComponent, NgFor, IgxListItemComponent, IgxRippleDirective, IgxEmptyListTemplateDirective, IgxButtonDirective, IgxDataLoadingTemplateDirective]
})
export class ListSample6Component {
@ViewChild ('fruitList' , { static : true })
public fruitList: IgxListComponent;
public fruitsData: string [] = [];
constructor ( ) { }
public loadFruits ( ) {
this .fruitList.isLoading = true ;
setTimeout (() => {
const availableFruits: string [] = ['banana' , 'orange' , 'apple' , 'strawberry' , 'pear' ];
availableFruits.forEach((fruit ) => { this .fruitsData.push(fruit); });
this .fruitList.isLoading = false ;
}, 1000 );
}
}
ts コピー <igx-list #fruitList >
<igx-list-item *ngFor ="let fruit of fruitsData" igxRipple igxRippleTarget =".igx-list__item-content" >
{{ fruit }}
</igx-list-item >
<ng-template igxEmptyList >
<div class ="center" > <button type ="button" igxButton ="contained" (click )="loadFruits()" > Load data</button > </div >
</ng-template >
<ng-template igxDataLoading >
<div class ="center" > <span > Patience, we are currently loading your data...</span > </div >
</ng-template >
</igx-list >
html コピー .center {
display : flex;
align-items : center;
justify-content : center;
color : #999 ;
font-size : 24px ;
height : 100% ;
}
scss コピー
목록 항목 추가
목록이 비어 있을 때를 위한 템플릿이 있으면 좋지만 이제 몇 가지 항목을 추가해 보겠습니다. 다음 코드를 추가하여 간단한 항목 목록을 얻을 수 있습니다.
<igx-list >
<igx-list-item isHeader ="true" > Header</igx-list-item >
<igx-list-item > Item 1</igx-list-item >
<igx-list-item > Item 2</igx-list-item >
<igx-list-item > Item 3</igx-list-item >
</igx-list >
html
모든 것이 순조롭게 진행되면 브라우저에 다음이 표시됩니다.
import { Component } from '@angular/core' ;
import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular' ;
@Component ({
selector : 'app-igx-list-simple' ,
styleUrls : ['./list-sample-2.component.scss' ],
templateUrl : './list-sample-2.component.html' ,
imports : [IgxListComponent, IgxListItemComponent]
})
export class ListSample2Component {
constructor ( ) {}
}
ts コピー <igx-list >
<igx-list-item [isHeader ]="true" > Header</igx-list-item >
<igx-list-item > Item 1</igx-list-item >
<igx-list-item > Item 2</igx-list-item >
<igx-list-item > Item 3</igx-list-item >
</igx-list >
html コピー
게임을 조금 더 강화하고 목록 항목을 강화해 보겠습니다. 이름과 이름 아래에 전화번호가 표시된 연락처의 Angular 목록을 만들고 싶다고 가정해 보겠습니다. 구성 요소 타입스크립트 파일에서 연락처 목록을 정의할 수 있습니다.
...
public contacts = [{
name : "Terrance Orta" ,
phone : "770-504-2217"
}, {
name : "Richard Mahoney" ,
phone : "423-676-2869"
}, {
name : "Donna Price" ,
phone : "859-496-2817"
}, {
name : "Lisa Landers" ,
phone : "901-747-3428"
}, {
name : "Dorothy H. Spencer" ,
phone : "573-394-9254"
}];
typescript
이제 렌더링할 데이터가 있으므로 일부 마크업을 설정해 보겠습니다. 기본적으로 스타일을 지정하려면 목록 항목과 함께 제공되는 일부 지시문을 사용할 수 있습니다.
다음 예제에서 그 중 일부를 어떻게 사용할 수 있는지 살펴보겠습니다.
<igx-list >
<igx-list-item isHeader ="true" >
Contacts
</igx-list-item >
<igx-list-item *ngFor ="let contact of contacts" >
<h4 igxListLineTitle > {{ contact.name }}</h4 >
<p igxListLineSubTitle > {{ contact.phone }}</p >
</igx-list-item >
</igx-list >
html
igxListLineTitle
및 igxListLineSubTitle
지시어 모두 목록 항목에 기본 모양을 제공합니다.
이제 Angular 목록은 다음과 같아야 합니다.
import { Component } from '@angular/core' ;
import { IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective } from 'igniteui-angular' ;
import { NgFor } from '@angular/common' ;
@Component ({
selector : 'app-contact-list' ,
styleUrls : ['./list-sample-3.component.scss' ],
templateUrl : './list-sample-3.component.html' ,
imports : [IgxListComponent, IgxListItemComponent, NgFor, IgxRippleDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective]
})
export class ListSample3Component {
public contacts = [
{
name : 'Terrance Orta' ,
phone : '770-504-2217'
},
{
name : 'Richard Mahoney' ,
phone : '423-676-2869'
},
{
name : 'Donna Price' ,
phone : '859-496-2817'
},
{
name : 'Lisa Landers' ,
phone : '901-747-3428'
},
{
name : 'Dorothy H. Spencer' ,
phone : '573-394-9254'
}
];
constructor ( ) { }
}
ts コピー <igx-list >
<igx-list-item [isHeader ]="true" >
Contacts
</igx-list-item >
<igx-list-item *ngFor ="let contact of contacts" igxRipple igxRippleTarget =".igx-list__item-content" >
<span igxListLineTitle > {{ contact.name }}</span >
<span igxListLineSubTitle > {{contact.phone}}</span >
</igx-list-item >
</igx-list >
html コピー
아바타 및 아이콘 추가
IgxList
구성 요소와 함께 다른 구성 요소 중 일부를 사용하여 경험을 풍부하게 하고 일부 기능을 추가할 수 있습니다. 이름과 전화번호 왼쪽에 멋진 사진 아바타가 있을 수 있습니다. 또한 사용자가 연락처를 즐겨찾기에 추가할 수 있도록 오른쪽에 별표 아이콘을 추가할 수 있습니다. 이를 위해 IgxAvatar 및 IgxIcon 모듈을 가져와 app.module.ts 파일로 가져옵니다.
...
import {
IgxListModule,
IgxAvatarModule,
IgxIconModule
} from 'igniteui-angular' ;
@NgModule ({
...
imports : [..., IgxAvatarModule, IgxIconModule],
})
export class AppModule {}
typescript
다음으로 아바타의 photo
소스와 연락처의 즐겨찾기 상태를 나타내는 isFavorite
속성과 같은 추가 정보를 연락처 개체에 추가해야 합니다.
public contacts = [{
name : 'Terrance Orta' ,
phone : '770-504-2217' ,
photo : 'https://randomuser.me/api/portraits/men/27.jpg' ,
isFavorite : false
}, {
name : 'Richard Mahoney' ,
phone : '423-676-2869' ,
photo : 'https://randomuser.me/api/portraits/men/1.jpg' ,
isFavorite : true
}, {
name : 'Donna Price' ,
phone : '859-496-2817' ,
photo : 'https://randomuser.me/api/portraits/women/50.jpg' ,
isFavorite : false
}, {
name : 'Lisa Landers' ,
phone : '901-747-3428' ,
photo : 'https://randomuser.me/api/portraits/women/3.jpg' ,
isFavorite : false
}, {
name : 'Dorothy H. Spencer' ,
phone : '573-394-9254' ,
photo : 'https://randomuser.me/api/portraits/women/67.jpg' ,
isFavorite : true
}];
typescript
좋습니다. 이제 연락처 목록의 템플릿을 업데이트하여 아바타와 아이콘을 표시해 보겠습니다. 이번에도 목록 지시문 중 일부를 사용하여 이를 수행할 수 있습니다.
<igx-list >
<igx-list-item isHeader ="true" >
Contacts
</igx-list-item >
<igx-list-item #item *ngFor ="let contact of contacts;" >
<igx-avatar igxListThumbnail [src ]="contact.photo" shape ="circle" > </igx-avatar >
<h4 igxListLineTitle > {{ contact.name }}</h4 >
<p igxListLineSubTitle class ="phone" > {{ contact.phone }}</p >
<span igxListLine > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, laborum.</span >
<igx-icon igxListAction [color ]="contact.isFavorite ? 'orange' : 'lightgray'" (click )="toggleFavorite(item)" > star</igx-icon >
</igx-list-item >
</igx-list >
html
igxListThumbnail
목록 항목 시작 부분에 일종의 미디어를 추가해야 하는 경우에 사용됩니다. 지시문은 기본 위치와 간격을 제공하는 컨테이너의 igx-avatar 사례에서 대상 요소를 래핑합니다.
igxListAction
일종의 작업이나 메타데이터(예: 스위치, 라디오 버튼, 확인란 등)가 있는 목록 항목에 사용됩니다. 이 경우 작업은 igx-icon
으로 표시됩니다. 이번에도 지시문은 올바른 위치와 간격을 갖는 컨테이너에 대상 요소를 래핑합니다.
igxListLine
igxListThumbnail
과 igxListAction
사이에 일부 텍스트가 필요한 경우 사용하기 위한 것입니다. 이 지시문은 텍스트 위치, 간격 및 정렬이 다른 두 지시문과 잘 어울리는지 확인합니다.
다음으로 우리는 Igx아이콘 토글하는 구성 요소 즐겨찾기 연락처 개체의 속성입니다.
...
toggleFavorite (item: IgxListItem ) {
const contact = this .contacts[item.index - 1 ];
contact.isFavorite = !contact.isFavorite;
}
typescript
또한--ig-size
CSS 사용자 정의 속성을 사용하여 사용자가 목록의 크기를 선택할 수 있도록 허용하겠습니다. IgxButtonGroupModule
을 가져오고 IgxButtonGroup을 사용하여 모든 크기 값을 표시하면 됩니다. 이렇게 하면 하나가 선택될 때마다 목록의 크기가 업데이트됩니다.
...
import { IgxButtonGroupModule } from 'igniteui-angular' ;
@NgModule ({
imports : [..., IgxButtonGroupModule]
})
typescript
<igx-buttongroup [values ]="sizes" (selected )="selectSize($event)" > </igx-buttongroup >
...
<igx-list >
...
</igx-list >
html
public size = 'large' ;
public sizes;
public ngOnInit ( ) {
this .sizes = [
{ label : 'large' , selected : this .size === 'large' , togglable : true },
{ label : 'medium' , selected : this .size === 'medium' , togglable : true },
{ label : 'small' , selected : this .size === 'small' , togglable : true }
];
}
public selectSize (event: any ) {
this .size = this .sizes[event.index].label;
}
@HostBinding ('style.--ig-size' )
protected get sizeStyle () {
return `var(--ig-size-${this .size} )` ;
}
typescript
그리고 모든 작업의 결과는 다음과 같습니다.
import { Component, HostBinding, OnInit } from '@angular/core' ;
import { IgxFilterOptions, IgxButtonGroupComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxFilterPipe } from 'igniteui-angular' ;
import { FormsModule } from '@angular/forms' ;
import { NgIf, NgFor } from '@angular/common' ;
@Component ({
selector : 'app-contact-list2' ,
styleUrls : ['./list-sample-4.component.scss' ],
templateUrl : './list-sample-4.component.html' ,
imports : [IgxButtonGroupComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, NgIf, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, NgFor, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxFilterPipe]
})
export class ListSample4Component implements OnInit {
public searchContact: string ;
public contacts = [
{
isFavorite : false ,
name : 'Terrance Orta' ,
phone : '770-504-2217' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/men/27.jpg'
},
{
isFavorite : true ,
name : 'Richard Mahoney' ,
phone : '423-676-2869' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/men/1.jpg'
},
{
isFavorite : false ,
name : 'Donna Price' ,
phone : '859-496-2817' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/women/50.jpg'
},
{
isFavorite : false ,
name : 'Lisa Landers' ,
phone : '901-747-3428' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/women/3.jpg'
},
{
isFavorite : true ,
name : 'Dorothy H. Spencer' ,
phone : '573-394-9254' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/women/67.jpg'
}
];
public size = 'large' ;
public sizes;
constructor ( ) { }
public ngOnInit ( ) {
this .sizes = [
{ label : 'large' , selected : this .size === 'large' , togglable : true },
{ label : 'medium' , selected : this .size === 'medium' , togglable : true },
{ label : 'small' , selected : this .size === 'small' , togglable : true }
];
}
@HostBinding ('style.--ig-size' )
protected get sizeStyle () {
return `var(--ig-size-${this .size} )` ;
}
public selectSize (event ) {
this .size = this .sizes[event.index].label;
}
public toggleFavorite (contact: any , event: Event ) {
event.stopPropagation();
contact.isFavorite = !contact.isFavorite;
}
get filterContacts () {
const fo = new IgxFilterOptions();
fo.key = 'name' ;
fo.inputValue = this .searchContact;
return fo;
}
public mousedown (event: Event ) {
event.stopPropagation();
}
}
ts コピー <div class ="density-chooser" >
<igx-buttongroup [values ]="sizes" (selected )="selectSize($event)" > </igx-buttongroup >
</div >
<igx-input-group type ="search" class ="search" >
<igx-prefix >
<igx-icon > search</igx-icon >
</igx-prefix >
<input #search igxInput placeholder ="Search Contacts" [(ngModel )]="searchContact" >
<igx-suffix *ngIf ="search.value.length > 0" (click )="searchContact = null" >
<igx-icon > clear</igx-icon >
</igx-suffix >
</igx-input-group >
<div class ="list-sample" >
<igx-list >
<igx-list-item [isHeader ]="true" > Contacts</igx-list-item >
<igx-list-item igxRipple igxRippleTarget =".igx-list__item-content" #item
*ngFor ="let contact of contacts | igxFilter: filterContacts;" >
<igx-avatar igxListThumbnail [src ]="contact.photo" shape ="circle" > </igx-avatar >
<span igxListLineTitle > {{ contact.name }}</span >
<span igxListLineSubTitle > {{ contact.phone }}</span >
<igx-icon igxListAction [style.color ]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple ="pink"
[igxRippleCentered ]="true" (click )="toggleFavorite(contact, $event)"
(mousedown )="mousedown($event)" > star</igx-icon >
</igx-list-item >
</igx-list >
</div >
html コピー :host {
display : block;
padding : 16px ;
}
.list-sample {
box-shadow : 0px 1px 3px 0px rgba(0 , 0 , 0 , 0.2 ),
0px 1px 1px 0px rgba(0 , 0 , 0 , 0.14 ),
0px 2px 1px -1px rgba(0 , 0 , 0 , 0.12 );
}
.density-chooser {
margin-bottom : 16px ;
}
igx-icon {
cursor : pointer;
position : relative;
}
.search {
margin-bottom : 16px ;
}
scss コピー
목록 항목 패닝
이제 연락처와 전화번호가 있는 아름다운 Angular 목록이 있으니, 연락처에 전화를 걸 수 있는 기능을 구현해 볼까요? IgxList
에는 이를 위한 완벽한 솔루션인 목록 항목 패닝이 있습니다. 이를 위해서는 다음 단계를 구현해야 합니다.
다음 예에서는 왼쪽 및 오른쪽 패닝을 모두 처리하는 방법을 보여줍니다. 오른쪽 패닝에 대한 이벤트 핸들러는 토스트 메시지를 표시합니다. 왼쪽 패닝에 대한 이벤트 핸들러는 IgxList
에서 항목을 삭제합니다.
목록 항목 제거는 애플리케이션 작업이라는 점에 유의하세요. IgxList
에는 데이터 소스에 대한 참조가 없기 때문에 IgxList
자체는 데이터 소스에서 항목을 제거할 수 없습니다.
예제의 HTML 코드는 다음과 같습니다.
<igx-list [allowLeftPanning ]="true" [allowRightPanning ]="true"
(leftPan )="leftPanPerformed($event)" (rightPan )="rightPanPerformed($event)" >
<ng-template igxListItemLeftPanning >
<div class ="listItemLeftPanningStyle" >
<igx-icon [color ]="white" style ="margin-left:10px" > delete</igx-icon >Delete
</div >
</ng-template >
<ng-template igxListItemRightPanning >
<div class ="listItemRightPanningStyle" >
<igx-icon [color ]="white" style ="margin-right:10px" > call</igx-icon >Dial
</div >
</ng-template >
<igx-list-item isHeader ="true" > Contacts</igx-list-item >
<igx-list-item #item *ngFor ="let contact of contacts" >
<igx-avatar igxListThumbnail [src ]="contact.photo" shape ="circle" > </igx-avatar >
<h4 igxListLineTitle > {{ contact.name }}</h4 >
<p igxListLineSubTitle class ="phone" > {{ contact.phone }}</p >
<igx-icon igxListAction [color ]="contact.isFavorite ? 'orange' : 'lightgray'" (click )="toggleFavorite(item)" > star</igx-icon >
</igx-list-item >
</igx-list >
<igx-toast #toast > </igx-toast >
html
위의 예는 여기에서 찾을 수 있는 일부 CSS 스타일을 사용하고 있습니다.
igx-icon {
cursor : pointer;
user-select: none;
}
.listItemLeftPanningStyle {
display : flex;
flex-direction : row-reverse;
background-color :orange;
color : white;
width : 100% ;
padding-right : 10px ;
align-items : center;
}
.listItemRightPanningStyle {
display : flex;
flex-direction : row;
background-color :limegreen;
color : white;
width : 100% ;
padding-left : 10px ;
align-items : center;
}
css
마지막으로 패닝 이벤트를 처리하는 TypeScript 코드는 다음과 같습니다.
...
@ViewChild ('toast' )
public toast: IgxToastComponent;
public rightPanPerformed (args ) {
args.keepItem = true ;
this .toast.message = 'Dialing ' + this .contacts[args.item.index - 1 ].name;
this .toast.open();
}
public leftPanPerformed (args ) {
args.keepItem = false ;
setTimeout ((idx = args.item.index - 1 ) => {
this .toast.message = 'Contact ' + this .contacts[idx].name + ' removed.' ;
this .toast.open();
this .contacts.splice(idx, 1 );
}, 500 );
}
...
typescript
이제 목록 항목을 직접 이동해 보세요.
import { Component, OnInit, ViewChild } from '@angular/core' ;
import { IgxListComponent, IgxToastComponent, IgxSliderComponent, IgxListItemLeftPanningTemplateDirective, IgxIconComponent, IgxListItemRightPanningTemplateDirective, IgxListItemComponent, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxButtonDirective } from 'igniteui-angular' ;
import { FormsModule } from '@angular/forms' ;
import { NgFor } from '@angular/common' ;
@Component ({
selector : 'app-contact-list2' ,
styleUrls : ['./list-sample-7.component.scss' ],
templateUrl : './list-sample-7.component.html' ,
imports : [IgxSliderComponent, FormsModule, IgxListComponent, IgxListItemLeftPanningTemplateDirective, IgxIconComponent, IgxListItemRightPanningTemplateDirective, IgxListItemComponent, NgFor, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxToastComponent, IgxButtonDirective]
})
export class ListSample7Component implements OnInit {
@ViewChild ('toast' , { static : true })
public toast: IgxToastComponent;
@ViewChild ('mainIgxList' , { static : true })
public list: IgxListComponent;
public contacts;
private dataSource = [{
isFavorite : false ,
name : 'Terrance Orta' ,
phone : '770-504-2217' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/men/27.jpg'
}, {
isFavorite : true ,
name : 'Richard Mahoney' ,
phone : '423-676-2869' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/men/1.jpg'
}, {
isFavorite : false ,
name : 'Donna Price' ,
phone : '859-496-2817' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/women/50.jpg'
}, {
isFavorite : false ,
name : 'Lisa Landers' ,
phone : '901-747-3428' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/women/3.jpg'
}, {
isFavorite : true ,
name : 'Dorothy H. Spencer' ,
phone : '573-394-9254' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/women/67.jpg'
}
];
constructor ( ) {
}
public ngOnInit ( ) {
this .contacts = Object .assign([], this .dataSource);
}
public toggleFavorite (contact: any , event: Event ) {
event.stopPropagation();
contact.isFavorite = !contact.isFavorite;
}
public rightPanPerformed (args ) {
args.keepItem = true ;
this .toast.open('Dialing ' + this .contacts[args.item.index - 1 ].name);
}
public leftPanPerformed (args ) {
args.keepItem = false ;
setTimeout ((idx = args.item.index - 1 ) => {
this .toast.open('Contact ' + this .contacts[idx].name + ' removed.' );
this .contacts.splice(idx, 1 );
}, 500 );
}
public repopulateHandler ( ) {
this .contacts = Object .assign([], this .dataSource);
}
public get panThreshold () {
const result = this .list.panEndTriggeringThreshold;
return Math .round(result * 100 ) + '%' ;
}
public mousedown (event: Event ) {
event.stopPropagation();
}
}
ts コピー <div style ="width:300px; margin-bottom:20px" >
<igx-slider id ="slider" [minValue ]="0.1" [maxValue ]="0.9" [step ]="0.1" [continuous ]="true"
[(ngModel )]="mainIgxList.panEndTriggeringThreshold" > </igx-slider >
<label > Threshold: {{panThreshold}}</label >
</div >
<div class ="list-sample" >
<igx-list [allowLeftPanning ]="true" [allowRightPanning ]="true" #mainIgxList (leftPan )="leftPanPerformed($event)"
(rightPan )="rightPanPerformed($event)" >
<ng-template igxListItemLeftPanning >
<div class ="listItemLeftPanningStyle" >
<igx-icon > delete</igx-icon >Delete
</div >
</ng-template >
<ng-template igxListItemRightPanning >
<div class ="listItemRightPanningStyle" >
<igx-icon > call</igx-icon >Dial
</div >
</ng-template >
<igx-list-item [isHeader ]="true" > Contacts</igx-list-item >
<igx-list-item #item *ngFor ="let contact of contacts" igxRipple ="pink"
igxRippleTarget =".igx-list__item-content" >
<igx-avatar igxListThumbnail [src ]="contact.photo" shape ="circle" > </igx-avatar >
<span igxListLineTitle > {{ contact.name }}</span >
<span igxListLineSubTitle > {{ contact.phone }}</span >
<igx-icon igxListAction [style.color ]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple ="pink"
[igxRippleCentered ]="true" (click )="toggleFavorite(contact, $event)"
(mousedown )="mousedown($event)" > star</igx-icon >
</igx-list-item >
</igx-list >
<igx-toast #toast > </igx-toast >
</div >
<button igxButton ="contained" (click )="repopulateHandler()" style ="margin-top:20px" > Repopulate IgxList</button >
html コピー :host {
display : block;
padding : 16px ;
}
.list-sample {
box-shadow : 0px 1px 3px 0px rgba(0 , 0 , 0 , 0.2 ),
0px 1px 1px 0px rgba(0 , 0 , 0 , 0.14 ),
0px 2px 1px -1px rgba(0 , 0 , 0 , 0.12 );
}
igx-icon {
cursor : pointer;
position : relative;
}
.listItemLeftPanningStyle {
display : flex;
flex-direction : row-reverse;
background-color :orange;
color : white;
width : 100% ;
padding-right : 10px ;
align-items : center;
}
.listItemRightPanningStyle {
display : flex;
flex-direction : row;
background-color :limegreen;
color : white;
width : 100% ;
padding-left : 10px ;
align-items : center;
}
scss コピー
Angular 필터 목록
목록이 좋아 보이지만 이름으로 연락처를 검색할 수 있다면 더 좋지 않을까요? 필터링 파이프를 사용하면 쉽게 이를 달성할 수 있습니다. 이렇게 해보자.
먼저 Angular 컴포넌트 템플릿의 맨 위에 입력 필드를 추가하고 이를 searchContact 라는 컴포넌트의 속성에 바인딩해 보겠습니다.
<igx-input-group type ="search" class ="search" >
<igx-prefix >
<igx-icon > search</igx-icon >
</igx-prefix >
<input #search igxInput placeholder ="Search Contacts" [(ngModel )]="searchContact" >
<igx-suffix *ngIf ="search.value.length > 0" (click )="searchContact = null" >
<igx-icon > clear</igx-icon >
</igx-suffix >
</igx-input-group >
html
이제 app.module.ts 파일에서 IgxFilterModule
및 IgxInputGroupModule
가져오고 연락처 구성 요소에서 IgxFilterOptions
가져올 차례입니다.
...
import { IgxFilterModule, IgxInputGroupModule } from 'igniteui-angular' ;
@NgModule ({
imports : [..., IgxFilterModule, IgxInputGroupModule]
})
...
import { IgxFilterOptions } from 'igniteui-angular' ;
@Component ({...})
export class ContactListComponent {
public searchContact: string ;
...
get filterContacts (): IgxFilterOptions {
const fo = new IgxFilterOptions();
fo.key = 'name' ;
fo.inputValue = this .searchContact;
return fo;
}
}
typescript
IgxFilterOptions
를 가져온 후에는 searchContact
속성이 업데이트될 때마다 파이프에서 사용할 필터링 옵션을 반환하는 새로운 getter 메서드를 등록해야 합니다. 필터가 작동하려면 연락처 개체를 필터링할 key
등록해야 합니다. 우리의 경우에는 각 연락처의 name
됩니다. IgxFilterOptions
개체에 등록해야 하는 두 번째 속성은 연락처 이름을 비교할 때 확인해야 하는 값입니다. 이는 연락처 목록 위의 입력 필드에 바인딩된 searchContact
속성입니다.
마지막으로 필터링 파이프를 사용하기 전에 연락처 데이터에 필터링 파이프를 적용해야 합니다. 따라서 템플릿에 다음을 추가하기만 하면 됩니다.
<igx-list-item *ngFor ="let contact of contacts | igxFilter: filterContacts; let i = index" >
...
</igx-list-item >
html
목록 항목 선택
이미 알고 계시겠지만 목록 항목은 선택 상태를 제공하지 않습니다. 그러나 응용 프로그램에서 어떤 항목이 선택되었는지 추적하기 위해 목록이 필요한 경우 이를 달성할 수 있는 방법에 대한 예를 제공합니다. 당신이 해야 할 일은 구성 요소나 목록이 바인딩된 데이터의 상태를 추적하는 것뿐입니다.
다음은 목록이 바인딩된 데이터에서 나오는 상태 추적을 기반으로 테마의 보조 500 색상에 따라 목록에 배경색을 적용하는 예입니다.
import { Component } from '@angular/core' ;
import { IgxFilterOptions, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxRippleDirective, IgxFilterPipe } from 'igniteui-angular' ;
import { FormsModule } from '@angular/forms' ;
import { NgIf, NgFor, NgClass } from '@angular/common' ;
@Component ({
selector : 'app-list-item-selection' ,
templateUrl : './list-item-selection.component.html' ,
styleUrls : ['./list-item-selection.component.scss' ],
imports : [IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, NgIf, IgxSuffixDirective, IgxListComponent, IgxListItemComponent, NgFor, NgClass, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxRippleDirective, IgxFilterPipe]
})
export class ListItemSelectionComponent {
public searchContact: string ;
public contacts = [
{
isFavorite : false ,
name : 'Terrance Orta' ,
phone : '770-504-2217' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/men/27.jpg' ,
selected : false
},
{
isFavorite : true ,
name : 'Richard Mahoney' ,
phone : '423-676-2869' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/men/1.jpg' ,
selected : false
},
{
isFavorite : false ,
name : 'Donna Price' ,
phone : '859-496-2817' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/women/50.jpg' ,
selected : false
},
{
isFavorite : false ,
name : 'Lisa Landers' ,
phone : '901-747-3428' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/women/3.jpg' ,
selected : false
},
{
isFavorite : true ,
name : 'Dorothy H. Spencer' ,
phone : '573-394-9254' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/women/67.jpg' ,
selected : false
}
];
public toggleFavorite (contact: any , event: Event ) {
event.stopPropagation();
contact.isFavorite = !contact.isFavorite;
}
public selectItem (item ) {
if (!item.selected) {
this .contacts.forEach(c => c.selected = false );
item.selected = true ;
}
}
get filterContacts () {
const fo = new IgxFilterOptions();
fo.key = 'name' ;
fo.inputValue = this .searchContact;
return fo;
}
public mousedown (event: Event ) {
event.stopPropagation();
}
}
ts コピー <igx-input-group type ="search" class ="search" >
<igx-prefix >
<igx-icon > search</igx-icon >
</igx-prefix >
<input #search igxInput placeholder ="Search Contacts" [(ngModel )]="searchContact" >
<igx-suffix *ngIf ="search.value.length > 0" (click )="searchContact = null" >
<igx-icon > clear</igx-icon >
</igx-suffix >
</igx-input-group >
<div class ="list-sample" >
<igx-list >
<igx-list-item [isHeader ]="true" > Contacts</igx-list-item >
<igx-list-item [ngClass ]="contact.selected ? 'selected' : ''" (click )="selectItem(contact)"
*ngFor ="let contact of contacts | igxFilter: filterContacts;" >
<igx-avatar igxListThumbnail [src ]="contact.photo" shape ="circle" > </igx-avatar >
<span igxListLineTitle > {{ contact.name }}</span >
<span igxListLineSubTitle > {{ contact.phone }}</span >
<igx-icon igxListAction [style.color ]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple ="pink"
[igxRippleCentered ]="true" (click )="toggleFavorite(contact, $event)"
(mousedown )="mousedown($event)" > star</igx-icon >
</igx-list-item >
</igx-list >
</div >
html コピー :host {
display : block;
padding : 16px ;
.selected {
background-color : var(--ig-secondary-500 )
}
.list-sample {
box-shadow: 0px 1px 3px 0px rgba(0 , 0 , 0 , 0.2 ),
0px 1px 1px 0px rgba(0 , 0 , 0 , 0.14 ),
0px 2px 1px -1px rgba(0 , 0 , 0 , 0.12 );
}
igx-icon {
cursor : pointer;
position : relative;
}
.search {
margin-bottom : 16px ;
}
}
scss コピー
우리가 하고 있는 일은 각 데이터 멤버에 추가로 selected
속성을 추가하는 것입니다. 기본값은 false
입니다. 목록 항목을 클릭하면 데이터 컬렉션에서 selected
모든 속성을 재설정하고 클릭한 항목에 해당하는 속성을 true
로 설정합니다. 선택한 속성을 기반으로 목록 항목에 선택한 배경을 제공하는 CSS 클래스를 적용합니다.
<igx-list >
<igx-list-item isHeader ="true" > Contacts</igx-list-item >
<igx-list-item [ngClass ]="contact.selected ? 'selected' : ''"
(click )="selectItem(contact)"
*ngFor ="let contact of contacts | igxFilter: filterContacts;" >
<igx-avatar igxListThumbnail [src ]="contact.photo" shape ="circle" > </igx-avatar >
<span igxListLineTitle > {{ contact.name }}</span >
<span igxListLineSubTitle > {{ contact.phone }}</span >
<igx-icon igxListAction [style.color ]="contact.isFavorite ? 'orange' : 'lightgray'" (click )="toggleFavorite(contact, $event)" > star</igx-icon >
</igx-list-item >
</igx-list >
html
public selectItem (item ) {
if (!item.selected) {
this .contacts.forEach(c => c.selected = false );
item.selected = true ;
}
}
typescript
.selected {
background-color : hsla(var(--igx-secondary-500 ))
}
scss
채팅 구성 요소
다음 샘플은 IgxList 를 사용하여 간단한 채팅 구성 요소를 만드는 방법을 보여줍니다.
import {
AfterViewInit,
Component,
ElementRef,
TemplateRef,
ViewChild,
ViewEncapsulation
} from '@angular/core' ;
import { ContactsService } from '.services/contacts.service' ;
import { IMessage, MessagesService } from '.services/messages.service' ;
import { FormsModule } from '@angular/forms' ;
import { IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxIconComponent } from 'igniteui-angular' ;
import { NgIf, NgClass, NgFor, NgTemplateOutlet, DatePipe } from '@angular/common' ;
@Component ({
encapsulation : ViewEncapsulation.None,
selector : 'app-list-chat-sample' ,
styleUrls : ['./list-chat-sample.component.scss' ],
templateUrl : './list-chat-sample.component.html' ,
imports : [FormsModule, IgxListComponent, NgIf, IgxListItemComponent, IgxAvatarComponent, NgClass, NgFor, NgTemplateOutlet, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxIconComponent, DatePipe]
})
export class ListChatSampleComponent implements AfterViewInit {
@ViewChild ('form' , { static : true })
public form: ElementRef;
@ViewChild ('myMessage' , { static : true })
public myMessageTemplate: TemplateRef<any >;
@ViewChild ('othersMessage' , { static : true })
public othersMessageTemplate: TemplateRef<any >;
public message: string ;
private myId = 4 ;
constructor (
public messagesService: MessagesService,
public contactsService: ContactsService
) { }
public getMessageTemplate(message: IMessage): TemplateRef<any > {
if (message.authorId === this .myId) {
return this .myMessageTemplate;
}
return this .othersMessageTemplate;
}
public isFirstMessage(messageIndex: number ): boolean {
if (messageIndex === 0 ) {
return true ;
}
const messages = this .messagesService.getMessages();
if (messageIndex >= messages.length) {
return false ;
}
const currentMessage = messages[messageIndex];
const previousMessage = messages[messageIndex - 1 ];
return currentMessage.authorId !== previousMessage.authorId;
}
public onMessageKeypress (event ) {
if (event.key === 'Enter' ) {
this .sendMessage();
}
}
public onSendButtonClick ( ) {
this .sendMessage();
}
private sendMessage ( ) {
this .addMessage(this .message);
this .message = null ;
}
private addMessage (message: string ) {
if (message) {
const messageInstance: IMessage = {
authorId : this .myId,
message,
timestamp : new Date (Date .now())
};
this .messagesService.addMessage(messageInstance);
}
}
public ngAfterViewInit ( ) {
this .scrollToBottom();
}
private scrollToBottom(): void {
const form = this .form.nativeElement;
form.scrollTop = form.scrollHeight;
}
}
ts コピー <form #form class ="sample-form" >
<igx-list #list >
<ng-template
#othersMessage
let-message ="message"
let-contact ="contact"
let-messageIndex ="index"
>
<igx-list-item class ="contact" *ngIf ="isFirstMessage(messageIndex)" >
<section class ="contact__panel" >
<igx-avatar
[src ]="contact.photo"
shape ="circle"
> </igx-avatar >
<header class ="message__info" >
<h6 > {{ contact.name }}</h6 >
<span >
{{ message.timestamp | date: "shortTime" }}
</span >
</header >
</section >
</igx-list-item >
<igx-list-item >
<div
[ngClass ]="{
message: true,
'other-message': true,
'other-message--first': isFirstMessage(messageIndex)
}"
>
<span > {{ message.message }}</span >
</div >
</igx-list-item >
</ng-template >
<ng-template #myMessage let-message ="message" let-messageIndex ="index" >
<igx-list-item class ="contact" *ngIf ="isFirstMessage(messageIndex)" >
<header class ="own-message message__info" >
<h6 > You</h6 >
<span class ="message__info" >
{{ message.timestamp | date: "shortTime" }}
</span >
</header >
</igx-list-item >
<igx-list-item >
<div
[ngClass ]="{
message: true,
'own-message': true,
'own-message--first': isFirstMessage(messageIndex)
}"
>
<span >
{{ message.message }}
</span >
</div >
</igx-list-item >
</ng-template >
<ng-container
*ngFor ="let message of messagesService.getMessages(); index as i"
>
<ng-container
*ngTemplateOutlet ="
getMessageTemplate(message);
context: {
message: message,
contact: contactsService.getContact(message.authorId),
index: i
}
"
>
</ng-container >
</ng-container >
</igx-list >
<div class ="overflow-anchor" > </div >
<div class ="massage-field" >
<igx-input-group type ="box" >
<input
#newMessage
igxInput
name ="newMessage"
placeholder ="Send message"
autocomplete ="off"
[(ngModel )]="message"
(keypress )="onMessageKeypress($event)"
/>
<button
igxSuffix
igxIconButton ="flat"
(click )="onSendButtonClick()"
>
<igx-icon name ="send" family ="material" > </igx-icon >
</button >
</igx-input-group >
</div >
</form >
html コピー @use "igniteui-angular/theming" as *;
igx-avatar {
--ig-size: var(--ig-size-small);
}
igx-list {
--ig-spacing-block-small: 0 ;
--ig-spacing-block-medium: 0 ;
--ig-spacing-block-large: 0 ;
--item-background : transparent;
--border-color : transparent;
--item-background -hover: transparent;
--item-background -active: transparent;
gap: rem(4px );
}
.sample-form {
overflow-y : scroll;
overflow-x : auto;
max-width : rem(400px );
height : rem(580px );
background : color(null, surface, 500 );
box-shadow : var(--ig-elevation-12 );
margin : rem(24px ) auto;
border-radius : rem(4px );
* {
overflow -anchor: none;
}
}
.massage-field {
position : sticky;
bottom : 0 ;
padding -block: rem(12px );
padding -inline: rem(16px );
background : color(null, surface, 500 );
}
.overflow-anchor {
height : 1px ;
overflow -anchor: auto;
}
.contact {
margin -block: rem(24px ) rem(8px );
&__panel {
display : flex;
align-items : center;
gap: rem(8px );
}
&__panel {
display : flex;
align-items : center;
}
&:active {
background : transparent;
}
}
.message {
@include type-style("body-2" );
display : flex;
align-items : center;
min-height : rem(32px );
border-radius : rem(4px );
padding -inline: rem(16px );
&__info {
h6 {
@include type-style("body-1" );
font-weight : 600 ;
margin : initial;
line-height : 1 ;
}
span {
@include type-style("caption" );
}
}
}
.own-message {
margin -inline-start: auto;
background-color : color(null, gray, 200 );
color : contrast-color(null, gray, 200 );
&--first {
border-top-right-radius : 0 ;
}
&.message__info {
background : transparent;
color : color(null, gray, 700 );
text-align : end;
}
&:active {
background-color : inherit;
}
}
.other-message {
background-color : color(null, primary, 800 );
color : contrast-color(null, primary, 800 );
&--first {
border-top-left-radius : 0 ;
}
&:active {
background-color : color(null, primary, 900 );
color : contrast-color(null, primary, 900 );
}
}
scss コピー
목록 구성 요소에 테마 적용
목록의 배경을 어떻게 변경할 수 있는지 살펴보겠습니다. 먼저 index.scss를 구성 요소 .scss 파일로 가져와야 합니다.
@use "igniteui-angular/theming" as *;
scss
가장 간단한 접근 방식에 따라 매개 변수를 확장 list-theme
하고 허용하는 새 테마를 $background
만듭니다.
$my-list-theme : list-theme(
$background : #0568ab
);
scss
목록 스타일을 지정하는 데 사용할 수 있는 매개변수의 전체 목록에 대한 섹션을 살펴보 list-theme
십시오.
마지막 단계는 새로 생성된 테마를 포함하는 것입니다.
@include css-vars($my-list-theme );
scss
결과는 다음과 같습니다.
import { Component, OnInit, ViewChild } from '@angular/core' ;
import { IgxListComponent, IgxToastComponent, IgxListItemComponent, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxIconComponent, IgxListActionDirective, IgxRippleDirective } from 'igniteui-angular' ;
import { NgFor } from '@angular/common' ;
@Component ({
selector : 'app-list-8' ,
styleUrls : ['./list-sample-8.component.scss' ],
templateUrl : './list-sample-8.component.html' ,
imports : [IgxListComponent, IgxListItemComponent, NgFor, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxIconComponent, IgxListActionDirective, IgxRippleDirective]
})
export class ListSample8Component implements OnInit {
@ViewChild ('toast' , { static : true })
public toast: IgxToastComponent;
@ViewChild ('mainIgxList' , { static : true })
public list: IgxListComponent;
public contacts;
private dataSource = [{
isFavorite : false ,
name : 'Terrance Orta' ,
phone : '770-504-2217' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/men/27.jpg'
}, {
isFavorite : true ,
name : 'Richard Mahoney' ,
phone : '423-676-2869' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/men/1.jpg'
}, {
isFavorite : false ,
name : 'Donna Price' ,
phone : '859-496-2817' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/women/50.jpg'
}, {
isFavorite : false ,
name : 'Lisa Landers' ,
phone : '901-747-3428' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/women/3.jpg'
}, {
isFavorite : true ,
name : 'Dorothy H. Spencer' ,
phone : '573-394-9254' ,
photo : 'https://www.infragistics.com/angular-demos-lob/assets/images/women/67.jpg'
}
];
constructor ( ) {
}
public ngOnInit ( ) {
this .contacts = Object .assign([], this .dataSource);
}
public toggleFavorite (contact: any , event: Event ) {
event.stopPropagation();
contact.isFavorite = !contact.isFavorite;
}
public mousedown (event: Event ) {
event.stopPropagation();
}
}
ts コピー <div class ="list-sample" >
<igx-list >
<igx-list-item [isHeader ]="true" > Contacts</igx-list-item >
<igx-list-item #item *ngFor ="let contact of contacts" >
<igx-avatar igxListThumbnail [src ]="contact.photo" shape ="circle" > </igx-avatar >
<span igxListLineTitle > {{ contact.name }}</span >
<span igxListLineSubTitle > {{ contact.phone }}</span >
<igx-icon igxListAction [style.color ]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple ="white"
[igxRippleCentered ]="true" (click )="toggleFavorite(contact, $event)"
(mousedown )="mousedown($event)" > star</igx-icon >
</igx-list-item >
</igx-list >
</div >
html コピー @use "layout.scss" ;
@use "igniteui-angular/theming" as *;
$my-list-theme : list-theme(
$background : #0568ab
);
@include css-vars($my-list-theme );
scss コピー
목록 구성요소에 대해 변경할 수 있는 매개변수의 전체 목록은 IgxListComponent 스타일을 참조하세요.
API 참조
이 글에서는 Angular 목록 구성 요소로 많은 내용을 다루었습니다. 연락처 항목 목록을 만들었습니다. 목록 항목 내부에 아바타와 아이콘과 같은 추가 Ignite UI for Angular 구성 요소를 사용했습니다. 사용자 지정 항목 레이아웃을 만들고 스타일을 지정했습니다. 마지막으로 목록 필터링을 추가했습니다. 목록 구성 요소에는 탐색할 API가 몇 가지 더 있는데, 아래에 나열되어 있습니다.
사용된 추가 Angular 구성 요소:
테마 종속성
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.