カード
概要
Avonni カード それはコンテンツのための柔軟なビルディングブロックまたはフレームです。その主な目的は他のコンポーネントを保持し、明確な視覚的境界と専用のヘッダーおよびフッターを提供することです。
主な特長
コンテンツコンテナ： カードのメインボディはスロットで、そこに配置できます 任意の 他のAvonniコンポーネント（または複数のコンポーネント）。
組み込みのヘッダーとフッター： タイトル、アイコン、アクション、フッターコンテンツのための専用領域を含みます。
レイアウトの整理： ページのコンテンツを明確で論理的なセクションに構成するのに役立ちます。
視覚的魅力： 情報を整理され、モダンで、理解しやすい形式で提示します。
メディア統合： 背景やコンテンツの横に画像を配置することができます。
使用例
ダッシュボードウィジェット： ホームやアプリページ上で主要な指標、チャート、データビジュアライゼーションを整理された方法で表示します。
プロフィールの概要： 名前、写真、クイックリンクなど、顧客やユーザープロファイルの主要情報を表示します。
製品カード： リストやグリッド形式で製品の詳細、画像、価格を紹介します。
フォームの整理： 関連する入力フィールドをフォーム内でグループ化します。
個々のレコードを表示する ギャラリーのようなビューで。
カードコンポーネントの追加
ドラッグアンドドロップ： から コンポーネントライブラリ （左パネル）で「Card」コンポーネントを見つけ、キャンバスにドラッグします。
構成
キャンバス上でカードコンポーネントを選択して、プロパティパネルでそのプロパティにアクセスします。
ヘッダーの構成
カードのヘッダーは、タイトルとインタラクティブ要素のためのスペースを提供します。
タイトル： （テキスト）カードの上部に目立って表示される、明確で簡潔なタイトルを入力します。
アイコン名： （テキスト、任意）視覚的文脈を強化するためにタイトルの横にアイコンを追加します（例：
standard:account).
アクションスロット： ヘッダーには専用の
アクションスロット（通常は右上）があります。ここにButtonやButton Menuなどのコンポーネントをドラッグして、カードのコンテンツに関連するアクションをユーザーに提供します。
コンテンツ＆フッタースロット（スロットの力）
カードを真に強力にしているのは、他のコンポーネントを含める能力です。
コンテンツスロット： カードのメインボディは柔軟なスロットです。ここにドラッグできます 任意の 他のAvonniコンポーネント — 単純なテキストやメトリックコンポーネントから複雑なデータテーブル、チャート、さらには別のダイナミックコンポーネントまで。
フッタースロット： カードには
フッタースロットも含まれます。この領域は「すべて表示」などのアクションリンクや要約情報を追加するのに最適です。
メディアと外観
画像を含めてカードを視覚的に魅力的にすることができます。
メディアイメージ： カードに関連付けたい画像のURLを指定します。
メディアの位置： 画像の表示方法を選択します：
左,上,右,下：画像をメインコンテンツ領域の横に配置します。背景：画像をカード全体の背景として使用します。オーバーレイ：画像をカードのコンテンツの上に重ねて表示します。
動作と表示
表示： （ブール）ページ上でカード全体が表示されるかどうかを制御します。動的な表示/非表示ロジックのために変数や式にバインドできます。
例：「主要指標」ウィジェットを作成する
カードを追加： カードコンポーネントをキャンバスにドラッグします。
ヘッダーを構成：
データに応じて
タイトルを「四半期売上パフォーマンス」にします。データに応じて
アイコン名最小（Min）standard:dashboard.をドラッグし、 Button Menu を
アクションスロットに「更新」や「エクスポート」などのオプションとともに配置します。
コンテンツを追加：
をドラッグし、 Metric コンポーネントをメインの
コンテンツスロットに入れ、総売上収益を表示するように構成します。をドラッグし、 Chart コンポーネントをMetricの下（依然として
コンテンツスロット内）に配置して、売上のトレンドラインを表示します。
フッターを追加：
をドラッグし、 Text コンポーネントを
フッタースロットに入れます。そのValueを「レポート全体を表示」などのリンクを表示するように設定します。
結果： タイトル、アクション、複数のコンポーネントを内包した、自己完結型で整理されたダッシュボードウィジェットをすばやく組み立てました。
重要な考慮点
コンテナとして： カードの主な役割は整理し視覚的な枠を提供することです。その力はあなたがその カードのヘッダーの下、カード内に Avonni データテーブルコンポーネントを追加します。 スロットに配置するコンポーネントによって発揮されます。
レイアウト： カードを 最後に、データテーブルの コンポーネントと組み合わせて洗練されたグリッドベースのページレイアウトを作成します。
まとめると
Avonniカードは、ダイナミックコンポーネント内で整理され、視覚的に魅力的で機能的なセクションを作成するための多用途で不可欠なレイアウトツールです。ヘッダー、コンテンツ、フッターのスロットを活用することで、他のコンポーネントの複雑な配置を簡単に構築できます。
最終更新
役に立ちましたか？