当前位置：首页 > 软件库 > 手机/移动开发 > >

nativescript-checkbox

NativeScript plugin for checkbox UI component

授权协议 View license

开发语言 JavaScript TypeScript

所属分类手机/移动开发

软件类型开源软件

地区不详

投递者龙承颜

操作系统 iOS

开源组织无

适用人群未知

软件概览

NativeScript Checkbox

A NativeScript plugin to provide a checkbox widget, radio buttons are also possible.

Installation

From your command prompt/terminal go to your app's root folder and execute:

NativeScript 7+:

ns plugin add @nstudio/nativescript-checkbox

NativeScript prior to 7:

tns plugin add @nstudio/nativescript-checkbox@1.0.0

Platform controls used:

Android	iOS
Android CheckBox	BEMCheckBox

Sample Usage

Android Sample	iOS Sample

Usage

<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 Usage Sample:

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 Usage Sample

In your main.js (The file where the root Vue instance is created) register the element

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

And in your template, use it as:

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

Use checked instead of v-model. See #99.

Properties

checked - boolean
text - text to use with the checkbox
fillColor - Color of the checkbox element
boxType - Either 'square' (default) or 'circle'. It's recommended to use 'circle' for radiobuttons. Note that plugin version 3.0.0 switched the default for iOS to 'square' for alignment with Android. Still want circle on iOS and square on Android? Just make the boxType value conditional.

Events

checkedChange - Use a reference to the CheckBox component to grab it's checked property when this event fires to see the new value.

API

toggle() - Change the checked state of the view to the inverse of its current state.

Css Styling

color - set the text label color
font-size - checkbox is sized to text from here : default 15
border-width - set the line width of the checkbox element: iOS only

Styling [Android]

checkStyle - set to the name of your drawable
checkPadding - set the padding of the checkbox

Add the following to 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>

Radiobuttons, anyone?

Want to use radiobutton behavior for your checkboxes (only one option possible within a group)?Set boxType="circle" and check out the second tab in the Angular demo, here's a screenshot:

Contributing & Running Demo Apps

Execute from root:
- For android: npm run demo.android
- For iOS: npm run demo.ios
- npm run demo.ng.android (for angular android)
- npm run demo.ng.ios (for angular ios)

使用案例

el-tree动态加载子级（结合checkbox）

需求是el-tree 的子级需要在：展开父级时勾选父级复选框时加载子级数据并渲染dom结构。需求1 还是比较好做的，官方有实例说明；需求2 的话，翻了下element ui的源码， checkBox上直接加了@click.native.stop T^T 也就是说点击checkBox的时候根本不会触发loadNode 这个方法没办法只能去找手动触发的方法了，翻了一遍果然有！！！ nod
el-checkbox-group 选中返回的数组按照选项顺序排列 || el-radio-group单击选中、双击取消选中

<template> <div class="contanier"> <el-checkbox-group v-model="checkVal" @input="onChange"> <el-checkbox v-for="item in checkList" :key="item.id" :label="item.name"
element-ui的table组件-checkbox选中分页记忆-逻辑修改成选中row的id集合来记录选中了那些数据（修订后...

本demo是一个弹窗页面，append-to-body 是element-ui 自带弹窗层级排序，v-dialogDrag 是弹窗拖拽（非element-ui自带不用去掉即可），本文只是介绍简单版的页面选中记忆，后续文章将讲述再细一层，双层的页面选中记忆； <template> <div style="margin-bottom: 20px;"> <el-dialog :ti