5.组件(三):模态、导航、popover

May 24, 2018

Menus 侧边抽屉菜单

菜单是可以拖出或切换显示的侧面菜单导航。当菜单关闭时，菜单的内容将被隐藏。菜单风格基于平台自适应。

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button ion-item (click)="openPage(homePage)">
        Home
      </button>
      <button ion-item (click)="openPage(friendsPage)">
        Friends
      </button>
      <button ion-item (click)="openPage(eventsPage)">
        Events
      </button>
      <button ion-item (click)="closeMenu()">
        Close Menu
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav id="nav" #content [root]="rootPage"></ion-nav>

（个人没测试）

Modals 模态

模式在屏幕外滑动以显示临时UI，通常用于登录或注册页面，消息组成和选项选择。

需要导入ModalController

import { ModalController } from 'ionic-angular';
import { MyviewsPage} from "../myviews/myviews";

export class MyPage {
  constructor(public modalCtrl: ModalController) {
  }

  presentModal(){
    let modal = this.modalCtrl.create(MyviewsPage);
    modal.present()
  }
}

dismiss:

import {ViewController} from "ionic-angular";

constructor(public navCtrl: NavController,public viewCtrl: ViewController, public navParams: NavParams) {
}

dismiss(){
this.viewCtrl.dismiss()
}

导航是通过组件来处理的，该组件作为一个简单的栈(stack)来工作,新页面被push和pop，对应于在history中向前和向后移动。我们从加载导航组件的根页面开始：

修改入口app.components.ts

//自定的page为`NavRootPage`
import  { NavRootPage} from "../pages/nav-root/nav-root";

//此处
@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>'
  //templateUrl: 'app.html'
})

export class MyApp {
  rootPage =  NavRootPage ;
}

接下来，我们可以通过将导航控制器注入到我们的任何页面中来访问导航到的每个页面中的导航控制器。请注意，页面组件(Page components)不需要选择器(selector)。 Ionic自动添加这些。

@Component({
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>Login</ion-title>
    </ion-navbar>
  </ion-header>

  <ion-content>Hello World</ion-content>`
})
export class StartPage {
  constructor(public navCtrl: NavController) {
  }
}

push和pop的操作：

  pushNewPage(){
    this.navCtrl.push(NavRootPage)
  }

  goBack(){
    if (this.navCtrl.canGoBack()) {
      this.navCtrl.pop()
    }
  }

Navigating from the Root Component

root组件中如何使用nav，该怎么办？您无法注入NavController，因为nav控制器的任何组件都是root组件的子组件，因此它们无法注入。

此时，可以通过向ion-nav添加一个引用变量，可以使用@ViewChild获取导航控制器（它扩展了NavController）的Nav组件 .

app.component.ts文件:

@Component({
  template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
})
export class MyApp {
  @ViewChild('myNav') nav: Nav;
  rootPage = HelloIonicPage;
  
  ngAfterViewInit() {
    // Let's navigate from TabsPage to Page1
    this.nav.push(NavRootPage);
  }
}

可以看到nav被模板引用变量#myNav定义.

导航可以嵌套在复杂组件（如Tabs）中使用。与传统路由系统不同，Ionic的导航功能可以轻松地从应用中的任何位置导航到给定的页面，而无需指定特定的路由。以iOS上的App Store应用程序为例，我们可以轻松导航AppDetailPage，该AppDetailPage显示有关任何选项卡上的特定应用程序的信息（自己试试看！）。

查看Tabs文档以获取有关如何轻松实现此目的的更多信息。

Popover是一种浮现在应用内容上方的视图。 Popovers提供了一种简单的方式来呈现或收集用户的信息，并且通常在以下情况下使用.

显示有关当前视图的更多信息.
选择一个常用的工具或配置.
在您的某个视图中提供要执行的操作列表

更多信息查看https://ionicframework.com/docs/api/components/popover/PopoverController

import { PopoverController} from "ionic-angular";
...
  showPopover(){
    let popover = this.popoverCtrl.create(HelloIonicPage)
    popover.present()
  }

Radio

与复选框类似，radios是一个保存布尔值的输入组件。在hood下，radios与HTML无线电输入没有区别。但是，像其他Ionic组件一样，radios在每个平台上的样式都不同。与复选框不同，radios组件组成一个组，一次只能选择一个无radios。

使用checked属性设置默认值，并使用disabled属性禁用用户更改为该值。

  <ion-list radio-group>
    <ion-list-header>
      Language
    </ion-list-header>

    <ion-item>
      <ion-label>Go</ion-label>
      <ion-radio checked="true" value="go"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Rust</ion-label>
      <ion-radio value="rust"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Python</ion-label>
      <ion-radio value="python" disabled="true"></ion-radio>
    </ion-item>
  </ion-list>

Range(滑动条)

范围是一种控件，让用户通过沿滑块或轨道移动滑块来从一系列值中进行选择。

  <ion-list>
    <ion-list-header>
      Adjust Display
    </ion-list-header>
    <ion-item>
      <ion-range [(ngModel)]="brightness">
        <ion-icon range-left small name="sunny"></ion-icon>
        <ion-icon range-right name="sunny"></ion-icon>
      </ion-range>
    </ion-item>
    <ion-item>
      <ion-range min="-200" max="200" pin="true" [(ngModel)]="contrast" color="secondary">
        <ion-icon range-left small name="contrast"></ion-icon>
        <ion-icon range-right name="contrast"></ion-icon>
      </ion-range>
    </ion-item>
    <ion-item>
      <ion-range dualKnobs="true" pin="true" [(ngModel)]="structure" color="dark">
        <ion-icon range-left small name="brush"></ion-icon>
        <ion-icon range-right name="brush"></ion-icon>
      </ion-range>
    </ion-item>
    <ion-item>
      <ion-range min="1000" max="2000" step="100" snaps="true" [(ngModel)]="warmth" color="danger">
        <ion-icon range-left small color="danger" name="thermometer"></ion-icon>
        <ion-icon range-right color="danger" name="thermometer"></ion-icon>
      </ion-range>
    </ion-item>
  </ion-list>

  <ion-list>
    <ion-list-header>
      Adjust Text
    </ion-list-header>
    <ion-item>
      <ion-range min="-100" step="10" snaps="true" [(ngModel)]="text">
        <ion-label range-left class="small-text">A</ion-label>
        <ion-label range-right>A</ion-label>
      </ion-range>
    </ion-item>
  </ion-list>
  
  //ts文件：
  
  //定义初始值
  brightness: number = 20;
  contrast: number = 0;
  warmth: number = 1300;
  structure: any = { lower: 33, upper: 60 };
  text: number = 0;

Searchbar

Searchbar绑定到模型，并在模型更改时发出输入事件。

 <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
  <ion-list>
    <ion-item *ngFor="let item of items">
      {{ item }}
    </ion-item>
  </ion-list>
  
  //.ts
    searchQuery: string = ''
  item:string[];

  //初始情况下的item
  initializeItems(){
    this.items = [
      'Amsteradm',
      'Bogota'
    ];
  }

  getItems(ev:any){
    this.initializeItems();
    let val = ev.target.value;
    if (val && val.trim() != '') {
      this.items = this.items.filter((item) => {
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }

Segment

段是按行显示的按钮的集合.它们可以充当过滤器，根据分段值显示/隐藏元素。

API文档

<div padding>
  <ion-segment [(ngModel)]="pet">
    <ion-segment-button value="kittens">
      Kittens
    </ion-segment-button>
    <ion-segment-button value="puppies">
      Puppies
    </ion-segment-button>
  </ion-segment>
  </div>

  <div [ngSwitch]="pet">
    <ion-list *ngSwitchCase="'puppies'">
      <ion-item>
        <ion-thumbnail item-start>
          <img src="assets/imgs/thumbnail-puppy-1.jpg">
        </ion-thumbnail>
        <h2>Ruby</h2>
      </ion-item>
      ...
    </ion-list>

    <ion-list *ngSwitchCase="'kittens'">
      <ion-item>
        <ion-thumbnail item-start>
          <img src="assets/imgs/thumbnail-kitten-1.jpg">
        </ion-thumbnail>
        <h2>Luna</h2>
      </ion-item>
      ...
    </ion-list>
  </div>

select

  <ion-list>
    <ion-item>
      <ion-label>Gaming</ion-label>
      <ion-select multiple="false" [(ngModel)]="gaming">
        <ion-option value="nes">NES</ion-option>
        <ion-option value="n64">Nintendo64</ion-option>
        <ion-option value="ps">PlayStation</ion-option>
        <ion-option value="genesis">Sega Genesis</ion-option>
        <ion-option value="saturn">Sega Saturn</ion-option>
        <ion-option value="snes">SNES</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>

  <ion-list>
    <ion-item>
      <ion-label>Toppings</ion-label>
      <ion-select [(ngModel)]="toppings" multiple="true" cancelText="Nah" okText="Okay!">
        <ion-option value="bacon" selected="true">Bacon</ion-option>
        <ion-option value="olives">Black Olives</ion-option>
        <ion-option value="xcheese" selected="true">Extra Cheese</ion-option>
        <ion-option value="peppers">Green Peppers</ion-option>
        <ion-option value="mushrooms">Mushrooms</ion-option>
        <ion-option value="onions">Onions</ion-option>
        <ion-option value="pepperoni">Pepperoni</ion-option>
        <ion-option value="pineapple">Pineapple</ion-option>
        <ion-option value="sausage">Sausage</ion-option>
        <ion-option value="Spinach">Spinach</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>

可以通过百分比来调整select的宽度。

ion-select {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    max-width: 45%;
    
    /*添加*/
    width: 70%;
    /* background: green; */
    border: green solid 1px;
}

其他: 配合数据源举例

  <ion-list no-lines>
    <ion-item *ngFor="let itemTop of merchantTypeReply">
        <ion-label>{{ itemTop.title }}</ion-label>
          <ion-select  placeholder="{{itemTop.title}}"  submitText="确定" cancelText="取消" >
            <ion-option *ngFor="let option of itemTop.options; let i = index" [value]="option.id"  [selected] = "i == 0">{{option.name}}</ion-option>
          </ion-select> 
    </ion-item>
  </ion-list>

Slides 幻灯片

For more information, Check out the Slides API docs and the Slide API docs.

  <!--<ion-slides pager>-->

    <!--<ion-slide style="background-color: green">-->
      <!--<h2>Slide 1</h2>-->
    <!--</ion-slide>-->

    <!--<ion-slide style="background-color: blue">-->
      <!--<h2>Slide 2</h2>-->
    <!--</ion-slide>-->

    <!--<ion-slide style="background-color: red">-->
      <!--<h2>Slide 3</h2>-->
    <!--</ion-slide>-->

  <!--</ion-slides>-->


  <ion-slides pager>
    <!--前几个元素从-->
    <ion-slide *ngFor="let slide of slides">
      <ion-toolbar>
        <ion-buttons end>
          <button ion-button color="primary">Skip</button>
        </ion-buttons>
      </ion-toolbar>
      <img [src]="slide.image" class="slide-image"/>
      <h2 class="slide-title" [innerHTML]="slide.title"></h2>
      <p [innerHTML]="slide.description"></p>
    </ion-slide>
    <!--最后一个元素为写死的数据-->
    <ion-slide>
      <ion-toolbar>
      </ion-toolbar>
      <img src="assets/imgs/ica-slidebox-img-4.png" class="slide-image"/>
      <h2 class="slide-title">Ready to Play?</h2>
      <button ion-button large clear icon-end color="primary">
        Continue
        <ion-icon name="arrow-forward"></ion-icon>
      </button>
    </ion-slide>
  </ion-slides>
  
  //ts文件
  
    slides = [
    {
      title: "Welcome to the Docs!",
      description: "The <b>Ionic Component Documentation</b> showcases a number of useful components that are included out of the box with Ionic.",
      image: "assets/imgs/ica-slidebox-img-1.png",
    },
    {
      title: "What is Ionic?",
      description: "<b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.",
      image: "assets/imgs/ica-slidebox-img-2.png",
    },
    {
      title: "What is Ionic Cloud?",
      description: "The <b>Ionic Cloud</b> is a cloud platform for managing and scaling Ionic apps with integrated services like push notifications, native builds, user auth, and live updating.",
      image: "assets/imgs/ica-slidebox-img-3.png",
    }
  ];

Tab

基本使用

To initialize Tabs, use , with a child for each tab:

  template: `
    <ion-tabs>
      <ion-tab tabIcon="heart" [root]="tab1"></ion-tab>
      <ion-tab tabIcon="star" [root]="tab2"></ion-tab>
      <ion-tab tabTitle="Music" [root]="rootPage"></ion-tab>
      <ion-tab tabTitle="Movies" [root]="rootPage"></ion-tab>
      <ion-tab tabIcon="star" tabTitle="Games" [root]="rootPage"></ion-tab>
    </ion-tabs>
    
 //ts
 tab1: any;
 tab2: any;
 constructor(){
   this.tab1 =  HelloIonicPage;
   this.tab2 =  NavRootPage;
 }

可以看到每个<ion-tab>绑定了个[root]属性，就如同nav中的<ion-nav>一样。这是因为每个<ion-tab>真的只是一个导航控制器。

这意味着每个选项卡都有自己的history stack，并且 NavController instances 注入到每个选项卡的子组件@Components 中的NavController实例对于每个选项卡都是唯一的.

ps: 可以调整tabs的位置，如tabsPlacement="top"

badge、title、icon、color

<ion-tabs class="tabs-icon" [color]="isAndroid ? 'danger' : 'primary'">
 <ion-tab tabTitle="Music" tabIcon="contact" [root]="tab1"></ion-tab>
 <ion-tab tabIcon="compass" [root]="tab2"></ion-tab>
 <ion-tab tabIcon="star" tabBadge="3" tabBadgeStyle="danger" tabTitle="Games" [root]="tab2"></ion-tab>
</ion-tabs>

Toast

toast比较简单了

presentToast() {
    let toast = this.toastCtrl.create({
      message: 'User was added successfully',
      duration: 3000
    });
    toast.present();
  }

此外可以设置closeButtonText、位置等。详情链接。

Toggle（UISwitch)

Buttons in Toolbars

略

Segment in Toolbars

略

Searchbar in Toolbars

略