Card カード - Vant 4

Card カード

🛍️ 紹介

美しいお店に足を踏み入れると、商品一つ一つが丁寧にショーウィンドウに並べられています ✨。Card カードコンポーネントはあなたの「デジタルショーウィンドウ」です！

この小さなカードは大きな使命を負っています 🎯：

• 📸 見た目担当：美しい商品画像の展示で、最初の瞬間からユーザーの心をつかむ
• 💰 価格透明：明確な価格情報で、ユーザーが一目で理解可能
• 🏷️ 情報豊富：タイトル、説明、タグなど、必要な情報が全て揃う
• 🎨 高度カスタマイズ：好みのレイアウトを自由にカスタマイズ

ECアプリ、製品紹介、コンテンツカードなど、あらゆる場面でCardコンポーネントはあなたのインターフェースを瞬時にプロフェッショナルで魅力的なものに変えます。まるで各商品に専属の「イメージアンバサダー」を配置したようです 🌟！

📦 導入

以下の方法でグローバルにコンポーネントを登録します。詳細な登録方法についてはコンポーネントの登録を参照してください。

import { createApp } from'vue'; import { Card } from'vant'; const app = createApp(); app.use(Card);

🎯 コード例

基本的な使い方

積み木を組み立てるように簡単です 🧱！最も基本的なカードは商品展示の「黄金トライアングル」を含んでいます：美しい画像、魅力的なタイトル、そして心を動かすような価格 💝。

これがCardコンポーネントの「素顔」状態で、シンプルだけど十分な魅力を備えており、あなたの商品を十分に光らせることができます！

マーケティング情報

「限定セール」の緊迫感を演出したいですか？「特別オファー」の魅力を際立たせたいですか 🔥？

origin-price は商品の「身分証明書」のようなもので、元の価格を表示することでユーザーに割引の魅力を実感させます。そして tag タグは商品左上の「赤い旗」のような存在で 🚩、「新商品」、「人気」、「限定」など、すぐにユーザーの目を引きつけます！

これらのマーケティング要素は商品の「化粧師」のようなもので、普通の商品でも瞬時に魅力的に見せることができます ✨。

カスタムコンテンツ

Cardコンポーネントは「万能宝箱」のようなものです 🎁。豊富なスロットを提供し、自由に創造力を発揮できます！

評価スターを追加したいですか？購入ボタンを置きたいですか？より多くの商品情報を表示したいですか？すべて問題ありません！キャンバスに自由に描くように、どのようなレイアウトにしたいかは、完全にあなたの想像力次第です 🎨！

API

Props

パラメータ	説明	タイプ	デフォルト値
thumb	左側の画像 URL	string	-
title	タイトル	string	-
desc	説明	string	-
tag	画像の角のマーク	string	-
num	商品数量	number | string	-
price	商品価格	number | string	-
origin-price	商品の取り消し線付き元価	number | string	-
centered	コンテンツが垂直方向に中央揃えかどうか	boolean	false
currency	通貨記号	string	¥
thumb-link	左側画像をクリックした後にジャンプするリンク先	string	-
lazy-load	画像の遅延読み込みを有効にするかどうか、Lazyload コンポーネントと併用する必要があります	boolean	false

Events

イベント名	説明	コールバックパラメータ
click	クリック時にトリガー	event: MouseEvent
click-thumb	カスタム画像をクリックしたときにトリガー	event: MouseEvent

Slots

名前	説明
title	カスタムタイトル
desc	カスタム説明
num	カスタム数量
price	カスタム価格
origin-price	カスタム商品元価
price-top	カスタム価格の上側領域
bottom	カスタム価格の下側領域
thumb	カスタム画像
tag	カスタム画像角のマーク
tags	カスタム説明の下のタグ領域
footer	カスタム右下隅のコンテンツ

型定義

コンポーネントは以下の型定義をエクスポートしています：

importtype { CardProps } from'vant';

テーマカスタマイズ

スタイル変数

コンポーネントは以下の CSS 変数を提供しており、スタイルのカスタマイズに使用できます。使用方法については ConfigProvider コンポーネント を参照してください。

名前	デフォルト値	説明
--van-card-padding	var(--van-padding-xs) var(--van-padding-md)	-
--van-card-font-size	var(--van-font-size-sm)	-
--van-card-text-color	var(--van-text-color)	-
--van-card-background	var(--van-background)	-
--van-card-thumb-size	88px	-
--van-card-thumb-radius	var(--van-radius-lg)	-
--van-card-title-line-height	16px	-
--van-card-desc-color	var(--van-text-color-2)	-
--van-card-desc-line-height	var(--van-line-height-md)	-
--van-card-price-color	var(--van-text-color)	-
--van-card-origin-price-color	var(--van-text-color-2)	-
--van-card-num-color	var(--van-text-color-2)	-
--van-card-origin-price-font-size	var(--van-font-size-xs)	-
--van-card-price-font-size	var(--van-font-size-sm)	-
--van-card-price-integer-font-size	var(--van-font-size-lg)	-
--van-card-price-font	var(--van-price-font)	-

🎯 ベストプラクティス

💡 推奨使用シーン

Cardコンポーネントは多目的な万能選手で、様々なシーンで活躍します：

🛒 EC商品展示

<!-- プロモーション情報を強調し、ユーザーの購入意欲を高める -->
<van-card
  :price="99.00"
  :origin-price="199.00"
  title="限定特別オファー"
  desc="品質保証、限定発売"
  tag="限定セール"
  thumb="https://example.com/product.jpg"
/>

📱 アプリ推薦カード

<!-- アプリ情報を展示し、ダウンロードを促す -->
<van-card
  title="超便利ツールApp"
  desc="効率アップ、生活簡素化"
  tag="編集者推薦"
>
  <template #footer>
    <van-button size="mini" type="primary">今すぐダウンロード</van-button>
  </template>
</van-card>

📰 コンテンツニュースカード

<!-- ニュース記事の展示 -->
<van-card
  title="テック最前線：AI技術の新突破"
  desc="人工知能分野に新たな大きな進展が..."
  tag="人気"
>
  <template #tags>
    <van-tag size="mini">テクノロジー</van-tag>
    <van-tag size="mini">AI</van-tag>
  </template>
</van-card>

⚡ パフォーマンス最適化のヒント

1. 画像の遅延読み込み：長いリストの場合、lazy-load を有効にすることでページパフォーマンスが大幅に向上します
2. スロットの適切な使用：必要な場合にのみカスタムスロットを使用し、複雑化しすぎないようにしましょう
3. 画像サイズの最適化：商品画像のサイズが適切であることを確認し、大きすぎる画像の読み込みを避けます

🎨 デザインのアドバイス

• 情報階層：価格情報が最も目立つようにし、次にタイトル、最後に説明を配置
• 画像の質：高品質の商品画像を使用し、推奨アスペクト比は1:1または4:3
• タグの使用：タグは簡潔かつ力強く、長すぎるテキストを避ける
• 色の組み合わせ：価格の色はブランドカラーや赤色を使用して割引感を強調

🔧 よくある質問と解決策

Q: カードのコンテンツを垂直方向に中央揃えにするには？ A: centered 属性を true に設定します。特にコンテンツが少ないカードに適しています。