Blazor Card (カード) の概要
Ignite UI for Blazor Card は、テキスト、画像、アイコン、およびボタンを視覚的にリッチなプレゼンテーションで表示し、より詳細な情報へのエントリ ポイントとして機能します。Card を使用してマルチメディア ダッシュボードを作成できます。
Blazor Card の例
使用方法
Card コンポーネントは、様々なオブジェクト タイプ、サイズやサポートされるアクションが異なる同様のオブジェクトから成るコンテンツを表示できます。
作業の開始
IgbCard を使用する前に、次のように登録する必要があります:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbCardModule));
また、追加の CSS ファイルをリンクして、スタイルを IgbCard コンポーネントに適用する必要があります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
Ignite UI for Blazor の完全な概要については、作業の開始トピックを参照してください。
次に、デモのカード テンプレートを表すために、以下のコードを追加します:
<IgbCard>
<IgbCardMedia>
<img src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50">
</IgbCardMedia>
<IgbCardHeader>
<h3 slot="title">New York City</h3>
<h5 slot="subtitle">City in New York</h5>
</IgbCardHeader>
<IgbCardContent>
<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>
</IgbCardContent>
<IgbCardActions>
<IgbButton slot="start">
<IgbRipple />
Read more
</IgbButton>
<div slot="end">
<IgbIconButton name="twitter" >
<IgbRipple />
</IgbIconButton>
<IgbIconButton name="facebook" >
<IgbRipple />
</IgbIconButton>
</div>
</IgbCardActions>
</IgbCard>
上記を確認することができます。まず、h3 見出しのように、要素をヘッダー タイトルとしてタグ付けする場合は、要素を IgbCardHeader タグの間に配置し、そのスロット名を title に設定します。逆に、別の見出し要素を subtitle にしたい場合は、そのスロットに subtitle という名前を付けます。
カードに表示する画像や動画は、IgbCardMedia タグで囲みます。IgbCardMedia を使用すると、内部に配置されたコンテンツのサイズを変更して、要素のコンテンツ ボックス全体を埋めながらアスペクト比を維持できます。オブジェクトのアスペクト比がボックスのアスペクト比と一致しない場合、オブジェクトは収まるようにクリップされます。
IgbCardContent タグ内には何でも配置できます。通常テキストが配置されます。
最後に、IgbCardActions は、ボタンなどのアクション可能な項目を配置する場所です。
メディア、サムネイル、アバター
タイトルとサブタイトルの横のカード ヘッダーに画像またはアイコンを表示する場合は、要素のスロット プロパティを thumbnail に割り当てることで実行できます。
上記のカードを例にとると、IgbCardHeader の内容を編集し、slot="thumbnail" でアバターを追加できます。
<IgbCardHeader>
<IgbAvatar slot="thumbnail" Src="path/to/image" Initials="TS" />
<h3 slot="title">Title</h5>
<h5 slot="subtitle">Subtitle</h5>
</IgbCardHeader>
上記の例では、カード ヘッダーのタイトルとサブタイトルの横にアバターが表示されます。
Outlined カード
カードの outlined 属性を設定すると、細い境界線と置き換えてカードと背景を区別してカードからすべてのシャドウを削除します。
水平レイアウト
デフォルトでは、カードのすべてのセクション (ヘッダー、コンテンツ、メディア、アクション) は縦にレイアウトされています。垂直方向のスペースが多くある場合に便利です。カードのセクションを水平に配置したいとします。このようなレイアウトは、簡単な CSS で実現できます。
以下はアウトラインのある水平カードの例です。
<IgbCard>
<div class="card-horizontal">
<div>
<IgbCardHeader>
<img slot="thumbnail" src="ROZES-Under-the-Grave.jpg" />
<h5 slot="title">Rozes</h5>
<h5 slot="subtitle">Under the Grave (2016)</h5>
</IgbCardHeader>
<IgbCardContent>
<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>
</IgbCardContent>
</div>
<div class="divider"></div>
<IgbCardActions>
<IgbIconButton Name="previous" />
<IgbIconButton Name="play" />
<IgbIconButton Name="next" />
</IgbCardActions>
</div>
</IgbCard>
追加の div 要素を使用して IgbCardHeader と IgbCardContent をバンドルし、それらを垂直方向に整列させ、.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;
}
すべて適切に設定できると、結果は以下のようになります。
その他のレイアウト
IgbCard のレイアウトを使用すると、創造をさらに発展させることもできます。
以下は、半水平カードを作成する方法を示す例です。このカードでは、カードのすべてのセクションが垂直に配置され、IgbCardMedia が垂直セクションの横に表示されます。
<IgbCard>
<div class="semi-horizontal">
<div>
<IgbCardHeader>
<IgbAvatar slot="thumbnail" src/>
<h5 slot="title">HERE</h5>
<h5 slot="subtitle">by Mellow D</h5>
</IgbCardHeader>
<IgbCardContent>
<p>Far far away, behind the word mountains,
far from the countries Vokalia and Consonantia,
there live the blind texts.</p>
</IgbCardContent>
<IgbCardActions>
<IgbButton>Play Album</IgbButton>
</IgbCardActions>
</div>
<IgbCardMedia class="card-media">
<img src="here_media.jpg" />
</IgbCardMedia>
</div>
</IgbCard>
.semi-horizontal {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.card-media {
width: 96px;
min-width: 96px;
}
カード アクション
カードのアクション領域では、すでに説明したコンテンツに追加の設定を加えることができます。
テキスト ボタンとアイコン ボタンのスロット名を切り替えることで、それらの順序を逆にすることができます。
<IgbCardActions>
<IgbButton slot="start">
<IgbRipple />
Read more
</IgbButton>
<div slot="end">
<IgbIconButton name="twitter">
<IgbRipple />
</IgbIconButton>
<IgbIconButton name="facebook" >
<IgbRipple />
</IgbIconButton>
</div>
</IgbCardActions>
これで、アイコン ボタンがフラット スタイル テキスト ボタンの前に表示されます。
また、slot プロパティを省略して要素をデフォルトのスロットに移動するだけで、間にコンテンツを追加することもできます。
スタイル設定
カードはさまざまな要素をラップするコンテナであるため、スタイル設定は、その基本要素 (ヘッダー、コンテンツ、メディア、およびアクションのサブコンポーネント) をスタイル設定することによって行われます。さらに、header コンポーネント (IgbCardHeader) は、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 コンポーネントの詳細について説明しました。シンプルなカードを作成し、画像をいくつか追加して、もう少し魅力的にしました。カード内にアバター、ボタン、アイコンなどの追加の Blazor を使用して、エクスペリエンスを充実させ、いくつかの機能を追加しました。そして最後に、基本要素の原色を変更することでカードの外観を変更しました。
API リファレンス
IgbAvatarIgbButtonIgbCardActionsIgbCardContentIgbCardHeaderIgbCardMediaIgbCardIgbIconButtonIgbIcon