ウィジェットの操作 > 2D > ボタン
  
ボタン
このウィジェットの機能
ボタンは、実行時にタップすると発生する操作の内容を示します。
このウィジェットを使用するケース
エクスペリエンスのユーザーは、ボタンを使用してエクスペリエンスと対話することができます。また、エクスペリエンス全体を移動することもできます。ボタンをタップしたときに発生する操作についてユーザーに明確に伝えるには、「ボタン」ウィジェットを使用します。CSS または既成のテーマを使用して、ボタンのスタイルを設定することができます。テーマの詳細については、テーマを参照してください。
このウィジェット固有のプロパティ、サービス、イベント、操作
このウィジェットには一意のプロパティ、サービス、イベントがありません。
一般的なウィジェットのプロパティ、サービス、イベントのリストについては、共通のウィジェットプロパティ、サービス、イベントを参照してください。
動作中のウィジェット
ウィジェットがどのように表示されるか、以下に例を示します。
使用時に必要な最小ステップ
外観
1. 「ボタン」ウィジェットをキャンバス上にドラッグアンドドロップします。
2. 「テキスト」フィールドで、ボタンの名前を入力します。たとえば、「Play」などを入力します。
3. ボタンの「クリック」イベントを別のウィジェットにバインドし、作成するバインディングのタイプを選択します。たとえば、「クリック」イベントをモデルにバインドし、「バインディングターゲットを選択」ウィンドウで「すべて再生」を選択した場合、エクスペリエンスでボタンをタップすると、モデルに関連付けられているシーケンス内のすべてのステップが再生されます。
* 
この例では、既成のテーマ button-balanced を使用して、ボタンを緑にしました。
CSS でのウィジェットのスタイル設定
CSS を使用して、ウィジェットのスタイルを設定できます。作成および適用できる CSS クラスの例を次に示します。
* 
クラスに一意の名前を付けて、別のクラスや OOTB プロパティと競合しないようにすることをお勧めします。
CSS の例
外観
.ptc-button {
border-width: 1px;
border-style: outset;
border-color: rgb(46, 50, 49);
border-radius: 25px;
background: rgb(47, 48, 53);
font-size: 16px;
font-family: Century Gothic;
color: white;
}
CSS クラスの実装の詳細については、アプリケーションのスタイルを参照してください。