@wuilmerj24/time-range

npm install @wuilmerj24/time-range

用法

纯 NativeScript

重要: 确保在 Page 元素中包含 xmlns:tr="@wuilmerj24/time-range"

<Page xmlns:tr="@wuilmerj24/time-range">
    <StackLayout class="p-20">
      <tr:TimeRange width="100%" height="100%" drag="onDrag"/>
    </StackLayout>
</Page>

onDrag(ev) {
    console.log('onDrag ', ev.data);
  }

Nativescript Angular

import { NativeScriptTimeRangeModule } from '@wuilmerj24/time-range/angular';

//addd NativeScriptTimeRangeModule to angular NgModule>imports
@NgModule({
    imports: [
        NativeScriptTimeRangeModule,
    ],
})

<TimeRange (drag)="onDrag($event)"></TimeRange>

onDrag(ev) {
    console.log('onDrag ', ev.data);
  }

属性

属性	类型	默认值	描述	iOS	Android
startTime	string	00:00	时间格式为 Hh:Mm，例如，12:00。startTime 定义开始时间，不是必需的。	✓	✓
endTime	string	00:00	时间格式为 Hh:Mm，例如，12:00。endTime 定义结束时间，不是必需的。	✓	✓
sliderColor	string	gray	sliderColor 定义滑动条的背景颜色。默认为灰色。	✓	✓
clockLabelColor	string	white	clockLabelColor 定义数字的颜色。	✓	✓
clockTickColor	string	white	clockTickColor 定义线条的颜色（不是数字，在 Android 的情况下也指线条。iOS 没有线条）。	❌	✓
maxDurationMinutes	number	0	通过提供 0 到 1440 之间的分钟数来设置可选的最大选择时长。	❌	✓
sliderRangeColor	string	gray	滑动条轮的激活部分的颜色。	✓	✓
thumbColor	string	gray	滑块的背景颜色。	✓	✓
sliderRangeGradientStart	string	gray	设置滑动条轮的激活部分的起始渐变色。请注意，需要配置 sliderRangeGradientStart 和 sliderRangeGradientEnd。	❌	✓
sliderRangeGradientMiddle	string	gray	渐变的可选设置：设置滑动条轮的激活部分的中间渐变色。	❌	✓
sliderRangeGradientEnd	string	gray	设置滑动条轮的激活部分的结束渐变色。请注意，需要配置 sliderRangeGradientStart 和 sliderRangeGradientEnd。	❌	✓
timeStepMinutes	number	0	确定时间应四舍五入的间隔。将其设置为较不精确的数字（例如 10 分钟）可以使用户更容易选择他想要的时间。	❌	✓
clockVisible	boolean	true	中间的时钟面是否可见。	✓	✓
clockLabelSize	number	16	中间时钟面上小时标签（1，2，3，等）的文本大小。建议将其设置为缩放无关像素（sp）。	✓	✓
sliderWidth	number	10	滑动条轮的宽度。	✓	✓
thumbIconSize	number	24	滑块图标的大小。	❌	✓
thumbSize	number	28	起始和结束滑块的尺寸。	✓	✓
thumbIconStartRes	string	null	设置起始滑块图标。	✓	✓
thumbIconEndRes	string	null	设置结束滑块图标。	✓	✓
clockFace	string	APPLE	您可以使用两种不同的时钟面（内部时钟的外观），都模仿时钟应用程序：APPLE 和 SAMSUNG	✓	✓

许可

Apache 许可证版本 2.0