ユーザーインターフェイス /
コンポーネント / ボタン
Buttonコンポーネントは、アプリケーションを介して相互作用し、それに応答して、カスタム・ロジックを呼び出すための使いやすい方法を提供します。
ユーザーがタップすると、ボタンはそれに添付されているアクションを実行します。
使用法
Buttonコンポーネントは、tapイベント経由でカスタムロジックを実行することができます。
イベントの処理は、HTMLで(tap)を使用し、コンポーネントにタップハンドラーを実装するのと同じくらい簡単です。
<Button text="Tap me!" tap="onTap"></Button>
function onTap(args) {
const button = args.object;
alert(`Tapped ${count} times!`);
}
exports.onTap = onTap;
export function onTap(args: EventData) {
const button = <Button>args.object;
alert("Tapped " + count + " times!");
}
デモソース
スタイリング
Buttonコンポーネントは、CSSまたは対応するプロパティを使用してスタイリングすることができます。
<StackLayout>
<!-- No styles applied -->
<Button text="Button"></Button>
<!-- Using local CSS class -->
<Button text=".my-button" class="my-button"></Button>
<!-- Using nativescript-theme-core CSS classes -->
<Button text="Button.-primary" class="-primary"></Button>
<Button class="-primary">
<FormattedString>
<Span text="" class="fab"></Span>
<Span text=" Button.-primary with icon"></Span>
</FormattedString>
</Button>
<Button text="Button.-outline" class="-outline"></Button>
<Button text="Button.-primary.-rounded-sm" class="-primary -rounded-sm"></Button>
<Button text="Button.-primary.-rounded-lg" class="-primary -rounded-lg"></Button>
<Button text="Button.-outline.-rounded-sm" class="-outline -rounded-sm"></Button>
<Button text="Button.-outline.-rounded-lg" class="-outline -rounded-lg"></Button>
<Button text="Button.-outline[isEnabled=false]" isEnabled="false" class="-outline"></Button>
<Button text="Button.-primary[isEnabled=false]" isEnabled="false" class="-primary"></Button>
</StackLayout>
.my-button {
android-elevation: 4;
background-color: lightseagreen;
border-color: darkolivegreen;
border-radius: 20;
border-width: 1;
color: whitesmoke;
font-size: 18;
font-weight: bold;
}
.my-button:active {
android-elevation: 8;
background-color: whitesmoke;
border-color: darkolivegreen;
border-radius: 20;
border-width: 1;
color: lightseagreen;
font-size: 18;
font-weight: bold;
}
特定のスタイリングプロパティ
| 名前 |
CSS名 |
タイプ |
説明 |
androidElevation |
android-elevation |
number |
（Androidのみ）ビューのElevationを取得または設定します。 |
androidDynamicElevationOffset |
android-dynamic-elevation-offset |
number |
（Androidのみ）ビューの動的Elevationオフセットを取得または設定します。 |
デモソース
ヒントとコツ
text値とtapコールバックを使用して、プログラムでButtonを作成します。
<StackLayout id="container" verticalAlignment="middle"/>
const myButton = new Button();
myButton.text = "Tap me!";
myButton.className = "btn btn-primary btn-active";
myButton.on("tap", (data) => {
// args is of type EventData
alert("Button Tapped!");
});
const myButton = new Button();
myButton.text = "Tap me!";
myButton.className = "btn btn-primary btn-active";
myButton.on(Button.tapEvent, (data: GestureEventData) => {
// data is of type GestureEventData
alert("Button Tapped!");
});
プロパティ
| 名前 |
タイプ |
説明 |
text |
string |
ボタンのラベルを取得または設定します。 |
イベント
| 名前 |
説明 |
tap |
ボタンがタップされたときに生成されます。 |
loaded |
ビューがロードされたときに生成されます。 |
unloaded |
ビューがアンロードされるときに生成されます。 |
layoutChanged |
ビューのレイアウト境界がレイアウト処理のために変更されたときに生成されます。 |
APIリファレンス
ネイティブコンポーネント