Angular List View 구성 요소 개요

Ignite UI for Angular List 컴포넌트는 항목의 행을 표시하고, 하나 이상의 헤더 항목을 지원하며, 목록 항목의 검색 및 필터링도 지원합니다. 각 리스트 항목은 완전히 템플릿 가능하며 유효한 HTML 또는 Angular 컴포넌 트를 지원합니다. 리스트 컴포넌트는 팬닝 기능, 빈 상태 및 로딩 상태 템플릿, 그리고 지시를 사용한IgxForOf 대규모 리스트의 가상화도 지원합니다.

Angular List Example

다음 예시는 이름과 전화번호 속성을 가진 연락처로 채워진 목록을 나타냅니다. 이 컴포넌IgxList​igx-avatar 트는igx-icon 사용자 경험을 풍부하게 하고, 아바타 사진과 다양한 아이콘을 설정하는 기능을 제공합니다. 또한, 리스트 뷰는 필터링 파이프를 사용하여 달성한 정렬 기능을 제공합니다.

Getting Started with Ignite UI for Angular List

Ignite UI for Angular List View 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

다음 단계는 다음 단계를 가져오는 것입니다.IgxListModule 안에 app.module.ts 파일.

Note

이 구성 요소는 다음을 활용할 수 있습니다.HammerModule 필요. 터치 상호작용이 기대대로 작동하도록 애플리케이션의 루트 모듈에서 가져올 수 있습니다..

// app.module.ts

import { HammerModule } from '@angular/platform-browser';
import { IgxListModule } from 'igniteui-angular/list';
// import { IgxListModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxListModule, HammerModule],
    ...
})
export class AppModule {}

또는16.0.0 독립 실행형 의존성으로 가져오IgxListComponent 거나, 토큰을IGX_LIST_DIRECTIVES 사용해 컴포넌트와 그 지원 컴포넌트, 명령어를 가져올 수도 있습니다.

// home.component.ts

import { HammerModule } from '@angular/platform-browser';
import { IGX_LIST_DIRECTIVES } from 'igniteui-angular/list';
// import { IGX_LIST_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@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]
    /* or imports: [IgxListComponent, IgxListItemComponent, HammerModule] */
})
export class HomeComponent {}

이제 Ignite UI for Angular List 모듈이나 지시어를 가져왔으니, 컴포넌트igx-list 사용을 시작할 수 있습니다.

Using the Angular List

그리고 연락처 구성 요소의 템플릿에서 목록을 만들 수 있지만, 현재(또는 미래의 어느 시점)에 항목이 없다면 어떻게 해야 하나요? 이 경우 Angular 리스트는 리스트가 비어 있을 때 사용하는 기본 템플릿을 제공합니다. 우리는 언제든지 이 지침을 사용igxEmptyList 해 빈 목록의 외관에 대한 자체 템플릿을 제공할 수 있습니다. 이 경우 기본 템플릿은 사용되지 않습니다:

<!--contacts.component.html-->

<igx-list>
    <ng-template igxEmptyList>
        <p class="empty">No contacts! :(</p>
    </ng-template>
</igx-list>

빈 템플릿에 대한 스타일은 다음과 같습니다.

/* contacts.component.css */

.empty {
    color: rgba(0, 153, 255, 1);
    font-size: 25px;
    font-weight: 600;
    text-shadow: 2px 1px 2px rgba(150, 150, 150, 1);
}

모든 것이 잘 되었다면 빈 목록은 다음과 같습니다.

가끔 데이터 로딩에 지연이 있을 수 있습니다. 이 경우 리스트isLoading 속성을 설정true 하면 기본 템플릿이 진행 중인 데이터 로딩 과정을 사용자에게 알려줍니다. 다음의 지침을 사용하여igxDataLoading 자신만의 로딩 템플릿을 제공할 수도 있습니다:

<!--contacts.component.html-->

<igx-list>
    <ng-template igxDataLoading>
        <p class="loading">Patience, we are currently loading your data...</p>
    </ng-template>
</igx-list>

/* contacts.component.css */

.loading {
    color: rgba(255, 153, 0, 1);
    font-size: 25px;
    font-weight: 600;
    text-shadow: 2px 1px 2px rgba(150, 150, 150, 1);
}

Add List Items

목록이 비어 있을 때를 위한 템플릿이 있으면 좋지만 이제 몇 가지 항목을 추가해 보겠습니다. 다음 코드를 추가하여 간단한 항목 목록을 얻을 수 있습니다.

<!--contacts.component.html-->

<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>

모든 것이 순조롭게 진행되면 브라우저에 다음이 표시됩니다.

게임을 조금 더 강화하고 목록 항목을 강화해 보겠습니다. 이름과 이름 아래에 전화번호가 표시된 연락처의 Angular 목록을 만들고 싶다고 가정해 보겠습니다. 구성 요소 타입스크립트 파일에서 연락처 목록을 정의할 수 있습니다.

// contacts.component.ts
...
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"
}];

이제 렌더링할 데이터가 있으므로 일부 마크업을 설정해 보겠습니다. 기본적으로 스타일을 지정하려면 목록 항목과 함께 제공되는 일부 지시문을 사용할 수 있습니다.

다음 예제에서 그 중 일부를 어떻게 사용할 수 있는지 살펴보겠습니다.

<!--contacts.component.html-->

<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>

두 지침 모두 우리 리스트 항목에igxListLineTitle​igxListLineSubTitle 기본 이미지를 부여합니다.

이제 Angular 목록은 다음과 같아야 합니다.

Adding Avatar and Icons

다른 컴포넌트들을 컴포넌IgxList 트와 함께 사용하여 경험을 풍부하게 하고 기능을 추가할 수 있습니다. 이름과 전화번호 왼쪽에 멋진 사진 아바타를 둘 수 있습니다. 또한, 사용자가 연락처를 즐겨찾기 위해 오른쪽에 별 아이콘을 추가할 수 있습니다. 이를 위해 IgxAvatar와 IgxIcon 모듈을 가져와 app.module.ts 파일에 가져와보겠습니다.

// app.module.ts

...
import { IgxListModule } from 'igniteui-angular/list';
import { IgxAvatarModule } from 'igniteui-angular/avatar';
import { IgxIconModule } from 'igniteui-angular/icon';
// import { IgxListModule, IgxAvatarModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxAvatarModule, IgxIconModule],
})
export class AppModule {}

다음으로, 연락처 객체에 아바타 소스와photo 연락처의 즐겨찾기 상태를 나타내는 속성 같은isFavorite 추가 정보를 추가해야 합니다.

// contacts.component.ts

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
}];

좋습니다. 이제 연락처 목록의 템플릿을 업데이트하여 아바타와 아이콘을 표시해 보겠습니다. 이번에도 목록 지시문 중 일부를 사용하여 이를 수행할 수 있습니다.

<!--contacts.component.html-->

<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>

• igxListThumbnail목록 항목 시작 부분에 어떤 미디어를 추가할 때 사용하도록 설계되었습니다. 이 지시는 대상 요소를 컨테이너에 감싸 기본 위치와 간격을 제공합니다.
• igxListAction스위치, 라디오 버튼, 체크박스 등과 같은 어떤 동작이나 메타데이터가 있는 리스트 항목에 사용하도록 설계되었습니다. 우리의 경우, 행동은 로igx-icon 표현됩니다. 다시 말해, 지시문은 목표 요소를 올바른 위치와 간격을 가진 컨테이너에 감싸줍니다.
• igxListLine이 명령은 중간에igxListThumbnail 텍스트가 필요할 때 사용되며,igxListAction이 디렉티브는 다른 두 디렉티브와 함께 텍스트 위치, 간격, 정렬이 보기 좋도록 보장합니다.

다음으로 우리는 Igx아이콘 토글하는 구성 요소 즐겨찾기 연락처 개체의 속성입니다.

// contacts.component.ts

...
toggleFavorite(item: IgxListItem) {
    const contact = this.contacts[item.index - 1];
    contact.isFavorite = !contact.isFavorite;
}

또한 사용자가 CSS 사용자 지정 속성을 사용--ig-size 해 목록 크기를 선택할 수 있게 하자. 이를 가져오IgxButtonGroupModule 고 IgxButtonGroup을 사용해 모든 크기 값을 표시함으로써 이를 구현할 것입니다. 이렇게 하면 한 곳이 선택될 때마다 목록의 크기를 업데이트합니다.

// app.module.ts
...
import { IgxButtonGroupModule } from 'igniteui-angular/button-group';
// import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [..., IgxButtonGroupModule]
})

<!--contacts.component.html-->

<igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
...
<igx-list>
    ...
</igx-list>

// contacts.component.ts

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})`;
}

그리고 모든 작업의 결과는 다음과 같습니다.

List Items Panning

이제 연락처와 전화번호가 포함된 아름다운 Angular 목록이 생겼으니, 연락처에 전화를 걸 수 있는 기능을 도입하는 건 어떨까요? 이IgxList 문제에 완벽한 해결책이 있습니다 - 리스트 항목 팬닝입니다. 이를 위해서는 다음 단계를 실행해야 합니다:

• and/또는allowLeftPanning 특성으로allowRightPanning 팬닝을 활성화하세요
• 왼쪽 및/또는 오른쪽 패닝을 위한 템플릿 정의
• 목록 항목의 패닝 이벤트를 처리하고 원하는 작업을 수행합니다.

다음 예시는 좌우 패닝을 모두 처리하는 방법을 보여줍니다. 오른쪽 팬닝의 이벤트 핸들러는 토스트 메시지를 보여줍니다. 왼쪽 팬닝의 이벤트 핸들러는 .IgxList​

Note

목록 항목 제거는 신청 과제임을 유의해 주세요. 데이터IgxList 소스에 대한 참조가 없기 때문에IgxList 데이터 소스에서 항목을 제거할 수 없습니다.

예제의 HTML 코드는 다음과 같습니다.

<!-- contacts.component.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>

위의 예는 여기에서 찾을 수 있는 일부 CSS 스타일을 사용하고 있습니다.

/* contacts.component.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;
}

마지막으로 패닝 이벤트를 처리하는 TypeScript 코드는 다음과 같습니다.

// contacts.component.ts

...
@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);
}

...

Note

패닝 리스트 항목을 사용할 때는 패닝 이벤트가 발생하기 위해 도달해야 할 임계값이 있습니다. the'sIgxList 속성을 사용해panEndTriggeringThreshold 임계값을 변경할 수 있습니다. 기본적으로 이 속성은 0.5 값을 가지며, 이는 목록 항목 너비의 50%를 의미합니다.

이제 목록 항목을 직접 이동해 보세요.

Angular filter list

목록이 좋아 보이지만 이름으로 연락처를 검색할 수 있다면 더 좋지 않을까요? 필터링 파이프를 사용하면 쉽게 이를 달성할 수 있습니다. 이렇게 해보자.

먼저 Angular 컴포넌트 템플릿의 맨 위에 입력 필드를 추가하고 이를 searchContact 라는 컴포넌트의 속성에 바인딩해 보겠습니다.

<!--contacts.component.html-->

<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>

이제 임포트할 시간입니다.IgxFilterModule 그리고IgxInputGroupModule app.module.ts 파일과IgxFilterOptions 저희 연락처 구성 요소에서:

// app.module.ts
...
import { IgxFilterModule } from 'igniteui-angular/directives';
import { IgxInputGroupModule } from 'igniteui-angular/input-group';
// import { IgxFilterModule, IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [..., IgxFilterModule, IgxInputGroupModule]
})

// contacts.component.ts
...
import { IgxFilterOptions } from 'igniteui-angular/directives';
// import { IgxFilterOptions } from '@infragistics/igniteui-angular'; for licensed package

@Component({...})
export class ContactListComponent {
    public searchContact: string;
    ...
    get filterContacts(): IgxFilterOptions {
        const fo = new IgxFilterOptions();
        fo.key = 'name';
        fo.inputValue = this.searchContact;
        return fo;
    }
}

을 가져오IgxFilterOptions 면, 속성이 업데이트될 때마다searchContact 파이프에서 사용할 필터링 옵션을 반환하는 새로운 게터 메서드를 등록해야 합니다. 필터가 작동하려면 접촉 객체를 필터링하기 위해 akey를 등록해야 합니다. 저희 경우에는 각 연락처의 차이name가 있습니다. 두 번째로 객체에IgxFilterOptions 등록해야 하는 속성은 연락처 이름을 비교할 때 확인해야 할 값입니다. 이 속성은searchContact 연락처 목록 위의 입력 필드에 결합하는 것입니다.

마지막으로 필터링 파이프를 사용하기 전에 연락처 데이터에 필터링 파이프를 적용해야 합니다. 따라서 템플릿에 다음을 추가하기만 하면 됩니다.

<!--contacts.component.html-->

<igx-list-item *ngFor="let contact of contacts | igxFilter: filterContacts; let i = index">
    ...
</igx-list-item>

List Item Selection

목록 항목에는 어떤 항목이 '선택'되었는지 추적하는 데 도움이 되는 속성이 있습니다selected. 이 특성 덕분에 각 항목의 선택 상태를 식별하고 관리할 수 있습니다.

다음은 해당 속성을 사용할selected 때 아이템의 시각적 스타일이 어떻게 변하는지 보여주는 예시입니다:

기본적으로 속성은selected로false 설정되어 있습니다. 각 리스트 항목의 이벤트에(click) 묶인 인라인 표현식을 사용해 값을 토글할 수 있어, 클릭할 때마다 아이템의 시각적 상태가 효과적으로 바뀝니다.

<igx-list>
    <igx-list-item [isHeader]="true">Contacts</igx-list-item>
    @for (contact of contacts | igxFilter: filterContacts; track contact) {
      <igx-list-item [selected]="contact.selected" (click)="contact.selected = !contact.selected">
        <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>

목록 항목은 또한 선택한 요소의 다른 부분에 스타일을 지정하는 데 사용할 수 있는 몇 가지 CSS 변수를 노출합니다.

• --item-background-selected
• --item-text-color-selected
• --item-title-color-selected
• --item-action-color-selected
• --item-subtitle-color-selected
• --item-thumbnail-color-selected

igx-list-item {
  --item-background-selected: var(--ig-secondary-500);
  --item-title-color-selected: var(--ig-secondary-500-contrast);
  --item-subtitle-color-selected: var(--ig-info-100);
}

리스트 테마 기능을 선호한다면, 선택한 리스트 아이템의 상태를 스타일링할 수 있는 매개변수가 있습니다. 이 매개변수들에 대한 자세한 정보는 여기에서 확인할 수 있습니다:list-theme

Chat Component

다음 샘플은 IgxList를 사용하여 간단한 채팅 구성 요소를 만드는 방법을 보여줍니다.

스타일링

List Theme Property Map

기본 속성을 수정하면 모든 관련 종속 속성이 자동으로 업데이트되어 변경 내용이 반영됩니다.

기본 속성	종속 속성	설명
$background	$header 배경	목록 헤더 배경색.
	$item 배경	목록 항목 배경색.
$header 배경	$header-텍스트-컬러	목록 헤더의 텍스트 색상.
$item 배경	$background	목록 배경색.
	$header 배경	목록 헤더 배경색.
	$item-배경-호버	목록 항목은 배경색을 떠올립니다.
	$item-텍스트-컬러	목록 항목 텍스트 색상.
	$item-제목-색상	목록 항목 제목 색상.
	$item 행동 색상	목록 항목 행동 색상.
	$item썸네일 색상	목록 항목 썸네일 색상.
	$item-자막-컬러	목록 항목 자막 색상.
	$border색	목록 테두리 색상. (플루언트/부트스트랩만)
$item-배경-호버	$item-배경-활성	활성 목록 항목 배경색.
	$item-텍스트-색상-호버	목록 항목은 텍스트 색상을 마우스로 올리는 것입니다.
	$item-제목-색상-호버	목록 항목은 제목 색상을 호버링합니다.
	$item-행동-색상-호버	목록 항목의 호버 액션 색상.
	$item 썸네일 색상 호버	목록 항목 호버 썸네일 색상.
	$item-자막-색상-호버	목록 항목 호버 자막 색상.
$item-배경-활성	$item-배경-선택	선택한 목록 항목의 배경색.
	$item-텍스트-컬러-액티브	활성 목록 항목 텍스트 색상.
	$item-title-color-active(제목-color-active)	활성 목록 항목 제목 색상.
	$item-행동-색상-활성	활성 목록 항목 동작 색깔.
	$item-썸네일 색상-활성	활성 목록 항목 썸네일 색상.
	$item-자막-색상-활성	활성 목록 항목 자막 색상.
$item-배경-선택	$item-텍스트-색상-선택	선택한 목록 항목의 텍스트 색상.
	$item-제목-색상-선택	선택한 목록, 항목, 제목 색상.
	$item-행동-색상-선택	선택한 목록 항목 행동 색상.
	$item 썸네일 색상 선택	선택한 목록 항목의 썸네일 색상.
	$item-자막-색상-선택	선택한 목록, 항목, 자막 색상.

메모: 실제 결과는 테마 변형에 따라 다를 수 있습니다.

목록의 배경을 어떻게 변경할 수 있는지 살펴보겠습니다. 먼저 index.scss를 구성 요소 .scss 파일로 가져와야 합니다.

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

가장 간단한 방법을 따라, 우리는 다음 주제를 확장하는 새로운 주제를 만듭니다.list-theme 그리고 다음만 통과하면$background 매개변수를 사용하면, 테마는 자동으로 상태 색상과 적절한 대비 전경을 계산합니다. 하지만 원한다면 수동으로 정의할 수도 있습니다.

$my-list-theme: list-theme(
  $background: #57a5cd
);

리스트 스타일링에 사용할 수 있는 전체 매개변수 목록은 섹션을list-theme 참고하세요.

마지막 단계는 새로 생성된 테마를 포함하는 것입니다.

@include css-vars($my-list-theme);

결과는 다음과 같습니다.

목록 구성요소에 대해 변경할 수 있는 매개변수의 전체 목록은 IgxListComponent 스타일을 참조하세요.

Styling with Tailwind

저희 맞춤형 Tailwind 유틸리티 클래스를 사용해 리스트를 스타일링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.

전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.

• 라이트 테마에는 클래스를 사용light-* 하세요.
• 어두운 테마에는 클래스를 사용dark-* 하세요.
• 접두사 뒤에 컴포넌트 이름을 덧붙이세요,light-list​dark-list 예: .

이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.

전체 부동산 목록은 list-theme에서 확인할 수 있습니다. 문법은 다음과 같습니다:

<igx-list class="!light-list ![--background:#81B698] ![--item-background:#A3C7B2]">
    ...
</igx-list>

Note

느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.

마지막에 당신의 목록은 다음과 같이 보여야 합니다:

API References

이 글에서는 Angular 목록 구성 요소로 많은 내용을 다루었습니다. 연락처 항목 목록을 만들었습니다. 목록 항목 내부에 아바타와 아이콘과 같은 추가 Ignite UI for Angular 구성 요소를 사용했습니다. 사용자 지정 항목 레이아웃을 만들고 스타일을 지정했습니다. 마지막으로 목록 필터링을 추가했습니다. 목록 구성 요소에는 탐색할 API가 몇 가지 더 있는데, 아래에 나열되어 있습니다.

• IgxListComponent API
• IgxListComponent 스타일
• IgxListItemComponent API

사용된 추가 Angular 구성 요소:

• IgxAvatarComponent API
• IgxAvatar컴포넌트 스타일
• IgxIconComponent API
• IgxIconComponent 스타일

Theming Dependencies

• IgxRipple 테마
• IgxAvatar 테마

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular