@nstudio/nativescript-checkbox

提供复选框小部件的 NativeScript 插件，单选按钮也是可能的。

ns plugin add @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 - 用于复选框的文本
• 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 - 设置为你的 drawable 名称
• 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"

许可证

Apache 许可证版本 2.0