このトピックでは、ボタンコンポーネントについて説明します。
属性 | タイプ | デフォルト値 | 説明 | 最小バージョン |
size | String | default | 指定可能な値は default と mini です。 | - |
type | String | default | ボタンのスタイルで、primary、default、または warn を指定できます。 | - |
plain | Boolean | false | ボタンが中空かどうか。 | - |
disabled | Boolean | false | ボタンを無効にするかどうか。 | - |
loading | Boolean | false | ボタンテキストにローディングアイコンが付随するかどうか。 | - |
hover-class | String | button-hover | ボタンが押されたときに適用されるスタイルクラス。 | - |
hover-start-time | Number | 20 | クリックされた状態が表示されるまでのイベント数 (ミリ秒単位)。 | - |
hover-stay-time | Number | 70 | 指を離した後、クリックされた状態の保持期間 (ミリ秒単位)。 | - |
hover-stop-propagation | Boolean | false | 現在の要素の祖先要素がクリックされた状態にならないようにするかどうか。 | |
form-type | String | - | 指定可能な値は submit と reset です。この属性はコンポーネントで使用され、クリックすると submit イベントまたは reset イベントがトリガーされます。 | - |
String | - | 機能を開きます。 | ||
String | - | この属性は、 | ||
onTap | EventHandle | - | タップ。 | - |
open-type の有効な値
値 | 説明 | 最小バージョン |
Share | この属性はカスタム共有をトリガーします。 | |
getAuthorize | ミニプログラムの認証をサポートします。 | |
contactShare | アドレス帳の友達と共有します。 |
scope の有効な値
open-type が getAuthorize に設定されている場合、scope を次のいずれかの値に設定できます。
値 | 説明 | 最小バージョン |
認証インターフェースが表示され、ユーザーはミニプログラムにユーザーの携帯電話番号を取得する権限を付与できます。 |
コードサンプル
<view class="page">
<view class="section">
<view class="title">タイプ</view>
<button type="default">default</button>
<button type="primary">primary</button>
<button type="warn">warn</button>
</view>
<view class="section" style="background:#ddd;">
<view class="title">その他</view>
<button type="default" plain>plain</button>
<button type="default" disabled>disabled</button>
<button type="default" loading={{true}}>loading</button>
<button type="default" hover-class="red">hover-red</button>
</view>
<view class="section">
<view class="title">サイズ</view>
<button type="default" size="mini">mini</button>
</view>
<view class="section">
<view class="title">タイプ</view>
<form onSubmit="onSubmit" onReset="onReset">
<button form-type="submit">submit</button>
<button form-type="reset">reset</button>
</form>
</view>
</view>