Badge バッジ - Vant 4
Badge バッジ
🏷️ 紹介
バッジコンポーネントは要素の右上隅に数字や赤い点を表示するためのもので、ユーザーの注意を喚起する絶好の方法です！メッセージ通知、ステータス表示、数量表示など、あらゆる場面に対応できます。
📦 導入
以下の方法でグローバルにコンポーネントを登録します。詳細な登録方法についてはコンポーネントの登録を参照してください。
import { createApp } from'vue'; import { Badge } from'vant'; const app = createApp(); app.use(Badge);🎯 コード例
基本的な使い方
content 属性を設定すると、Badge は子要素の右上隅に対応するバッジを表示します。また、dot を使用して赤い点を表示することもできます。簡単な設定で、目立つ通知が可能です！
最大値
max 属性を設定すると、content の数値が最大値を超えた場合、自動的に {max}+ と表示されます。大きな数値をスマートに処理し、インターフェースをすっきり保ちます！
カスタムカラー
color 属性でバッジの背景色を設定できます。個性的な配色で、デザインスタイルに合わせることができます！
カスタムバッジコンテンツ
content スロットを使用して、バッジの内容をカスタマイズできます。例えば、アイコンを挿入することが可能です。
.badge-icon { display: block; font-size: 10px; line-height: 16px; }カスタムバッジの位置
position 属性でバッジの位置を設定できます。
独立表示
Badge に子要素がない場合、独立した要素として表示されます。
API
Props
| パラメータ | 説明 | タイプ | デフォルト値 |
|---|---|---|---|
| content | バッジの内容（dot が false の場合に有効） | number | string | - |
| color | バッジの背景色 | string | #ee0a24 |
| dot | 赤い点として表示するかどうか | boolean | false | | max | 最大値、最大値を超えると {max}+ と表示、content が数値の場合のみ有効 | number | string | - | | offset | バッジのオフセット量を設定、配列の2つの要素はそれぞれ水平右方向と垂直下方向のオフセット量に対応、デフォルトの単位は px | [number | string, number | string] | - | | show-zero | content が数字の 0 または文字列 '0' の場合、バッジを表示するかどうか | boolean | true | | position | バッジの位置、top-left、bottom-left、bottom-right から選択可能 | string | top-right |
Slots
| 名前 | 説明 |
|---|---|
| default | バッジで囲まれた子要素 |
| content | カスタムバッジの内容 |
型定義
コンポーネントは以下の型定義をエクスポートしています：
importtype { BadgeProps, BadgePosition } from'vant';テーマカスタマイズ
スタイル変数
コンポーネントは以下の CSS 変数を提供しており、スタイルのカスタマイズに使用できます。使用方法については ConfigProvider コンポーネント を参照してください。
| 名前 | デフォルト値 | 説明 |
|---|---|---|
| --van-badge-size | 16px | - |
| --van-badge-color | var(--van-white) | - |
| --van-badge-padding | 0 3px | - |
| --van-badge-font-size | var(--van-font-size-sm) | - |
| --van-badge-font-weight | var(--van-font-bold) | - |
| --van-badge-border-width | var(--van-border-width) | - |
| --van-badge-background | var(--van-danger-color) | - |
| --van-badge-dot-color | var(--van-danger-color) | - |
| --van-badge-dot-size | 8px | - |
| --van-badge-font | -apple-system-font, Helvetica Neue, Arial, sans-serif | - |
📝 まとめ
Badge バッジコンポーネントはインターフェースの小さな通知スペシャリストです！🏷️ ユーザーを邪魔することなく、重要な情報を巧妙に伝えることができます。メッセージ数、ステータスのヒント、特別なマークなど、最も直感的な方法でユーザーに提示することができます。
🎯 主な特徴：
- 🔴 赤い点モード：シンプルなステータス通知
- 🔢 数字表示：正確な数量統計
- 🎨 カスタムスタイル：柔軟な色と位置の設定
- 📍 スマートな位置決め：4つの隅から自由に選択
- 🎭 コンテンツカスタマイズ：テキスト、アイコンなど多様なコンテンツをサポート
- 🔢 スマートな切り替え：大きな数値を自動的に max+ 形式で表示
ショッピングカートの商品数から未読メッセージ通知まで、Badge はアプリケーションのインターフェースをより活気にします！