@nativescript-community/ui-range-seek-bar

NativeScript Range Seek Bar 小部件

iOS 演示	Android 演示

目录

• 安装
  • 基于
• API
  • 事件
  • 实例属性
• 在 Angular 中的使用
  • 示例
• 演示和开发
  • 设置
  • 构建
  • 演示
• 问题

安装

从您项目的根目录运行以下命令

ns plugin add @nativescript-community/ui-range-seek-bar

基于

TTRangeSlider for iOS

Crystal Range Seekbar for Android

API

事件

• valueChanged
  当用户在范围 Seek Bar 上更改最小值或最大值时触发。
• finaValueChanged
  当用户在范围 Seek Bar 上完成触摸时触发。

实例属性

• minValue - Number
  获取或设置范围 Seek Bar 的最小值。
• maxValue - Number
  获取或设置范围 Seek Bar 的最大值。
• valueMin - Number
  获取或设置范围 Seek Bar 的最小起始值。
• valueMax - Number
  获取或设置范围 Seek Bar 的最大起始值。
• minRange - Number
  获取或设置两个滑块的最小范围。
• step - Number
  获取或设置范围之间的最小步长，默认为 1。
• cornerRadius - Number
  获取或设置两个滑块的圆角半径。
• barHeight - Number
  获取或设置范围 Seek Bar 的栏高。
• barColor - Color
  获取或设置范围 Seek Bar 的栏颜色。
• barHighlightColor - Color
  获取或设置范围 Seek Bar 的栏高亮颜色。
• thumbColor - Color
  获取或设置两个滑块的颜色。

在 Angular 中的使用

• 在 NgModule 中导入 NativeScriptUIRangeSeekBarModule

import { NativeScriptUIRangeSeekBarModule } from "nativescript-range-seek-bar/angular";
//......
@NgModule({
	//......
	imports: [
        //......
		NativeScriptUIRangeSeekBarModule,
        //......
	],
    //......
})

<!-- app.component.html -->
<StackLayout>
    <RangeSeekBar [minValue]="rangeSeekBarProp.minValue" [maxValue]="rangeSeekBarProp.maxValue" [valueMin]="rangeSeekBarProp.valueMin"
        [valueMax]="rangeSeekBarProp.valueMax" [minRange]="rangeSeekBarProp.minRange" [step]="rangeSeekBarProp.step"
        (valueChanged)="valueChanged($event)" (finaValueChanged)="finaValueChanged($event)" class="range-seek-bar"></RangeSeekBar>
</StackLayout>

/*app.css*/
.range-seek-bar {
    bar-color: #8990C4;
    bar-highlight-color: #2434AD;
    thumb-color: #1A246D;
    bar-height: 10;
    corner-radius: 30;
}

// app.component.ts
import { Component } from "@angular/core";
import { RangeSeekBarEventData } from "nativescript-range-seek-bar";

@Component({
    selector: "ns-app",
    templateUrl: "app.component.html",
})

export class AppComponent {

    public rangeSeekBarProp = {
        minValue: 0,
        maxValue: 100,
        valueMin: 0,
        valueMax: 100,
        minRange: 0,
        step: 1
    };

    constructor() { }

    valueChanged(event: RangeSeekBarEventData) {
        console.log("valueChanged: ", event.value);
    }

    finaValueChanged(event: RangeSeekBarEventData) {
        console.log("finaValueChanged: ", event.value);
    }
}

示例

• 基本范围 Seek Bar
  • 一个基本的滑动范围 Seek Bar。
• 四面八方
  • 所有方向的范围 Seek Bar 示例：左、右、上、下。

演示和开发

设置

要运行演示，您必须递归地克隆此仓库。

git clone https://github.com/@nativescript-community/ui-range-seek-bar.git --recursive

安装依赖项

npm i # or 'yarn install' or 'pnpm install'

交互式菜单

要启动交互式菜单，运行 npm start（或 yarn start 或 pnpm start）。这将列出所有常用的脚本。

构建

npm run build

npm run build.angular # or for Angular

演示

npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example

问题

如果您有任何问题/问题/评论，请随时在 NativeScript Community Discord 中创建问题或开始对话。