一个用于提供复选框小部件的 NativeScript 插件，也可以实现单选按钮。

安装

从您的命令提示符/终端进入您的应用程序根文件夹，并执行

NativeScript 7+

ns plugin add @nstudio/nativescript-checkbox

7 之前的 NativeScript

tns plugin add @nstudio/[email protected]

使用的平台控件

示例用法

Android 示例	iOS 示例

用法

<Page
  xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:CheckBox="@nstudio/nativescript-checkbox" loaded="pageLoaded">
  <ActionBar title="Native Checkbox" />
  <StackLayout>
    <CheckBox:CheckBox checked="{{ checkProp }}" text="{{ myCheckText }}" fillColor="{{ myCheckColor }}" id="myCheckbox" />
    <CheckBox:CheckBox text="CheckBox Label" checked="false" />
  </StackLayout>
</Page>

import { CheckBox } from '@nstudio/nativescript-checkbox';
import { topmost } from '@nativescript/core/ui/frame';

public toggleCheck() {
  const checkBox = topmost().getViewById('yourCheckBoxId');
  checkBox.toggle();
}

public getCheckProp() {
  const checkBox = topmost().getViewById('yourCheckBoxId');
  console.log('checked prop value = ' + checkBox.checked);
}

Angular 使用示例

import { TNSCheckBoxModule } from '@nstudio/nativescript-checkbox/angular';

@NgModule({
  imports: [TNSCheckBoxModule]
  // etc.
})
export class YourModule {}

// component:
export class SomeComponent {
  @ViewChild('CB1') FirstCheckBox: ElementRef;
  constructor() {}
  public toggleCheck() {
    this.FirstCheckBox.nativeElement.toggle();
  }

  public getCheckProp() {
    console.log(
      'checked prop value = ' + this.FirstCheckBox.nativeElement.checked
    );
  }
}

<StackLayout>
  <CheckBox #CB1 text="CheckBox Label" checked="false"></CheckBox>
  <button (tap)="toggleCheck()" text="Toggle it!"></button>
  <button (tap)="getCheckProp()" text="Check Property"></button>
</StackLayout>

NativeScript-Vue 使用示例

在您的 main.js（创建根 Vue 实例的文件）中注册元素

Vue.registerElement(
  'CheckBox',
  () => require('@nstudio/nativescript-checkbox').CheckBox,
  {
    model: {
      prop: 'checked',
      event: 'checkedChange'
    }
  }
);

然后在您的模板中使用它

<check-box :checked="isChecked" @checkedChange="isChecked = $event.value" />

请使用 checked 而不是 v-model。 见 #99。

属性

• checked - 布尔值
• text - 与复选框一起使用的文本
• fillColor - 复选框元素的颜色
• boxType - 'square'（默认）或 'circle'。建议为单选按钮使用 'circle'。请注意，插件版本 3.0.0 将 iOS 的默认值更改为 'square'，以与 Android 保持一致。仍然想在 iOS 上使用 circle 而在 Android 上使用 square？只需将 boxType 值设置为条件值。

事件

• checkedChange - 当此事件触发时，使用 CheckBox 组件引用来获取其 checked 属性的新值。

API

• toggle() - 将视图的选中状态更改为其当前状态的相反。

Css 样式

• color - 设置文本标签颜色
• font-size - 复选框的大小从这里设置：默认 15
• border-width - 设置复选框元素的线宽：仅限 iOS

样式 [Android]

• checkStyle - 设置为您的可绘制名称
• checkPadding - 设置复选框的内边距

将以下内容添加到 app/App_Resources/Android/drawable/checkbox_grey.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:state_checked="true" android:drawable="@drawable/ic_checkbox_checked_incomplete" />
    <item android:state_enabled="false" android:state_checked="false" android:drawable="@drawable/ic_checkbox_grey_incomplete" />
    <item android:state_checked="true" android:drawable="@drawable/ic_checkbox_checked_grey"/>
    <item android:state_checked="false" android:drawable="@drawable/ic_checkbox_grey" />
</selector>

单选按钮呢？

想要为复选框使用单选按钮行为（组内只能有一个选项）？将 boxType="circle" 并查看 Angular 示例 的第二个选项卡，这里是一个截图

贡献 & 运行示例应用程序

• 从根目录执行
  • 对于 Android： npm run demo.android
  • 对于 iOS： npm run demo.ios
  • npm run demo.ng.android（用于 Angular Android）
  • npm run demo.ng.ios（用于 Angular iOS）