React Card (カード) の概要
Ignite UI for React Card は、テキスト、画像、アイコン、およびボタンを視覚的にリッチなプレゼンテーションで表示し、より詳細な情報へのエントリ ポイントとして機能します。Card を使用してマルチメディア ダッシュボードを作成できます。
React Card の例
使用方法
Card コンポーネントは、様々なオブジェクト タイプ、サイズやサポートされるアクションが異なる同様のオブジェクトから成るコンテンツを表示できます。
作業の開始
まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:
npm install igniteui-react
次に、以下のように、IgrCard とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:
import { IgrCardModule, IgrCard, IgrCardHeader, IgrCardContent, IgrCardMedia, IgrCardActions } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrCardModule.register();
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 は、ボタンなどのアクション可能な項目を配置する場所です。
メディア、サムネイル、アバター
タイトルとサブタイトルの横のカード ヘッダーに画像またはアイコンを表示する場合は、要素のスロット プロパティを 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 カード
カードの outlined 属性を設定すると、細い境界線と置き換えてカードと背景を区別してカードからすべてのシャドウを削除します。
水平レイアウト
デフォルトでは、カードのすべてのセクション (ヘッダー、コンテンツ、メディア、アクション) は縦にレイアウトされています。垂直方向のスペースが多くある場合に便利です。カードのセクションを水平に配置したいとします。このようなレイアウトは、簡単な 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 要素に適用して、カードの 2 つのセクションを水平方向に整列させます。
.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;
}
すべて適切に設定できると、結果は以下のようになります。
その他のレイアウト
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;
}
カード アクション
カードのアクション領域では、すでに説明したコンテンツに追加の設定を加えることができます。
テキスト ボタンとアイコン ボタンのスロット名を切り替えることで、それらの順序を逆にすることができます。
<IgrCardActions>
<IgrButton>
<span>Read more</span>
<IgrRipple />
</IgrButton>
<div slot="end">
<IgrIconButton ref={this.iconRef} className="marginIcon" name="twitter" collection="material">
<IgrRipple />
</IgrIconButton>
<IgrIconButton name="facebook" collection="material">
<IgrRipple />
</IgrIconButton>
</div>
</IgrCardActions>
これで、アイコン ボタンがフラット スタイル テキスト ボタンの前に表示されます。
また、slot プロパティを省略して要素をデフォルトのスロットに移動するだけで、間にコンテンツを追加することもできます。
スタイル設定
カードはさまざまな要素をラップするコンテナであるため、スタイル設定は、その基本要素 (ヘッダー、コンテンツ、メディア、およびアクションのサブコンポーネント) をスタイル設定することによって行われます。さらに、header コンポーネント (IgrCardHeader) は、3 つの CSS パーツ (header、title、subtitle) を公開します。これにより、ラッピング要素と 2 つのタイトル要素のスタイルを設定できます。
igc-card {
background-color: #011627;
}
igc-card-content,
igc-card-header::part(title) {
color: #FEFEFE;
}
igc-card-header::part(subtitle) {
color: #ECAA53;
opacity: 0.9;
}
igc-icon-button+igc-icon-button {
margin-left: 10px;
}
まとめ
このトピックでは Card コンポーネントの詳細について説明しました。シンプルなカードを作成し、画像をいくつか追加して、もう少し魅力的にしました。カード内にアバター、ボタン、アイコンなどの追加の React を使用して、エクスペリエンスを充実させ、いくつかの機能を追加しました。そして最後に、基本要素の原色を変更することでカードの外観を変更しました。
API リファレンス
IgrAvatarIgrButtonIgrCardActionsIgrCardContentIgrCardHeaderIgrCardMediaIgrCardIgrIconButtonIgrIcon