【ionic 3】怎么使用官网的demo实现页面分栏

要实现的功能：

实现过程很简单，去官网找demo，把相关代码复制到项目中即可。
第一步：在官网找到对应页面。官网地址：https://ionicframework.com/docs/

第二步：打开右上角的Demo Source，把相应代码复制过去，然后稍微改动一下就好。

.ts文件中：

import { Component } from '@angular/core';

import { Platform } from 'ionic-angular';


@Component({
  templateUrl: 'template.html'
})
export class BasicPage {
  pet: string = "puppies";
  isAndroid: boolean = false;

  constructor(platform: Platform) {
    this.isAndroid = platform.is('android');
  }
}

.html中：

<ion-header>
  <ion-navbar no-border-bottom>
    <ion-title>
      睡眠记录
    ion-title>
  ion-navbar>

  <ion-toolbar no-border-top>
    <ion-segment [(ngModel)]="pet">
      <ion-segment-button value="puppies">
        日
      ion-segment-button>
      <ion-segment-button value="kittens">
        周
      ion-segment-button>
      <ion-segment-button value="ducklings">
        月
      ion-segment-button>
    ion-segment>
  ion-toolbar>
ion-header>

<ion-content>
  <div [ngSwitch]="pet">
    <ion-list *ngSwitchCase="'puppies'">
      <ion-item>
        <ion-thumbnail item-start>
          <img src="assets/img/thumbnail-puppy-1.jpg">
        ion-thumbnail>
        <h2>Rubyh2>
      ion-item>
      <ion-item>
        <ion-thumbnail item-start>
          <img src="assets/img/thumbnail-puppy-2.jpg">
        ion-thumbnail>
        <h2>Oscarh2>
      ion-item>
      <ion-item>
        <ion-thumbnail item-start>
          <img src="assets/img/thumbnail-puppy-4.jpg">
        ion-thumbnail>
        <h2>Zoeyh2>
      ion-item>
    ion-list>

    <ion-list *ngSwitchCase="'kittens'">     
    ion-list>

    <ion-list *ngSwitchCase="'ducklings'">
    ion-list>
  div>
ion-content>

可见，当接触一个新东西时，官网是个好去处。