Button ボタン - Vant 4
Button ボタン
🎯 紹介
ボタンはユーザーインターフェースで最も一般的なインタラクティブ要素です！フォームの送信、操作のトリガー、ユーザーを次のステップに導くなど、ボタンは欠かせない強力なツールです。Vant のボタンコンポーネントは豊富なスタイルと機能を提供し、アプリケーションをより美しく使いやすくします。
📦 導入
以下の方法でグローバルにコンポーネントを登録します。詳細な登録方法についてはコンポーネントの登録を参照してください。
import { createApp } from 'vue';
import { Button } from 'vant';
const app = createApp();
app.use(Button);🚀 コード例
ボタンタイプ
Vant では5種類の異なるスタイルのボタンタイプを提供しています：default（デフォルト）、primary（主要）、success（成功）、warning（警告）、danger（危険）。各タイプには独自の色と意味があり、操作の意図をより明確に伝えることができます。
<van-button type="default">デフォルトボタン</van-button>
<van-button type="primary">主要ボタン</van-button>
<van-button type="success">成功ボタン</van-button>
<van-button type="warning">警告ボタン</van-button>
<van-button type="danger">危険ボタン</van-button>プレーンボタン
もっとシンプルなボタンスタイルが欲しいですか？プレーンボタンを試してみましょう！plain 属性を設定すると、ボタンは白い背景になり、テキストは元の色を保持し、清潔感のある印象を与えます。
<van-button plain type="primary">プレーンボタン</van-button>
<van-button plain type="success">プレーンボタン</van-button>細いボーダー
極限の視覚効果を追求しますか？hairline 属性を設定すると0.5pxの超細いボーダーを表示でき、ボタンがより精細に見えます！
<van-button plain hairline type="primary">細いボーダーボタン</van-button>
<van-button plain hairline type="success">細いボーダーボタン</van-button>無効状態
フォームの検証が通らない場合など、一時的にボタンを「凍結」する必要があることがあります。disabled 属性を設定すると、ボタンは灰色になりクリックできなくなり、ユーザーに現在操作できないことを明確に伝えます。
<van-button disabled type="primary">無効状態</van-button>
<van-button disabled type="success">無効状態</van-button>ローディング状態
loading 属性でボタンをローディング状態に設定できます。ローディング状態ではデフォルトでボタンのテキストが非表示になり、loading-text でローディング状態のテキストを設定できます。
ボタン形状
square で角型ボタンを設定し、round で丸型ボタンを設定します。
アイコンボタン
icon 属性でボタンのアイコンを設定します。Icon コンポーネントのすべてのアイコンをサポートし、アイコン URL も指定できます。
ボタンサイズ
large、normal、small、mini の4種類のサイズをサポートし、デフォルトは normal です。
ブロックレベル要素
ボタンはデフォルトでインラインブロック要素ですが、block 属性を使用してボタンの要素タイプをブロックレベル要素に設定できます。
ページナビゲーション
url 属性で URL ジャンプを行ったり、to 属性でルートジャンプを行うことができます。
カスタムカラー
color 属性でボタンの色をカスタマイズできます。
アニメーションボタン
Button と Swipe コンポーネント を組み合わせることで、垂直スクロールのアニメーションボタン効果を実現できます。
API
Props
| パラメータ | 説明 | タイプ | デフォルト値 |
|---|---|---|---|
| type | タイプ、primary、success、warning、danger から選択可能 | string | default |
| size | サイズ、large、small、mini から選択可能 | string | normal |
| text | ボタンのテキスト | string | - |
| color | ボタンの色、linear-gradient グラデーションカラーをサポート | string | - |
| icon | 左側のアイコン名または画像リンク、Icon コンポーネントの name 属性 と同等 | string | - |
| icon-prefix | アイコンのクラス名プレフィックス、Icon コンポーネントの class-prefix 属性 と同等 | string | van-icon |
| icon-position | アイコンの表示位置、right から選択可能 | string | left | | tag | ボタンのルートノードの HTML タグ | string | button | | native-type | ネイティブ button タグの type 属性 | string | button | | block | ブロックレベル要素かどうか | boolean | false | | plain | プレーンボタンかどうか | boolean | false | | square | 角型ボタンかどうか | boolean | false | | round | 丸型ボタンかどうか | boolean | false | | disabled | ボタンを無効にするかどうか | boolean | false | | hairline | 0.5px のボーダーを使用するかどうか | boolean | false | | loading | ローディング状態を表示するかどうか | boolean | false | | loading-text | ローディング状態のテキスト | string | - | | loading-type | ローディングアイコンのタイプ、spinner から選択可能 | string | circular |
| loading-size | ローディングアイコンのサイズ、デフォルトの単位は px | number | string | 20px | | url | クリック後にジャンプするリンク先 | string | - | | to | クリック後にジャンプするターゲットルートオブジェクト、Vue Router の to 属性 と同等 | string | object | - |
| replace | ジャンプ時に現在のページ履歴を置き換えるかどうか | boolean | false |
Events
| イベント名 | 説明 | コールバックパラメータ |
|---|---|---|
| click | ボタンをクリックし、ボタンの状態がローディングまたは無効でない場合にトリガー | event: MouseEvent |
| touchstart | ボタンのタッチを開始したときにトリガー | event: TouchEvent |
Slots
| 名前 | 説明 |
|---|---|
| default | ボタンのコンテンツ |
| icon | カスタムアイコン |
| loading | カスタムローディングアイコン |
型定義
コンポーネントは以下の型定義をエクスポートしています：
importtype { ButtonType, ButtonSize, ButtonProps, ButtonNativeType, ButtonIconPosition, } from'vant';テーマカスタマイズ
スタイル変数
コンポーネントは以下の CSS 変数を提供しており、スタイルのカスタマイズに使用できます。使用方法については ConfigProvider コンポーネント を参照してください。
| 名前 | デフォルト値 | 説明 |
|---|---|---|
| --van-button-mini-height | 24px | - |
| --van-button-mini-padding | 0 var(--van-padding-base) | - |
| --van-button-mini-font-size | var(--van-font-size-xs) | - |
| --van-button-small-height | 32px | - |
| --van-button-small-padding | 0 var(--van-padding-xs) | - |
| --van-button-small-font-size | var(--van-font-size-sm) | - |
| --van-button-normal-font-size | var(--van-font-size-md) | - |
| --van-button-normal-padding | 0 15px | - |
| --van-button-large-height | 50px | - |
| --van-button-default-height | 44px | - |