ユーザーインターフェイス /
コンポーネント / スライダー
スライダー
NativeScript Sliderコンポーネントを使用すると、ユーザーはコントロールをドラッグして値を選択できます。
コンポーネントのminValueおよびmaxValue設定することにより、使用する特定の範囲を設定できます。
使用法
<Slider value="10" minValue="0" maxValue="100" loaded="onSliderLoaded" />
function onSliderLoaded(argsloaded) {
const sliderComponent = argsloaded.object;
sliderComponent.on("valueChange", (args) => {
const slider = args.object;
console.log(`Slider new value ${slider.value}`);
});
}
exports.onSliderLoaded = onSliderLoaded;
import { Slider } from "tns-core-modules/ui/slider";
export function onSliderLoaded(argsloaded) {
let sliderComponent: Slider = <Slider> argsloaded.object;
sliderComponent.on("valueChange", function(args) {
let slider = <Slider>args.object;
console.log(`Slider new value ${slider.value}`);
});
}
デモソース
スタイリング
<Slider value="10" minValue="0" maxValue="100" backgroundColor="green" color="red" />
デモソース
コードビハインドによるSliderコンポーネントの作成
<StackLayout id="stackLayoutId">
<Label text="{{ 'Result: ' + slResult}}" textWrap="true" />
</StackLayout>
function onPageLoaded(args) {
const page = args.object;
const vm = new observableModule.Observable();
const stackLayout = page.getViewById("stackLayoutId");
vm.set("slResult", 22);
// creating new Switch and binding the value property
const options = {
sourceProperty: "age",
targetProperty: "value"
};
const sliderComponent = new sliderModule.Slider();
sliderComponent.bind(options, vm);
// setting slider.value to 22
vm.set("age", 22);
sliderComponent.on("valueChange", (args) => {
vm.set("slResult", args.object.value);
});
stackLayout.addChild(sliderComponent);
page.bindingContext = vm;
}
exports.onPageLoaded = onPageLoaded;
export function onPageLoaded(args) {
const page: Page = <Page> args.object;
const vm = new Observable();
const stackLayout: StackLayout = <StackLayout> page.getViewById("stackLayoutId");
vm.set("slResult", 22);
// creating new Switch and binding the value property
const options = {
sourceProperty: "age",
targetProperty: "value"
};
const sliderComponent = new Slider();
sliderComponent.bind(options, vm);
// setting slider.value to 22
vm.set("age", 22);
sliderComponent.on("valueChange", (slargs) => {
vm.set("slResult", (<Slider>slargs.object).value);
});
stackLayout.addChild(sliderComponent);
page.bindingContext = vm;
}
プロパティ
名前 |
タイプ |
説明 |
selectedIndex |
number |
SegmentedBarコンポーネントの選択されたインデックスを取得または設定します。 |
items |
Array<SegmentedBarItem> |
SegmentedBarの項目を取得または設定します。 |
selectedBackgroundColor |
Color |
SegmentedBarコンポーネントの選択された背景色を取得または設定します。 |
イベント
名前 |
説明 |
selectedIndexChanged |
選択されたインデックスが変更されたときに発生します(操作またはプログラムによって)。 |
APIリファレンス
ネイティブコンポーネント