React 카드 개요
Ignite UI for React 텍스트, 이미지, 아이콘, 버튼을 시각적으로 풍부한 프레젠테이션으로 표시하여 더 자세한 정보로의 진입점으로 활용할 수 있습니다. 카드를 사용하여 멀티미디어 대시보드를 만들 수 있습니다.
React Card Example
Usage
카드를 사용하면 다양한 유형의 개체 또는 크기와 지원되는 작업이 다를 수 있는 유사한 개체로 구성된 콘텐츠를 쉽게 표시할 수 있습니다.
시작하기
먼저, 다음 명령을 실행하여 Ignite UI for React 설치해야 합니다.
npm install igniteui-react
그 다음에는 다음과 같이 필요한 CSS를IgrCard 가져오면 됩니다:
import { IgrCard, IgrCardHeader, IgrCardContent, IgrCardMedia, IgrCardActions } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
Ignite UI for React에 대한 완전한 소개는 '시작 주제'를 읽어보세요.
그런 다음 데모 카드 템플릿을 나타내기 위해 다음 코드를 추가할 수 있습니다.
<IgrCard>
<IgrCardMedia>
<img src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50"></img>
</IgrCardMedia>
<IgrCardHeader>
<h3 slot="title">New York City</h3>
<h5 slot="subtitle">City in New York</h5>
</IgrCardHeader>
<IgrCardContent>
<p>New York City comprises 5 boroughs sitting where the
Hudson River meets the Atlantic Ocean. At its core is Manhattan,
a densely populated borough that’s among the world’s major commercial,
financial and cultural centers.</p>
</IgrCardContent>
<IgrCardActions>
<IgrButton>
<span>Read more</span>
<IgrRipple />
</IgrButton>
<div slot="end">
<IgrIconButton name="twitter" collection="material">
<IgrRipple />
</IgrIconButton>
<IgrIconButton name="facebook" collection="material">
<IgrRipple />
</IgrIconButton>
</div>
</IgrCardActions>
</IgrCard>
위에서 몇 가지를 눈에 띄게 할 것입니다. 먼저, 헤더 제목으로 원소를 태그 하고 싶을 때,h3 태그 사이에IgrCardHeader 넣고 슬롯 이름을 다음title으로 설정합니다. 반대로, 만약 다른 제목 요소를subtitle 만들고 싶다면, 그 슬롯subtitle을 명명할 것입니다.
카드에 보여주고 싶은 이미지나 영상은 태그 안에IgrCardMedia 감싸서 보여줘요. 이 기능은IgrCardMedia 내부 콘텐츠 크기를 조절하여 요소의 전체 콘텐츠 박스를 채우면서도 화면 비율을 유지하도록 할 수 있습니다. 객체의 종횡비가 상자의 종횡비와 일치하지 않으면, 객체는 맞게 클리핑됩니다.
태그 안에IgrCardContent 무엇이든 넣을 수 있습니다. 보통 문자는 거기로 가요.
마지막으로,IgrCardActions 버튼 같은 실행 가능한 아이템을 배치하는 곳입니다.
Media, Thumbs, and Avatars
카드 헤더에서 제목과 자막 옆에 이미지나 아이콘을 표시하고 싶다면, 해당 요소의 슬롯 속성을thumbnail 할당하면 됩니다.
위 카드를 예로 들면, 내용을 편집IgrCardHeader 하고 다음과 같은slot="thumbnail" 아바타를 추가할 수 있습니다:
<IgrCardHeader>
<div slot="thumbnail">
<IgrAvatar src="path/to/image" initials="TS" />
</div>
<h3 slot="title">Title</h3>
<h5 slot="subtitle">Subtitle</h5>
</IgrCardHeader>
위의 예에서는 카드 헤더의 제목 및 부제와 함께 아바타를 표시합니다.
Outlined cards
카드에는 속성을 가지고outlined 있는데, 이 속성을 설정하면 카드의 그림자를 제거하고 얇은 테두리로 대체하여 카드를 배경과 분리합니다.
Horizontal Layout
기본적으로 카드의 모든 섹션(헤더, 콘텐츠, 미디어, 액션)은 세로로 배치되어 있습니다. 수직 공간이 넓을 때 이런 점이 좋습니다. 예를 들어 카드의 섹션을 가로로 배치하고 싶다고 가정해 봅시다. 간단한 CSS로 이런 레이아웃을 구현할 수 있습니다.
다음은 윤곽선이 있는 가로 카드의 예입니다.
<IgrCard>
<div className="card-horizontal">
<div>
<IgrCardHeader>
<img src="https://static.infragistics.com/xplatform/images/music/rozes.jpg" slot="thumbnail"></img>
<h5 slot="title">Rozes</h5>
<h5 slot="subtitle">Under the Grave (2016)</h5>
</IgrCardHeader>
<IgrCardContent>
<p>As I have always said: I write what’s real and what’s true,
even if it means throwing myself under the bus.</p>
</IgrCardContent>
</div>
<div className="divider"></div>
<IgrCardActions>
<span className="material-icons">skip_previous</span>
<span className="material-icons">play_arrow</span>
<span className="material-icons">skip_next</span>
</IgrCardActions>
</div>
</IgrCard>
우리는 추가div 요소를IgrCardHeader 사용해 와IgrCardContent를 묶어 수직으로 정렬하고, 클래스를 래핑.card-horizontal 요소에 적용div 해 카드의 두 부분을 수평으로 정렬하고 있습니다.
그.card-horizontal 클래스가 적용하는 스타일은 다음과 같습니다:
.card-horizontal {
display: flex;
flex-direction: row;
flex: 1 1 0%;
}
.card-horizontal img {
width: 64px;
height: 64px;
}
.card-horizontal igc-card-actions {
justify-content: center;
}
모든 것이 순조롭게 진행되었다면 카드는 다음과 같아야 합니다.
Alternative layouts
레이아웃을 더 창의적으로 바꿀IgrCard 수 있습니다.
아래는 반가로 카드를 만드는 방법을 보여주는 예시로, 카드의 모든 섹션을 세로로 배치하고, 세IgrCardMedia로 섹션 옆에 나타나는 방식입니다.
<IgrCard>
<div className="semi-horizontal">
<div>
<IgrCardHeader>
<IgrAvatar src="https://static.infragistics.com/xplatform/images/music/singer_with_mic.jpg" slot="thumbnail" />
<h5 slot="title">HERE</h5>
<h5 slot="subtitle">by Mellow D</h5>
</IgrCardHeader>
<IgrCardContent>
<p>Far far away, behind the word mountains,
far from the countries Vokalia and Consonantia,
there live the blind texts.</p>
</IgrCardContent>
<IgrCardActions>
<IgrButton><span>Play Album</span></IgrButton>
</IgrCardActions>
</div>
<IgrCardMedia className='card-media'>
<img src="https://static.infragistics.com/xplatform/images/music/singer_female.jpg"></img>
</IgrCardMedia>
</div>
</IgrCard>
.semi-horizontal {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.card-media {
width: 96px;
min-width: 96px;
}
Card Actions
카드 작업 영역에서는 이미 언급한 내용에 대한 추가 구성을 허용합니다.
슬롯 이름을 전환하여 텍스트 버튼과 아이콘 버튼의 순서를 바꿀 수 있습니다.
<IgrCardActions>
<IgrButton>
<span>Read more</span>
<IgrRipple />
</IgrButton>
<div slot="start">
<IgrIconButton className="marginIcon" name="twitter" collection="material">
<IgrRipple />
</IgrIconButton>
<IgrIconButton name="facebook" collection="material">
<IgrRipple />
</IgrIconButton>
</div>
</IgrCardActions>
이제 아이콘 버튼이 텍스트 버튼 앞에 나타납니다.
간단히 슬롯 속성을 생략하고 요소가 기본 슬롯으로 이동하도록 하여 그 사이에 더 많은 콘텐츠를 추가할 수도 있습니다.
Styling
카드는 여러 요소를 감싸는 컨테이너이기 때문에, 스타일링은 구성 요소인 'theIgrCardHeader',IgrCardContent'IgrCardMediasIgrCardActions, 그리고 sub-components'를 스타일링하여 이루어집니다.
igc-card {
background-color: var(--ig-secondary-900);
}
igc-card-content,
igc-card-header::part(title) {
color: var(--ig-primary-500-contrast);
}
igc-card-header > *[slot="subtitle"] {
color: var(--ig-warn-500);
opacity: 0.9;
}
igc-icon-button::part(base) {
background-color: var(--ig-primary-300);
}
Summary
이 글에서는 카드 구성 요소로 많은 것을 다루었습니다. 간단한 카드를 만들고 이미지를 추가하여 조금 더 매력적으로 만들었습니다. 아바타, 버튼, 아이콘과 같은 추가 React 카드 내부에 사용하여 경험을 풍부하게 하고 기능을 추가했습니다. 마지막으로 빌딩 블록의 주요 색상을 변경하여 카드의 모양을 변경했습니다.
API References
IgrAvatarIgrButtonIgrCardActionsIgrCardContentIgrCardHeaderIgrCardMediaIgrCardIgrIconButtonIgrIconStyling & Themes