标签: ionic2

如何在 ion-icon ios-thumbs-up-outline 中填充颜色

我使用 ion-icon 作为

.html

<ion-icon name="ios-thumbs-up-outline" [style.color]="'#EF3B51'"></ion-icon>
Run Code Online (Sandbox Code Playgroud)

当我这样做时,图标的轮廓变为红色,但我想在图标内的空白区域填充红色。

您可以看到下图:

在此输入图像描述

ionic-framework ionicons ionic2 ionic3

3
推荐指数
1
解决办法
1万
查看次数

自定义或删除离子行之间的空间

我正在学习 Ionic 应用程序。我接触到了 Grid 的东西,但是,我一直坚持删除/修改行之间的空格(第 2 行和第 3 行),如下面的屏幕截图所示:

截屏

我的 HTML 中有以下代码:

<ion-content padding>
    <ion-row>     
      <ion-label> I am good I do not want any space.</ion-label>
    </ion-row>
  <ion-row>
    <div >
      <div class="inner">
        <ion-label *ngIf="!inverse"  no-margin>1 USD = 67 INR</ion-label>
        <ion-label *ngIf="inverse" no-margin>1 INR = {{(1/67) | number }} USD </ion-label>
      </div>
      <button (click)="inverse=!inverse" ion-button clear class="iconWidth" color="dark">  <ion-icon name="swap" class="rotate"></ion-icon></button>
    </div>
  </ion-row>
<ion-row>
  <p>Can you help me to get rid of space between this row and above</p>
  <ion-label> Thanks</ion-label>
</ion-row>
</ion-content> …
Run Code Online (Sandbox Code Playgroud)

html css ionic-framework ionic2 angular

3
推荐指数
1
解决办法
8628
查看次数

当界面 =“popover”时,无法更改 ion-option 中的文本颜色

我用于ion-select选择一个选项,我想更改 的文本颜色ion-option。我的代码如下...

<ion-item>
    <ion-select interface="popover" [(ngModel)]="selectedGrp" (ionChange)="changeGrp()">  
        <ion-option value="" selected disabled>Select</ion-option>
        <ion-option *ngFor="let item of List;let i = index" [value]="item">{{item.name}} </ion-option>
    </ion-select>
</ion-item>
Run Code Online (Sandbox Code Playgroud)

没有 SASS 变量来执行此操作。我尝试过使用 css 和样式,但它不起作用。谁能帮我改变ion-option文字颜色?

html ionic-framework ionic2 ionic3 ion-select

3
推荐指数
1
解决办法
4668
查看次数

Ionic 2 Cordova网络信息插件参考错误

我已根据本教程将网络信息插件安装到我的Ionic 2应用程序中:

离子2 | 如何使用Cordova插件

但是,TypeScript无法编译,因为它无法在状态数组行中找到"连接"的引用.知道如何根据Platform,Page等为它编写import语句吗?

我的课:

import {NavController, NavParams} from 'ionic-framework/ionic';
import {Page, ViewController, Platform, Alert, Modal, Events} from 'ionic-framework/ionic';
import {forwardRef} from 'angular2/core';
import {OnInit} from 'angular2/core';
import {Injectable} from 'angular2/core';
import {TodosService} from '../../services/TodosService';
import {MyTodosItem} from '../../pages/my-todos-item/my-todos-item';

@Page({
  templateUrl: 'build/pages/my-todos/my-todos.html'
})
class TodayPage {

  constructor(
    private platform: Platform,
    private nav: NavController,
    private _events: Events,
    private _todosService: TodosService) {
    this._platform = platform;
    this._isAndroid = platform.is('android');
  }

  ngOnInit() {
    this.getItems();
    this._events.subscribe('item:updated', () => {
      this.getItems();
    });

    this.checkNetwork();
  } …
Run Code Online (Sandbox Code Playgroud)

reference cordova-plugins ionic2 angular

2
推荐指数
1
解决办法
4293
查看次数

Ionic 2从子页面修改app.js中的变量

嗨,我正在学习Ionic 2,我需要更改Ionic 2 app.js中的变量,这是我相信的根控制器.

我开始使用一个新的应用程序

离子启动myApp教程--v2

这是我的app.html

<ion-menu id="leftMenu" [content]="content">
  <ion-content>
    <ion-item class="menu-background">
        <div class="welcome-div">
          <img [src]="pictureURL" class="avatar-image"/>
          <span class="welcome-message">Welcome {{userName}}</span>
        </div>
    </ion-item>
    <ion-list>
      <button class="asbestos" ion-item *ngFor="#p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
    <div>
      <p class="copyright asbestos">&copy; 2016. All rights reserved</p>
    </div>
  </ion-content>

</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
Run Code Online (Sandbox Code Playgroud)

这是我的app.js

import {App, IonicApp, Platform} from 'ionic-framework/ionic';
import {Home} from './pages/home/home';
import {Status} from './pages/status/status';
import {Wallet} from './pages/wallet/wallet';
import {History} from './pages/history/history';
import {EarnMoney} from './pages/earnmoney/earnmoney';
import {ContactUs} from …
Run Code Online (Sandbox Code Playgroud)

javascript ionic-framework ionic2 angular

2
推荐指数
1
解决办法
3538
查看次数

如何在离子2中使用第三方javascript库(pixijs)?

大家好我是新来Angular JS和Ionic Framework,我学习都采用了最新的版本,angular2和ionic2.

我想在我的应用程序中使用PixiJs(2D webGL renderer),但我不知道如何在Ionic2应用程序中添加第三方JavaScript库.

以下我试过:

  1. 安装了第三方库

    npm install pixi --save

  2. 进口

    import {PIXI} from 'pixi';

  3. 运用

    var stage = new PIXI.Stage(0x66FF99);

错误: TypeError: Cannot read property 'Stage' of undefined

请帮我.

pixi.js ionic2 angular

2
推荐指数
1
解决办法
3541
查看次数

使用LocalStorage离子2

我有两个文本字段,必须从两个文本字段中获取数据并使用LocalStorage存储它.所以这里是我已经实现的代码,但它不起作用你能告诉我解决它.

在page1.html中

<ion-input [(ngModel)]="hour" type="number"  ></ion-input>

 <ion-input [(ngModel)]="min" type="number" ></ion-input>

<button clear (click)="setTime(hours.value,min.value)" item-right >settime</button>
Run Code Online (Sandbox Code Playgroud)

在pag1.ts

export class Page1 {

   public hour;
   public min;
   public local:Storage; 

  constructor(public nav: NavController, translate:TranslateService) {}


 setTime(hour, min){

   if(hour<24 && hour>0 && min>0 && min<61){
       this.local.set('hour',JSON.stringify(hour));
       this.local.set('min',JSON.stringify(min));
   }
   else{
     console.log("OUTOF LIMIT TIME EXCEPTION the values are "+hour+min);
   }
 }

  }
Run Code Online (Sandbox Code Playgroud)

在控制台日志上,它显示 [Object Object]在最后

并且也请告诉得到 从localStorage的.提前致谢 :-)

javascript ionic-framework ionic2 angular

2
推荐指数
2
解决办法
2万
查看次数

如何在Ionic2中以编程方式更改ion-title

在我的Ionic2项目中,我有三个选项卡的标签视图:

tabs.ts

<ion-navbar *navbar>
    <ion-title>My tab parent title</ion-title>
</ion-navbar>

<ion-tabs>
    <ion-tab [root]="tab1Root" tabIcon="people"></ion-tab>
    <ion-tab [root]="tab2Root" tabIcon="person"></ion-tab>
    <ion-tab [root]="tab3Root" tabIcon="globe"></ion-tab>
</ion-tabs>
Run Code Online (Sandbox Code Playgroud)

有谁知道如何以编程方式ion-title从其中一个子选项卡更改此页面?

ionic-framework ionic2

2
推荐指数
1
解决办法
5190
查看次数

离子获取文本框值

嗨,我是离子的新手,我有以下的html和js代码.我试图在单击按钮时获取文本框上的用户输入值.(如果可能的话,我想将它存储到一个对象或一个本地缓存中,以便它可以在整个同一个会话中使用)

<ion-navbar *navbar hideBackButton>
     <ion-title>Welcome</ion-title>
</ion-navbar>

<ion-content>

<ion-list>

    <ion-item>
        <ion-label floating>Please enter a nickname</ion-label>
        <ion-input type="text" value=""></ion-input>
    </ion-item>

</ion-list>

<div padding>
    <button (click)="login()" primary block>Continue</button>
</div>
Run Code Online (Sandbox Code Playgroud)

接下来是我的.js代码

 import {Component} from "@angular/core";
 import {MenuController, NavController, Alert} from "ionic-angular";
 import {Index} from "../index/index";

 @Component({
    templateUrl: 'build/pages/login/login.html'
 })
 export class Login {
    static get parameters() {
        return [[MenuController], [NavController]];
    }

 constructor(menu, nav) {
        this.menu = menu;
        this.menu.swipeEnable(false);

        this.nav = nav;
    }

    login() {
        let alert = Alert.create({
        title:      'You have entered',
        message:    'Hello', …
Run Code Online (Sandbox Code Playgroud)

javascript ionic-framework ionic2

2
推荐指数
1
解决办法
1万
查看次数

在加载数据之前在视图中加载数据

我有一个问题,我正在使用Ionic 2和angular 2.

我必须在视图中显示一些数据,但是我从同一页面中的API获取这些数据,所以当我尝试在视图中显示它们时,它们尚未定义.获取这些数据后,如何等待加载视图?

我试过onPageWillEnter但它不起作用.

先感谢您.

ionic-framework ionic2 angular

2
推荐指数
1
解决办法
1万
查看次数