YouTube ChannelSchedule a CallSubscribe for Updates

カード

概要

Avonni Card コンポーネントは、構造化され視覚的に魅力的な方法でさまざまなコンテンツを表示するよう設計されています。カードは、製品の詳細、プロフィール、記事などを表示するための、整理されたわかりやすいコンテンツレイアウトを作成するのに役立ちます。

このコンポーネントは スロットを活用します 高度なカスタマイズを可能にするため、LWR サイトに最適です。Aura サイトはこのレベルのカスタマイズをサポートしていません。

Avonni Card の設定

カードタイトルを追加する

ユーザーがコンテンツをすばやく識別できるように、Avonni Card に明確で情報的なタイトルを付けます。手順は次のとおりです。

  • "Card Title" 属性を見つけます： この設定は、Experience Cloud サイトビルダー内の Avonni Card コンポーネントの構成オプションにあります。

  • タイトルを入力します： タイトルとして表示したいテキストを入力します。簡潔かつ説明的にしてください。

  • 配置： タイトルは自動的に Avonni Card の左側に表示され、視覚的なアンカーポイントを提供します。

例：

Avonni Card が製品情報を表示する場合、カードタイトルに「ロケーション」などを使用できます。

ヘッダーを表示

"Show Header" 属性を有効にすると、Avonni Card の右上に多用途のコンテナが追加されます。これにより次のことが可能になります：

  • カードのコンテンツをカスタマイズする： ボタン、アイコン、追加のテキストなどの他のコンポーネントをドラッグアンドドロップでヘッダーに直接配置できます。

  • 柔軟なレイアウトを作成する： ヘッダー内で要素を配置して、カードの見た目と機能を最適化できます。

例： 顧客アカウントページに「新しいケースを作成」ボタンを追加します。このボタンをクリックすると、ユーザーが新しいサポートケースを提出し必要な情報を収集するためのフロードイアログが起動します。

フッターを表示

このオプションは、Avonni Card の下部にフッターセクションを有効にします。提供されるフッタースロットを使用して、リンク、ボタン、追加のテキストなどのコンテンツを追加できます。

コンテンツ引き出しパディング

カード内のコンテンツ周囲のスペースを調整します。この設定を使用して、コンテンツを境界にぴったり合わせたタイトなレイアウトにするか、余白を多く取ることができます。

チュートリアル

名前
説明

MapCard ショーケースの作成

Avonni Card と Map コンポーネントを使用して MapCard ショーケースを作成する方法を学びます

外観

サイズ

  • 幅： カードの横幅を制御します。固定幅（ピクセル、パーセンテージ）を使用するか、カードがコンテンツやコンテナのサイズに合わせて調整されるようにできます。

  • 高さ： カードの縦の高さを制御します。幅と同様に、固定または柔軟な高さ設定を使用できます。

  • オーバーフロー： カードがその寸法を超えるコンテンツをどのように処理するかを指定します。オプションには次のようなものがあります：

    • 表示： コンテンツがカードの境界の外に流れます。

    • 隠す： コンテンツはカードの端で切り取られます。

    • スクロール： コンテンツがはみ出す場合にカードにスクロールバーを追加します。

ヘッダー

  • 背景色： カードのヘッダー領域の背景色を設定します。

  • テキスト色： ヘッダー内のテキスト要素の色を設定します。

  • フォントサイズ： ヘッダーのテキストのサイズを制御します。

  • フォントの太さ： ヘッダーのテキストの太さ（例：通常、太字、ライト）を設定します。

  • フォントファミリー： ヘッダーテキストに使用する書体を指定します。

  • 下境界のサイズ： ヘッダーとメインカードコンテンツを分離する下境界の厚さを設定します。

  • 下境界の色： ヘッダー内の下境界の色を設定します。

メディア

  • 幅： カードのメディアセクション（画像やビデオ用である可能性が高い）の幅を制御します。

  • 高さ： カードのメディアセクションの高さを制御します。

  • オブジェクトフィット： 画像やビデオをコンテナ内に合わせるためにどのようにリサイズするかを決定します。オプションには次のものがあります：

    • フィル： コンテンツを空間に合わせて引き伸ばし、アスペクト比が歪む可能性があります。

    • コンテイン： コンテンツを完全に収めるようにスケールし、空白領域が残る可能性があります。

    • カバー： コンテンツをスペース全体を覆うようにスケールし、トリミングされる可能性があります。

    • なし： コンテンツを元のサイズで表示します。

    • 縮小する： コンテンツがコンテナの寸法を超える場合に縮小され、それ以外は元のサイズで表示されます。

  • 境界サイズ： メディア要素の周りの境界の厚さを制御します。

  • 境界色： メディア要素の周りの境界の色を設定します。

ボーダー

  • サイズ： カード全体を囲む境界の全体的な厚さを設定します。

  • 半径： カードの角の丸みの度合いを制御します。

  • 色： カードの境界の色を設定します

最終更新

役に立ちましたか？