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

在您的项目或插件中需要帮助吗？随时联系 nStudio 团队，以获取移动和 Web 应用程序开发的最佳实践。[email protected]

安装

从您的命令提示符/终端转到您的应用根目录并执行

tns plugin add @nstudio/nativescript-checkbox

使用的平台控件

示例用法

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）