Добавьте метку в флажок / переключатель Angular 2

checkbox typescript angular nativescript

1451 просмотра

3 ответа

62 Репутация автора

Я пытаюсь добавить флажки, но я прочитал, что это возможно только для использования ... и изменяет изображение при нажатии. Однако это не работает (функция onTap ()). Так как не работал. Второй вариант - использовать переключатель.

Как добавить метку в флажок / переключатель? Поскольку эта строка не работает:

<label><switch [checked]="checked" (tap)="onTap()" align="right"> </switch>Employees </label>

Мой файл sync.component.ts:

import {Component, EventEmitter} from '@angular/core';
import {NS_ROUTER_DIRECTIVES} from 'nativescript-angular/router';
import {APP_ROUTER_PROVIDERS} from "../app.routes"
import ImageModule = require("ui/image");
var ImageSourceModule = require("image-source");

var image1 = new ImageModule.Image();
var image2 = new ImageModule.Image();

image1.imageSource = ImageSourceModule.fromResource("checkbox_checked");
image2.imageSource = ImageSourceModule.fromResource("checkbox_unchecked");
image1.src = "~/checkbox_checked.png";
image2.src = "~/checkbox_unchecked.png";

@Component({
selector: "checkbox",
inputs: ["checked : checked"],
outputs: ["tap"],
template: `

<StackLayout backgroundColor="#b3d9ff" width="300" height="550">

  <Label style="font-size : 20px" text="Choose contacts to sync" horizontalAlignment="center"></Label>
  <switch [checked]="checked" (tap)="onTap()" align="right"> </switch>
  <Label text= "Employees" horizontalAlignment="center"></Label>
  <switch [checked]="checked" (tap)="onTap()" align="right"> </switch>
  <Label text= "Clients" horizontalAlignment="center"></Label>


    <Image
      [src]="checked ? '~/checkbox_checked' : '~/checkbox_unchecked'"
      class="checkbox"
      (tap)="onTap()"
      dock="left"
      width="20" height="20"
      align = "right"></Image>

</StackLayout> `
})

 export class SyncComponent{
 public tap:     EventEmitter<boolean> = new EventEmitter<boolean>();
 public checked: boolean = false;

 //constructor() { }

 public onTap(): void {
     this.tap.next(this.checked);
 }
 }

Вот скриншот:

введите описание изображения здесь

Я хочу, чтобы эти Сотрудники и Клиент были рядом с переключателями / флажками.

Автор: kenkulan Источник Размещён: 19.07.2016 08:51

Ответы (3)


0 плюса

1468 Репутация автора

поместите каждый тег Label и Switch в дополнительный StackLayout

<StackLayout orientation="horizontal">
   <Label ... />
   <Switch ... />
</StackLayout>
Автор: Marek Maszay Размещён: 19.07.2016 09:02

0 плюса

1 Репутация автора

Вы можете посмотреть на эту страницу, она говорит вам, что делать.

http://docs.nativescript.org/cookbook/ui/switch

Все, что вам нужно сделать, это сказать, чтобы он перешел в горизонтальное положение, например так:

<StackLayout orientation="horizontal">
   <Switch checked="true"></Switch>
   <Button isEnabled="true" text="This is a Button!"></Button>
 </StackLayout>
Автор: wnas Размещён: 19.07.2016 09:19

0 плюса

391 Репутация автора

Вы можете попробовать nativescript-checkbox

1) установить с помощью «tns plugin add nativescript-checkbox»

2) зарегистрировать компонент

import { registerElement } from "nativescript-angular/element-registry";
registerElement("CheckBox", () => require("nativescript-checkbox").CheckBox);

проверить angular2 nativescript флажок репо

Автор: Azzy Размещён: 16.12.2016 07:11
Вопросы из категории :
32x32