@nstudio/nativescript-checkbox

提供 checkbox 小部件的 NativeScript 插件，也可以使用单选按钮。

npm install @nstudio/nativescript-checkbox

使用的平台控件

使用方法

<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 { Frame } from '@nativescript/core';

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

public getCheckProp() {
  const checkBox = Frame.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 实例的文件）中注册元素

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

然后在你的模板中，这样使用它

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

使用 checked 而不是 v-model。 查看 #99。

属性

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

事件

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

API

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

Css 样式

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

样式 [Android]

• checkStyle - 设置为你的 drawable 名称
• checkPadding - 设置 checkbox 的填充

将以下内容添加到 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>

还有单选按钮吗？

想为你的 checkbox 使用单选按钮行为（组内只能有一个选项）？将 boxType="circle"

许可证

Apache 许可证版本 2.0