@nativescript-community/ui-checkbox

NativeScript 复选框插件。


iOS 示例	Android 示例

安装

从您的项目根目录运行以下命令

ns plugin add @nativescript-community/ui-checkbox

使用的平台控件

Android	iOS
Android CheckBox	BEMCheckBox

API

属性

checked - 布尔值
text - 与复选框一起使用的文本
fillColor - 复选框元素的色彩
boxType - 要么 'square'（默认）或 'circle'。建议为单选按钮使用 'circle'。注意，插件版本 3.0.0 将 iOS 的默认值更改为 'square' 以与 Android 对齐。如果仍然想在 iOS 上使用 circle 而在 Android 上使用 square，只需使 boxType 值条件化。

事件

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

API

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

CSS 样式

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

样式 [Android]

checkStyle - 设置为您的可绘制资源名称
checkPadding - 设置复选框的填充

<Page
  xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:CheckBox="@nativecript-community/ui-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 '@nativecript-community/ui-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 '@nativecript-community/ui-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('@nativecript-community/ui-checkbox').CheckBox,
  {
    model: {
      prop: 'checked',
      event: 'checkedChange'
    }
  }
);

并在您的模板中使用它，如下所示

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

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

示例

此仓库包含 Angular、Vue.js 和 Svelte 示例。要运行这些示例，请在您的 shell 中执行以下操作

$ git clone https://github.com/@nativescript-community/ui-checkbox
$ cd ui-checkbox
$ npm i
$ npm run setup
$ npm run build # && npm run build.angular
$ cd demo-ng # or demo-vue or demo-svelte
$ ns run ios|android

示例和开发

仓库设置

该仓库使用子模块。如果您没有使用 --recursive 克隆，则需要调用

git submodule update --init

用于安装和链接依赖项的包管理器必须是 pnpm 或 yarn。 npm 不会工作。

开发和测试：如果您使用 yarn，则运行 yarn；如果您使用 pnpm，则运行 pnpm i

交互式菜单

要启动交互式菜单，请运行 npm start（或 yarn start 或 pnpm start）。这将列出所有常用脚本。

构建

npm run build.all

警告：似乎 yarn build.all 不会总是工作（无法在 node_modules/.bin 中找到二进制文件），这就是为什么文档明确使用 npm run

示例

npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example

贡献

更新仓库

你可以非常容易地更新仓库文件。

首先更新子模块。

npm run update

然后提交更改，然后更新通用文件。

npm run sync

然后你可以运行 yarn|pnpm，如果有任何更改的文件，请提交。

更新README

npm run readme

更新文档

npm run doc

发布

发布完全由 lerna 处理（你可以添加 -- --bump major 来强制发布主要版本）。只需运行即可。

npm run publish

修改子模块

仓库使用 https:// 为子模块，这意味着你无法直接推送到子模块。一个简单的解决方案是修改 ~/.gitconfig 并添加

[url "ssh://[email protected]/"]
	pushInsteadOf = https://github.com/

问题

如果你有任何问题/问题/评论，请随时创建一个问题或开始在 NativeScript 社区 Discord 中进行对话。