React 리스트 개요

Ignite UI for React 항목 그룹을 표시할 때 매우 유용합니다. 텍스트 항목의 간단한 목록이나 다양한 레이아웃 요소의 배열을 포함하는 보다 복잡한 목록을 만들 수 있습니다. IgrList 구성 요소는 항목 행을 표시하고 하나 이상의 헤더도 지원합니다. 각 목록 항목은 완전히 템플릿화할 수 있으며 모든 유효한 HTML 또는 기타 구성 요소를 지원합니다.

React 목록 예제

다음 예는 이름과 전화번호 속성이 있는 연락처로 채워진 목록을 나타냅니다. 아래에 설명된 IgrList 구성 요소는 IgrAvatar 및 IgrButton 요소를 사용하여 사용자 경험을 풍부하게 하고 문자 및 통화 작업에 대한 아바타 사진 및 버튼 설정 기능을 노출합니다.

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrList, IgrListItem, IgrListHeader, IgrRadioGroup, IgrRadio, IgrAvatar, IgrButton,
         IgrListModule, IgrRadioGroupModule, IgrRadioModule, IgrAvatarModule, IgrButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrAvatarModule.register();
IgrButtonModule.register();
IgrListModule.register();
IgrRadioGroupModule.register();
IgrRadioModule.register();

export default class ListOverview extends React.Component<any, any> {

    constructor(props: any) {
        super(props);        
        this.state = { listSize: "medium" };
        this.onRadioChange = this.onRadioChange.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrRadioGroup alignment="horizontal" style={{marginBottom: '10px'}}>
                    <IgrRadio name="size" value="small" labelPosition="after" change={this.onRadioChange}>
                        <span>Small</span>
                    </IgrRadio>
                    <IgrRadio name="size" value="medium" labelPosition="after" checked={true} change={this.onRadioChange}>
                        <span>Medium</span>
                    </IgrRadio>
                    <IgrRadio name="size" value="large" labelPosition="after" change={this.onRadioChange}>
                        <span>Large</span>
                    </IgrRadio>
                </IgrRadioGroup>

                <IgrList className={'size-' + this.state.listSize}>
                    <IgrListHeader>
                        <span>Contacts</span>
                    </IgrListHeader>
                    <IgrListItem>
                        <div slot="start">
                            <IgrAvatar src="https://static.infragistics.com/xplatform/images/avatars/8.jpg" shape="circle" />
                        </div>                        
                        <h2 slot="title">Terrance Orta</h2>
                        <span slot="subtitle">770-504-2217</span>
                        <div slot="end">
                            <IgrButton variant="outlined">
                                <span>Text</span>
                            </IgrButton>
                        </div>
                        <div slot="end">
                            <IgrButton variant="outlined">
                                <span>Call</span>
                            </IgrButton>
                        </div>
                    </IgrListItem>
                    <IgrListItem>
                        <div slot="start">
                            <IgrAvatar src="https://static.infragistics.com/xplatform/images/avatars/17.jpg" shape="circle" />
                        </div>
                        <h2 slot="title">Richard Mahoney</h2>
                        <span slot="subtitle">423-676-2869</span>
                        <div slot="end">
                            <IgrButton variant="outlined">
                                <span>Text</span>
                            </IgrButton>
                        </div>
                        <div slot="end">
                            <IgrButton variant="outlined">
                                <span>Call</span>
                            </IgrButton>
                        </div>
                    </IgrListItem>
                    <IgrListItem>
                        <div slot="start">
                            <IgrAvatar src="https://static.infragistics.com/xplatform/images/avatars/9.jpg" shape="circle" />
                        </div>
                        <h2 slot="title">Donna Price</h2>
                        <span slot="subtitle">859-496-2817</span>
                        <div slot="end">
                            <IgrButton variant="outlined">
                                <span>Text</span>
                            </IgrButton>
                        </div>
                        <div slot="end">
                            <IgrButton variant="outlined">
                                <span>Call</span>
                            </IgrButton>
                        </div>
                    </IgrListItem>
                </IgrList>
            </div>
        );
    }

    public onRadioChange(e: any) {
        if (e.checked == true) {
            this.setState({ listSize: e.value });
        }
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ListOverview/>);
tsxコピー

.size-small {
    --ig-size: var(--ig-size-small);
}

.size-medium {
    --ig-size: var(--ig-size-medium);
}

.size-large {
    --ig-size: var(--ig-size-large);
}
cssコピー

Edit in: Codesandbox

이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

용법

기본적으로 목록 웹 구성 요소를 사용하면 항목의 수직 목록을 쉽게 표시할 수 있습니다.

먼저, 다음 명령을 실행하여 Ignite UI for React 설치해야 합니다.

npm install igniteui-react
cmd

그런 다음 IgrList와 필요한 CSS를 가져와서 다음과 같이 모듈을 등록해야 합니다.

import { IgrListModule, IgrList, IgrListHeader, IgrListItem } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrListModule.register();
tsx

Ignite UI for React에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

목록 항목 추가

이제 다음 코드를 추가하여 간단한 항목 목록을 얻을 수 있습니다.

<IgrList>
    <IgrListHeader>
        <span>Header</span>
    </IgrListHeader>
    <IgrListItem>
        <h2 slot="title">Item 1</h2>
    </IgrListItem>
    <IgrListItem>
        <h2 slot="title">Item 2</h2>
    </IgrListItem>
    <IgrListItem>
        <h2 slot="title">Item 3</h2>
    </IgrListItem>
</IgrList>
tsx

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

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrList, IgrListItem, IgrListHeader, IgrListModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrListModule.register();

export default class ListAddListItems extends React.Component<any, any> {

    constructor(props: any) {
        super(props);                
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrList>
                    <IgrListHeader>
                        <span>Header</span>
                    </IgrListHeader>
                    <IgrListItem>
                        <h2 slot="title">Item 1</h2>
                    </IgrListItem>
                    <IgrListItem>
                        <h2 slot="title">Item 2</h2>
                    </IgrListItem>
                    <IgrListItem>
                        <h2 slot="title">Item 3</h2>
                    </IgrListItem>
                </IgrList>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ListAddListItems/>);
tsxコピー

Edit in: Codesandbox

게임을 조금 강화하고 목록 항목을 향상시켜 보겠습니다. 이름 아래에 이름과 전화번호가 표시되는 연락처 목록을 만들고 싶다고 가정해 보겠습니다. 이를 달성하기 위해 다음 예에서 설명한 대로 목록 항목과 함께 제공되는 일부 슬롯을 사용할 수 있습니다.

<IgrList>
    <IgrListHeader>
        <span>Contacts</span>
    </IgrListHeader>
    <IgrListItem>
        <h2 slot="title">Terrance Orta</h2>
        <span slot="subtitle">770-504-2217</span>
    </IgrListItem>
    <IgrListItem>
        <h2 slot="title">Richard Mahoney</h2>
        <span slot="subtitle">423-676-2869</span>
    </IgrListItem>
    <IgrListItem>
        <h2 slot="title">Donna Price</h2>
        <span slot="subtitle">859-496-2817</span>
    </IgrListItem>
</IgrList>
tsx

위의 코드를 구현한 후 목록 구성 요소는 이제 다음과 같아야 합니다.

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrList, IgrListItem, IgrListHeader, IgrListModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrListModule.register();

export default class ListItemContent extends React.Component<any, any> {

    constructor(props: any) {
        super(props);                
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrList>
                    <IgrListHeader>
                        <span>Contacts</span>
                    </IgrListHeader>
                    <IgrListItem>
                        <h2 slot="title">Terrance Orta</h2>
                        <span slot="subtitle">770-504-2217</span>
                    </IgrListItem>
                    <IgrListItem>
                        <h2 slot="title">Richard Mahoney</h2>
                        <span slot="subtitle">423-676-2869</span>
                    </IgrListItem>
                    <IgrListItem>
                        <h2 slot="title">Donna Price</h2>
                        <span slot="subtitle">859-496-2817</span>
                    </IgrListItem>
                </IgrList>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ListItemContent/>);
tsxコピー

Edit in: Codesandbox

아바타 및 버튼 추가

​IgrList 구성 요소와 함께 다른 구성 요소 중 일부를 사용하여 경험을 풍부하게 하고 일부 기능을 추가할 수 있습니다. 이름과 전화번호 왼쪽에 멋진 사진 아바타가 있을 수 있습니다. 또한 사용자가 연락처에 문자를 보내고 전화를 걸 수 있도록 오른쪽에 몇 가지 버튼을 추가할 수 있으므로 연락처 목록 구성 요소를 업데이트하여 아바타와 버튼을 표시해 보겠습니다. 목록 항목의 슬롯 중 일부를 사용하여 이를 수행할 수 있습니다.

<IgrList>
    <IgrListHeader>
        <span>Contacts</span>
    </IgrListHeader>
    <IgrListItem>
        <div slot="start">
            <IgrAvatar src="https://static.infragistics.com/xplatform/images/avatars/8.jpg" shape="circle" />
        </div>
        <h2 slot="title">Terrance Orta</h2>
        <span slot="subtitle">770-504-2217</span>
        <div slot="end">
            <IgrButton variant="outlined">
                <span>Text</span>
            </IgrButton>
        </div>
        <div slot="end">
            <IgrButton variant="outlined">
                <span>Call</span>
            </IgrButton>
        </div>
    </IgrListItem>
    <IgrListItem>
        <div slot="start">
            <IgrAvatar src="https://static.infragistics.com/xplatform/images/avatars/17.jpg" shape="circle" />
        </div>
        <h2 slot="title">Richard Mahoney</h2>
        <span slot="subtitle">423-676-2869</span>
        <div slot="end">
            <IgrButton variant="outlined">
                <span>Text</span>
            </IgrButton>
        </div>
        <div slot="end">
            <IgrButton variant="outlined">
                <span>Call</span>
            </IgrButton>
        </div>
    </IgrListItem>
    <IgrListItem>
        <div slot="start">
            <IgrAvatar src="https://static.infragistics.com/xplatform/images/avatars/9.jpg" shape="circle" />
        </div>
        <h2 slot="title">Donna Price</h2>
        <span slot="subtitle">859-496-2817</span>
        <div slot="end">
            <IgrButton variant="outlined">
                <span>Text</span>
            </IgrButton>
        </div>
        <div slot="end">
            <IgrButton variant="outlined">
                <span>Call</span>
            </IgrButton>
        </div>
    </IgrListItem>
</IgrList>
tsx

​start 슬롯은 목록 항목의 다른 모든 콘텐츠 앞에 일종의 미디어를 추가하는 데 사용됩니다. 대상 요소(이 경우 IgrAvatar 구성 요소)에도 기본 위치와 간격이 제공됩니다.

​end 슬롯은 스위치, 버튼, 확인란 등으로 표시되는 일종의 작업이나 메타데이터가 있는 목록 항목에 사용됩니다. 우리는 IgrButton 구성 요소를 사용합니다.

또한 사용자가--ig-size CSS 변수를 사용하여 목록의 크기를 변경할 수 있도록 허용하겠습니다. 모든 크기 값을 표시하기 위해 일부 라디오 버튼을 추가하겠습니다. 이렇게 하면 하나를 선택할 때마다 목록의 크기가 변경됩니다.

<IgrRadioGroup alignment="horizontal">
    <IgrRadio value="small" labelPosition="after" change={this.onRadioChange}>
        <span>Small</span>
    </IgrRadio>
    <IgrRadio value="medium" labelPosition="after" change={this.onRadioChange}>
        <span>Medium</span>
    </IgrRadio>
    <IgrRadio value="large" labelPosition="after" checked={true} change={this.onRadioChange}>
        <span>Large</span>
    </IgrRadio>
</IgrRadioGroup>

<IgrList size={this.state.listSize} />

public onRadioChange(e: any) {
    if (e.checked == true) {
        this.setState({ listSize: e.value });
    }
}
tsx

위 코드를 구현한 결과는 다음과 같아야 합니다.

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrList, IgrListItem, IgrListHeader, IgrRadioGroup, IgrRadio, IgrAvatar, IgrButton,
         IgrListModule, IgrRadioGroupModule, IgrRadioModule, IgrAvatarModule, IgrButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrAvatarModule.register();
IgrButtonModule.register();
IgrListModule.register();
IgrRadioGroupModule.register();
IgrRadioModule.register();

export default class ListOverview extends React.Component<any, any> {

    constructor(props: any) {
        super(props);        
        this.state = { listSize: "medium" };
        this.onRadioChange = this.onRadioChange.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrRadioGroup alignment="horizontal" style={{marginBottom: '10px'}}>
                    <IgrRadio name="size" value="small" labelPosition="after" change={this.onRadioChange}>
                        <span>Small</span>
                    </IgrRadio>
                    <IgrRadio name="size" value="medium" labelPosition="after" checked={true} change={this.onRadioChange}>
                        <span>Medium</span>
                    </IgrRadio>
                    <IgrRadio name="size" value="large" labelPosition="after" change={this.onRadioChange}>
                        <span>Large</span>
                    </IgrRadio>
                </IgrRadioGroup>

                <IgrList className={'size-' + this.state.listSize}>
                    <IgrListHeader>
                        <span>Contacts</span>
                    </IgrListHeader>
                    <IgrListItem>
                        <div slot="start">
                            <IgrAvatar src="https://static.infragistics.com/xplatform/images/avatars/8.jpg" shape="circle" />
                        </div>                        
                        <h2 slot="title">Terrance Orta</h2>
                        <span slot="subtitle">770-504-2217</span>
                        <div slot="end">
                            <IgrButton variant="outlined">
                                <span>Text</span>
                            </IgrButton>
                        </div>
                        <div slot="end">
                            <IgrButton variant="outlined">
                                <span>Call</span>
                            </IgrButton>
                        </div>
                    </IgrListItem>
                    <IgrListItem>
                        <div slot="start">
                            <IgrAvatar src="https://static.infragistics.com/xplatform/images/avatars/17.jpg" shape="circle" />
                        </div>
                        <h2 slot="title">Richard Mahoney</h2>
                        <span slot="subtitle">423-676-2869</span>
                        <div slot="end">
                            <IgrButton variant="outlined">
                                <span>Text</span>
                            </IgrButton>
                        </div>
                        <div slot="end">
                            <IgrButton variant="outlined">
                                <span>Call</span>
                            </IgrButton>
                        </div>
                    </IgrListItem>
                    <IgrListItem>
                        <div slot="start">
                            <IgrAvatar src="https://static.infragistics.com/xplatform/images/avatars/9.jpg" shape="circle" />
                        </div>
                        <h2 slot="title">Donna Price</h2>
                        <span slot="subtitle">859-496-2817</span>
                        <div slot="end">
                            <IgrButton variant="outlined">
                                <span>Text</span>
                            </IgrButton>
                        </div>
                        <div slot="end">
                            <IgrButton variant="outlined">
                                <span>Call</span>
                            </IgrButton>
                        </div>
                    </IgrListItem>
                </IgrList>
            </div>
        );
    }

    public onRadioChange(e: any) {
        if (e.checked == true) {
            this.setState({ listSize: e.value });
        }
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ListOverview/>);
tsxコピー

.size-small {
    --ig-size: var(--ig-size-small);
}

.size-medium {
    --ig-size: var(--ig-size-medium);
}

.size-large {
    --ig-size: var(--ig-size-large);
}
cssコピー

Edit in: Codesandbox

스타일링

는 IgrList 여러 CSS 부분을 노출하여 스타일을 완전히 제어할 수 있도록 합니다.

이름	설명
start	시작 컨테이너입니다.
end	끝 컨테이너입니다.
content	헤더 및 사용자 지정 콘텐츠 컨테이너입니다.
header	제목 및 부제목 컨테이너입니다.
title	제목 컨테이너입니다.
subtitle	자막 컨테이너입니다.

igc-list-header {
  font-size: 20px;
  font-weight: 700;
  color: var(--ig-primary-700);
}

igc-list-item::part(title) {
  font-size: 18px;
  color: var(--ig-primary-600);
}

igc-list-item::part(subtitle) {
  color: var(--ig-primary-300);
}
css

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './ListStyling.css';
import { IgrList, IgrListItem, IgrListHeader, IgrAvatar, IgrButton, IgrListModule, IgrAvatarModule, IgrButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrAvatarModule.register();
IgrButtonModule.register();
IgrListModule.register();

export default class ListStyling extends React.Component<any, any> {

    constructor(props: any) {
        super(props);                
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrList>
                    <IgrListHeader>
                        <span>Contacts</span>
                    </IgrListHeader>
                    <IgrListItem>
                        <div slot="start">
                            <IgrAvatar src="https://static.infragistics.com/xplatform/images/avatars/8.jpg" shape="circle" />
                        </div>                        
                        <h2 slot="title">Terrance Orta</h2>
                        <span slot="subtitle">770-504-2217</span>
                        <div slot="end">
                            <IgrButton variant="contained">
                                <span>Text</span>
                            </IgrButton>
                        </div>
                        <div slot="end">
                            <IgrButton variant="contained">
                                <span>Call</span>
                            </IgrButton>
                        </div>
                    </IgrListItem>
                    <IgrListItem>
                        <div slot="start">
                            <IgrAvatar src="https://static.infragistics.com/xplatform/images/avatars/17.jpg" shape="circle" />
                        </div>
                        <h2 slot="title">Richard Mahoney</h2>
                        <span slot="subtitle">423-676-2869</span>
                        <div slot="end">
                            <IgrButton variant="contained">
                                <span>Text</span>
                            </IgrButton>
                        </div>
                        <div slot="end">
                            <IgrButton variant="contained">
                                <span>Call</span>
                            </IgrButton>
                        </div>
                    </IgrListItem>
                    <IgrListItem>
                        <div slot="start">
                            <IgrAvatar src="https://static.infragistics.com/xplatform/images/avatars/9.jpg" shape="circle" />
                        </div>
                        <h2 slot="title">Donna Price</h2>
                        <span slot="subtitle">859-496-2817</span>
                        <div slot="end">
                            <IgrButton variant="contained">
                                <span>Text</span>
                            </IgrButton>
                        </div>
                        <div slot="end">
                            <IgrButton variant="contained">
                                <span>Call</span>
                            </IgrButton>
                        </div>
                    </IgrListItem>
                </IgrList>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ListStyling/>);
tsxコピー

igc-list-header {
    font-size: 20px;
    font-weight: 700;
    color: #3f51b5;
}

igc-list-item::part(title) {
    font-size: 18px;
    color: #3f51b5;
}

igc-list-item::part(subtitle) {
    color: #0099ff;
}

igc-list-item::part(end) {
    --igc-secondary-500: 230,48%,47%;
}
cssコピー

Edit in: Codesandbox

이 글에서는 IgrList 컴포넌트에 대해 많은 내용을 다루었습니다. 먼저 텍스트 항목이 있는 간단한 목록을 만들었습니다. 그런 다음 연락처 항목 목록을 만들고 IgrAvatar 및 IgrButton과 같은 추가 Ignite UI for React 컴포넌트를 사용하여 기능을 추가했습니다. 마지막으로 노출된 CSS 부분을 통해 컴포넌트의 모양을 변경했습니다.

API 참조

• IgrAvatar
• IgrButton
• IgrRadioGroup
• IgrRadio
• IgrListHeader
• IgrListItem
• IgrList
• Styling & Themes

추가 리소스

• Ignite UI for React 포럼
• Ignite UI for React GitHub