Tag 标签 - Vant 4
Tag タグ
紹介
🏷️ タグコンポーネント - 小さく洗練された情報ラベル！色付き付箋のように、キーワードや分類、重要ポイントを示すのに最適です。状態表示・種類分類・重要なお知らせなど、UI の情報をわかりやすく整理します。✨
取り込み
以下の方法でコンポーネントをグローバル登録します。詳細はコンポーネント登録を参照してください。
js
import { createApp } from'vue'; import { Tag } from'vant'; const app = createApp(); app.use(Tag);コード例
基本的な使い方
🎨 色とりどりのタグ - type 属性で色を簡単に切り替え。デフォルト・primary・success・danger・warning などをサポートし、タグの「性格」を表現できます。
html
<template>
<div class="demo-tag">
<van-tag>默认标签</van-tag>
<van-tag type="primary">主要标签</van-tag>
<van-tag type="success">成功标签</van-tag>
<van-tag type="danger">危险标签</van-tag>
<van-tag type="warning">警告标签</van-tag>
</div>
</template>
<style>
.demo-tag .van-tag {
margin-right: 8px;
}
</style>プレーン（縁のみ）スタイル
🔲 プレーンデザイン - plain で枠線のみの軽やかなスタイルに。枠色を保ちつつ内部を透明にし、爽やかな印象に。
html
<template>
<div class="demo-tag">
<van-tag plain>空心标签</van-tag>
<van-tag plain type="primary">主要空心</van-tag>
<van-tag plain type="success">成功空心</van-tag>
<van-tag plain type="danger">危险空心</van-tag>
<van-tag plain type="warning">警告空心</van-tag>
</div>
</template>
<style>
.demo-tag .van-tag {
margin-right: 8px;
}
</style>角丸スタイル
🔘 丸みのある可愛らしさ - round で角丸にし、カプセルのような愛らしい見た目に。
html
<template>
<div class="demo-tag">
<van-tag round>圆角标签</van-tag>
<van-tag round type="primary">主要圆角</van-tag>
<van-tag round type="success">成功圆角</van-tag>
<van-tag round type="danger">危险圆角</van-tag>
<van-tag round type="warning">警告圆角</van-tag>
</div>
</template>
<style>
.demo-tag .van-tag {
margin-right: 8px;
}
</style>マークスタイル
🏷️ ブックマーク風 - mark で半角丸のラベル形状に。ブックマークのような独特な形で視認性アップ！
html
<template>
<div class="demo-tag">
<van-tag mark>标记标签</van-tag>
<van-tag mark type="primary">主要标记</van-tag>
<van-tag mark type="success">成功标记</van-tag>
<van-tag mark type="danger">危险标记</van-tag>
<van-tag mark type="warning">警告标记</van-tag>
</div>
</template>
<style>
.demo-tag .van-tag {
margin-right: 8px;
}
</style>閉じられるタグ
❌ スマートクローズ - closeable で閉じるボタンを表示。閉じると close イベントが発火し、タグの非表示処理などに利用できます。
html
<template>
<div class="demo-tag">
<van-tag v-if="show.tag1" closeable @close="show.tag1 = false">
可关闭标签
</van-tag>
<van-tag v-if="show.tag2" closeable type="primary" @close="show.tag2 = false">
主要标签
</van-tag>
<van-tag v-if="show.tag3" closeable type="success" @close="show.tag3 = false">
成功标签
</van-tag>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const show = reactive({
tag1: true,
tag2: true,
tag3: true,
});
return {
show,
};
},
};
</script>
<style>
.demo-tag .van-tag {
margin-right: 8px;
}
</style>タグサイズ
📏 柔軟なサイズ選択 - size で大・中・小の 3 種を切り替え、用途に合わせて表示サイズを調整。
html
<template>
<div class="demo-tag">
<van-tag size="large">大号标签</van-tag>
<van-tag size="medium">中号标签</van-tag>
<van-tag>小号标签</van-tag>
</div>
</template>
<style>
.demo-tag .van-tag {
margin-right: 8px;
}
</style>カスタムカラー
🌈 個性的な配色 - color と text-color で自由に色を設定。独自のビジュアルスタイルを作れます。
html
<template>
<div class="demo-tag">
<van-tag color="#7232dd">紫色标签</van-tag>
<van-tag color="#ffe1e1" text-color="#ad0000">浅红标签</van-tag>
<van-tag color="#7232dd" plain>紫色空心</van-tag>
<van-tag color="linear-gradient(to right, #ff6034, #ee0a24)" text-color="#fff">
渐变标签
</van-tag>
</div>
</template>
<style>
.demo-tag .van-tag {
margin-right: 8px;
}
</style>API
Props
| パラメータ | 説明 | 型 | デフォルト |
|---|---|---|---|
| type | 🎨 タグタイプ（primary success danger warning） | string | default |
| size | 📏 タグサイズ（large medium） | string | - |
| color | 🌈 背景色（任意カラー） | string | - |
| show | 👁️ 表示/非表示 | boolean | true |
| plain | 🔲 プレーン（枠のみ） | boolean | false |
| round | 🔘 角丸スタイル | boolean | false |
| mark | 🏷️ マークスタイル（半角丸） | boolean | false |
| text-color | ✏️ 文字色（color より優先） | string | white |
| closeable | ❌ 閉じるボタンを表示 | boolean | false |
Slots
| 名前 | 説明 |
|---|---|
| default | 📝 表示内容（テキスト・アイコンなど） |
Events
| イベント名 | 説明 | コールバック引数 |
|---|---|---|
| click | 👆 タグをクリックした時 | event: MouseEvent |
| close | ❌ タグを閉じた時 | event: MouseEvent |
型定義
📘 TypeScript 型サポート - 以下の型定義を提供します：
ts
import type { TagSize, TagType, TagProps } from 'vant';テーマカスタマイズ
スタイル変数
🎨 個性的なスタイル調整 - 以下の CSS 変数でカスタマイズ可能です。詳しくは ConfigProvider コンポーネント。
| 名称 | デフォルト | 説明 |
|---|---|---|
| --van-tag-padding | 0 var(--van-padding-base) | 📦 タグ内側余白 |
| --van-tag-text-color | var(--van-white) | ✏️ タグ文字色 |
| --van-tag-font-size | var(--van-font-size-sm) | 🔤 タグ文字サイズ |
| --van-tag-radius | 2px | 🔘 角丸サイズ |
| --van-tag-line-height | 16px | 📏 行の高さ |
| --van-tag-medium-padding | 2px 6px | 📦 中サイズ内側余白 |
| --van-tag-large-padding | var(--van-padding-base) var(--van-padding-xs) | 📦 大サイズ内側余白 |
| --van-tag-large-radius | var(--van-radius-md) | 🔘 大サイズ角丸 |
| --van-tag-large-font-size | var(--van-font-size-md) | 🔤 大サイズ文字 |
| --van-tag-round-radius | var(--van-radius-max) | 🔘 角丸ラベルの角丸 |
| --van-tag-danger-color | var(--van-danger-color) | 🔴 危険タグの色 |
| --van-tag-primary-color | var(--van-primary-color) | 🔵 主要タグの色 |
| --van-tag-success-color | var(--van-success-color) | 🟢 成功タグの色 |
| --van-tag-warning-color | var(--van-warning-color) | 🟡 警告タグの色 |
| --van-tag-default-color | var(--van-gray-6) | ⚪ デフォルトタグの色 |
| --van-tag-plain-background | var(--van-background-2) | 🔲 プレーンの背景色 |
関連ドキュメント
表示コンポーネント 📋
- Badge バッジ - 数字や状態を表示
- NoticeBar 通知バー - 重要情報の表示
- Progress 進捗バー - タスク進捗を表示
フィードバックコンポーネント 💬
- Toast トースト - 軽量な通知
- Dialog ダイアログ - 重要情報の確認
- Loading ローディング - ローディング状態表示
フォームコンポーネント 📝
- Button ボタン - 操作のトリガー
- Cell セル - 情報表示コンテナ
ツールコンポーネント 🔧
- ConfigProvider グローバル設定 - テーマ設定の一元化