React 리스트 개요

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

    React List Example

    다음 예시는 이름과 전화번호 속성을 가진 연락처로 채워진 목록을 나타냅니다. 아래 시연된 구성 요소는IgrList와IgrAvatar 요소를 사용하여IgrButton 사용자 경험을 풍부하게 하고, 아바타 이미지와 버튼 설정, 텍스트 및 통화 동작 기능을 제공합니다.

    Usage

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

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

    npm install igniteui-react

    그 다음에는 다음과 같이 필요한 CSS를IgrList 가져오면 됩니다:

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

    Ignite UI for React에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

    Add List Items

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

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

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

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

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

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

    Adding Avatar and Buttons

    다른 컴포넌트들을 컴포넌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>

    이 슬롯은start 리스트 항목의 다른 모든 콘텐츠 전에 어떤 미디어를 추가하는 용도로 사용됩니다. 대상 요소, 즉 컴IgrAvatar 포넌트는 기본 위치와 간격도 제공됩니다.

    슬롯은end 스위치, 버튼, 체크박스 등으로 표현되는 어떤 행동이나 메타데이터가 있는 리스트 항목에 사용하도록 설계되었습니다. 우리는 구성 요소를 사용할IgrButton 것입니다.

    사용자가 CSS 변수를 사용해--ig-size 리스트 크기를 변경할 수도 있게 해봅시다. 모든 크기 값을 표시할 수 있는 라디오 버튼을 추가할 예정입니다. 이렇게 하면 선택될 때마다 목록의 크기를 변경할 수 있습니다.

    <IgrRadioGroup alignment="horizontal" style={{marginBottom: '10px'}}>
    <IgrRadio name="size" value="small" labelPosition="after" checked={this.state.listSize === "small" } onChange={this.onRadioChange}>
        <span>Small</span>
    </IgrRadio>
    <IgrRadio name="size" value="medium" labelPosition="after" checked={this.state.listSize === "medium" } onChange={this.onRadioChange}>
        <span>Medium</span>
    </IgrRadio>
    <IgrRadio name="size" value="large" labelPosition="after" checked={ this.state.listSize === "large" } onChange={this.onRadioChange}>
        <span>Large</span>
    </IgrRadio>
</IgrRadioGroup>

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

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

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

    Styling

    이 문서는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);
}

    이 글에서는 이 구성 요소에 대해IgrList 많은 내용을 다뤘습니다. 먼저, 텍스트 항목으로 간단한 목록을 만들었습니다. 그 다음, 연락처 항목 목록을 만들고 추가적인 Ignite UI for React 컴포넌트(예: andIgrAvatar​IgrButton)를 사용해 기능을 추가했습니다. 마지막으로, 노출된 CSS 부분을 통해 컴포넌트의 외관을 변경했습니다.

    API References

    Additional Resources