メインコンテンツまでスキップ

<pc-button>

<pc-button>タグは、要素をポインター入力に反応させ、視覚的な遷移を行うボタンコンポーネントを定義するために使用されます。

使用法
  • <pc-entity>の直接の子である必要があります。
  • ボタンが入力を受け取れるように、エンティティには use-input 属性を設定した <pc-element>（通常は type="image"）も必要です。

属性​

属性タイプデフォルト説明
activeBoolean"true"ボタンが入力に反応するかどうか
enabledBoolean"true"コンポーネントの有効状態
fade-durationNumber"0"ティント遷移を適用する時間（ミリ秒）
hit-paddingVector4"0 0 0 0"ボタンのヒット領域を left bottom right top で拡張します
hover-sprite-assetString-ホバー時に表示されるスプライト <pc-asset> のid（スプライト遷移モード）
hover-sprite-frameNumber"0"ホバースプライトのフレーム
hover-tintColor"1 1 1 1"ホバー時にイメージエンティティに適用されるティント（ティント遷移モード）
imageString-視覚的な遷移を表示するイメージ要素を持つ <pc-entity> への参照（CSSセレクター、要素id、またはエンティティ名）。デフォルトはボタン自身のエンティティです
inactive-sprite-assetString-非アクティブ時に表示されるスプライト <pc-asset> のid（スプライト遷移モード）
inactive-sprite-frameNumber"0"非アクティブスプライトのフレーム
inactive-tintColor"1 1 1 1"非アクティブ時にイメージエンティティに適用されるティント（ティント遷移モード）
pressed-sprite-assetString-押下時に表示されるスプライト <pc-asset> のid（スプライト遷移モード）
pressed-sprite-frameNumber"0"押下スプライトのフレーム
pressed-tintColor"1 1 1 1"押下時にイメージエンティティに適用されるティント（ティント遷移モード）
transition-modeEnum"tint"ボタンがホバー/押下に反応する方法: "tint" | "sprite"

例​

<pc-entity name="button">
    <!-- イメージ要素がボタンの見た目を提供し、入力を受け取ります -->
    <pc-element type="image" width="190" height="45" use-input sprite-asset="blue-button"></pc-element>
    <pc-button transition-mode="tint" hover-tint="0.8 0.8 0.8 1" pressed-tint="0.6 0.6 0.6 1"></pc-button>
</pc-entity>

基盤となるボタンコンポーネントの click イベントをリッスンすることで、クリックに応答できます。

const entity = document.querySelector('pc-entity[name="button"]').entity;
entity.button.on('click', () => {
    console.log('Button clicked!');
});

JavaScriptインターフェース​

ButtonComponentElement APIを使用して、<pc-button>要素をプログラムで作成および操作できます。