ionic的組件components

原創 夏虫语冰彡 2018-09-03 10:21

詳情參考https://ionicframework.com/docs/components/

Action Sheets 動作表

操作表單從設備屏幕底部向上滑動，並顯示一組選項，可以確認或取消操作。行動表有時可以用來作爲菜單的替代，但是，他們不應該用於導航。

操作表總是顯示在頁面上的任何其他組件之上，並且必須被解僱才能與底層內容交互。當它被觸發時，頁面的其餘部分會變暗，以便更多地關注“操作表”選項。

import { ActionSheetController } from 'ionic-angular';

export class MyPage {
  constructor(public actionSheetCtrl: ActionSheetController) {
  }

  presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Modify your album',
      buttons: [
        {
          text: 'Destructive',
          role: 'destructive',
          handler: () => {
            console.log('Destructive clicked');
          }
        },{
          text: 'Archive',
          handler: () => {
            console.log('Archive clicked');
          }
        },{
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    actionSheet.present();
  }
}

Alerts 警報

警報是向用戶提供選擇特定動作或動作列表的好方法。他們也可以爲用戶提供重要的信息，或要求他們作出決定（或多個決定）。

從用戶界面的角度來看，警報可以被認爲是一種“浮動”模式，只覆蓋屏幕的一部分。這意味着警報只能用於快速操作，如密碼驗證，小應用程序通知或快速選項。更深入的用戶流量應保留全屏情態動詞。

警報非常靈活，可以很容易地進行定製。

Basic Alerts 基本警報

基本警報通常用於通知用戶有關新信息（應用程序中的更改，新功能等），需要確認的緊急情況，或向用戶確認操作是否成功。

import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
  }

  showAlert() {
    let alert = this.alertCtrl.create({
      title: 'New Friend!',
      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
      buttons: ['OK']
    });
    alert.present();
  }
}
Prompt Alerts 提示警報

提示提供了一種輸入數據或信息的方法。在向前移動應用程序的流程之前，通常會使用提示來詢問用戶密碼。

import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
  }

  showPrompt() {
    let prompt = this.alertCtrl.create({
      title: 'Login',
      message: "Enter a name for this new album you're so keen on adding",
      inputs: [
        {
          name: 'title',
          placeholder: 'Title'
        },
      ],
      buttons: [
        {
          text: 'Cancel',
          handler: data => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Save',
          handler: data => {
            console.log('Saved clicked');
          }
        }
      ]
    });
    prompt.present();
  }
}
Confirmation Alerts 確認警報

當需要用戶明確確認一個特定的選擇，然後在應用程序中前進時，使用確認警報。確認提醒的一個常見例子是檢查以確保用戶想要從他們的地址簿中刪除或刪除聯繫人。

import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
  }

  showConfirm() {
    let confirm = this.alertCtrl.create({
      title: 'Use this lightsaber?',
      message: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?',
      buttons: [
        {
          text: 'Disagree',
          handler: () => {
            console.log('Disagree clicked');
          }
        },
        {
          text: 'Agree',
          handler: () => {
            console.log('Agree clicked');
          }
        }
      ]
    });
    confirm.present();
  }
}
Radio Alerts 無線電警報

無線電警報是一種確認警報，但使用無線電組件來提供多種選擇。向用戶提供一組選項，但只能選擇一個選項。

import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
  }

  showRadio() {
    let alert = this.alertCtrl.create();
    alert.setTitle('Lightsaber color');

    alert.addInput({
      type: 'radio',
      label: 'Blue',
      value: 'blue',
      checked: true
    });

    alert.addButton('Cancel');
    alert.addButton({
      text: 'OK',
      handler: data => {
        this.testRadioOpen = false;
        this.testRadioResult = data;
      }
    });
    alert.present();
  }
}
Checkbox Alerts 複選框警報

複選框警報是一種確認警報，但使用複選框組件可提供多種選擇。他們爲用戶提供了一系列可供選擇的選項。

import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
  }

  showCheckbox() {
    let alert = this.alertCtrl.create();
    alert.setTitle('Which planets have you visited?');

    alert.addInput({
      type: 'checkbox',
      label: 'Alderaan',
      value: 'value1',
      checked: true
    });

    alert.addInput({
      type: 'checkbox',
      label: 'Bespin',
      value: 'value2'
    });

    alert.addButton('Cancel');
    alert.addButton({
      text: 'Okay',
      handler: data => {
        console.log('Checkbox data:', data);
        this.testCheckboxOpen = false;
        this.testCheckboxResult = data;
      }
    });
    alert.present();
  }
}

Badges 徽章

徽章是通常將數值傳遞給用戶的小部件。它們通常在一個項目中使用。

<ion-item>
  <ion-icon name="logo-twitter" item-start></ion-icon>
  Followers
  <ion-badge item-end>260k</ion-badge>
</ion-item>

徽章也可以被賦予任何顏色屬性：

<ion-badge color="secondary"></ion-badge>

Buttons 按鈕

Default Style 默認樣式
<button ion-button>Button</button>
該color屬性設置按鈕的顏色。離子包括許多默認的顏色，可以很容易地被覆蓋：

<button ion-button color="light">Light</button>
<button ion-button>Default</button>
<button ion-button color="secondary">Secondary</button>
<button ion-button color="danger">Danger</button>
<button ion-button color="dark">Dark</button>
Outline Style 大綱樣式
要使用按鈕的大綱樣式，只需添加outline屬性：

<button ion-button color="light" outline>Light Outline</button>
<button ion-button outline>Primary Outline</button>
<button ion-button color="secondary" outline>Secondary Outline</button>
<button ion-button color="danger" outline>Danger Outline</button>
<button ion-button color="dark" outline>Dark Outline</button>
Clear Style 清除樣式
要創建一個圓角的按鈕，只需添加round屬性：

<button ion-button color="light" round>Light Round</button>
<button ion-button round>Primary Round</button>
<button ion-button color="secondary" round>Secondary Round</button>
<button ion-button color="danger" round>Danger Round</button>
<button ion-button color="dark" round>Dark Round</button>
Round Buttons 圓角按鈕
要創建一個圓角的按鈕，只需添加round屬性：

<button ion-button color="light" round>Light Round</button>
<button ion-button round>Primary Round</button>
<button ion-button color="secondary" round>Secondary Round</button>
<button ion-button color="danger" round>Danger Round</button>
<button ion-button color="dark" round>Dark Round</button>
Block Buttons 塊按鈕
添加block到按鈕將使按鈕佔據其父寬度的100％。它也將添加display: block到按鈕：

<button ion-button block>Block Button</button>
Full Buttons 完整按鈕
添加full到按鈕也會使按鈕佔據其父寬度的100％。但是，它也會刪除按鈕的左右邊界。當按鈕應該在顯示器的整個寬度上延伸時，此樣式非常有用。

<button ion-button full>Full Button</button>
Button Sizes 按鈕大小
添加large屬性使按鈕更大，或small使其更小：

<button ion-button small>Small</button>
<button ion-button>Default</button>
<button ion-button large>Large</button>
Icon Buttons 圖標按鈕
要將圖標添加到按鈕，請在其中添加一個圖標組件以及一個位置屬性：

<!-- Float the icon left -->
<button ion-button icon-left>
  <ion-icon name="home"></ion-icon>
  Left Icon
</button>

<!-- Float the icon right -->
<button ion-button icon-right>
  Right Icon
  <ion-icon name="home"></ion-icon>
</button>

<!-- Only icon (no text) -->
<button ion-button icon-only>
  <ion-icon name="home"></ion-icon>
</button>
Buttons In Components 組件中的按鈕
儘管按鈕可以單獨使用，但是可以很容易地在其他組件中使用。例如，按鈕可以添加到列表項目或導航欄。

<ion-header>
  <ion-navbar>
    <ion-buttons start>
      <button ion-button icon-only>
        <ion-icon name="contact"></ion-icon>
      </button>
    </ion-buttons>

    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-list>
  <ion-item>
    Left Icon Button
    <button ion-button outline item-end icon-left>
      <ion-icon name="star"></ion-icon>
      Left Icon
    </button>
  </ion-item>
</ion-list>

Cards 卡牌

卡片是展示重要內容的絕佳方式，並迅速成爲應用程序的核心設計模式。它們是遏制和組織信息的好方法，同時也爲用戶設定可預測的期望。有了這麼多的內容可以立即顯示，而且屏幕通常很少，卡片已經很快成爲許多公司的設計模式，包括Google，Twitter和Spotify。

對於移動體驗而言，卡片可以輕鬆地在多種不同的屏幕尺寸下直觀地顯示相同的信息。他們允許更多的控制，靈活，甚至可以動畫。卡通常被放置在另一個之上，但是它們也可以像“頁面”一樣使用，並在左右之間滑動。

Basic Cards 基本卡片
卡主要是一個CSS組件。要使用基本卡，請遵循以下結構：

<ion-card>

  <ion-card-header>
    Card Header
  </ion-card-header>

  <ion-card-content>
    <!-- Add card content here! -->
  </ion-card-content>

</ion-card>
Card Headers 卡頭
就像一個普通的頁面一樣，卡片可以被定製爲包含標題。要爲卡片添加標題，請在卡片<ion-card-header>內添加組件：

<ion-card>
  <ion-card-header>
    Header
  </ion-card-header>
  <ion-card-content>
    The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
  </ion-card-content>
</ion-card>
Card Lists 卡列表
一張卡片可以包含一個項目列表。ion-list在裏面添加一個組件ion-card-content來顯示一個列表：

<ion-card>
  <ion-card-header>
    Explore Nearby
  </ion-card-header>

  <ion-list>
    <button ion-item>
      <ion-icon name="cart" item-start></ion-icon>
      Shopping
    </button>

    <button ion-item>
      <ion-icon name="medical" item-start></ion-icon>
      Hospital
    </button>

    <button ion-item>
      <ion-icon name="cafe" item-start></ion-icon>
      Cafe
    </button>

    <button ion-item>
      <ion-icon name="paw" item-start></ion-icon>
      Dog Park
    </button>

    <button ion-item>
      <ion-icon name="beer" item-start></ion-icon>
      Pub
    </button>

    <button ion-item>
      <ion-icon name="planet" item-start></ion-icon>
      Space
    </button>

  </ion-list>
</ion-card>
Card Images 卡片圖像
圖片大小各不相同，因此在整個應用中採用一致的樣式非常重要。圖像可以很容易地添加到卡。將圖像添加到卡上將使圖像具有恆定的寬度和可變的高度。列表，標題和其他卡組件可以很容易地與圖像卡相結合。要將圖像添加到卡片，請使用以下標記：

<ion-card>
  <img src="img/nin-live.png"/>
  <ion-card-content>
    <ion-card-title>
      Nine Inch Nails Live
      </ion-card-title>
    <p>
      The most popular industrial group ever, and largely
      responsible for bringing the music to a mass audience.
    </p>
  </ion-card-content>
</ion-card>
Background Images 背景圖片
卡可以用來實現多種設計。我們提供了許多元素來實現常見的設計，但有時需要添加自定義樣式。添加背景圖像卡是一個完美的例子，如何添加自定義樣式可以實現一個完全不同的外觀。

下面的html可以被添加到頁面的內容中：

<ion-content class="card-background-page">

  <ion-card>
    <img src="img/card-saopaolo.png"/>
    <div class="card-title">São Paulo</div>
    <div class="card-subtitle">41 Listings</div>
  </ion-card>

  <ion-card>
    <img src="img/card-amsterdam.png"/>
    <div class="card-title">Amsterdam</div>
    <div class="card-subtitle">64 Listings</div>
  </ion-card>

  <ion-card>
    <img src="img/card-sf.png"/>
    <div class="card-title">San Francisco</div>
    <div class="card-subtitle">72 Listings</div>
  </ion-card>

  <ion-card>
    <img src="img/card-madison.png"/>
    <div class="card-title">Madison</div>
    <div class="card-subtitle">28 Listings</div>
  </ion-card>

</ion-content>
然後，在頁面的Sass文件中：

.card-background-page {

  ion-card {
    position: relative;
    text-align: center;
  }

  .card-title {
    position: absolute;
    top: 36%;
    font-size: 2.0em;
    width: 100%;
    font-weight: bold;
    color: #fff;
  }

  .card-subtitle {
    font-size: 1.0em;
    position: absolute;
    top: 52%;
    width: 100%;
    color: #fff;
  }

}
Advanced Cards 高級卡

來自不同類型的卡片的樣式可以被組合以創建高級卡片。卡也可以使用自定義的CSS。下面是幾個先進的卡片，通過將各種卡片屬性與少量的自定義CSS組合在一起而構建。

1.社交卡
2.地圖卡

社交卡
演示源
在應用程序中創建社交卡經常是必要的。使用卡中不同項目的組合可以實現這一點。

<ion-card>

  <ion-item>
    <ion-avatar item-start>
      <img src="img/marty-avatar.png">
    </ion-avatar>
    <h2>Marty McFly</h2>
    <p>November 5, 1955</p>
  </ion-item>

  <img src="img/advance-card-bttf.png">

  <ion-card-content>
    <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
  </ion-card-content>

  <ion-row>
    <ion-col>
      <button ion-button icon-left clear small>
        <ion-icon name="thumbs-up"></ion-icon>
        <div>12 Likes</div>
      </button>
    </ion-col>
    <ion-col>
      <button ion-button icon-left clear small>
        <ion-icon name="text"></ion-icon>
        <div>4 Comments</div>
      </button>
    </ion-col>
    <ion-col center text-center>
      <ion-note>
        11h ago
      </ion-note>
    </ion-col>
  </ion-row>

</ion-card>

地圖卡
演示源
離子組件的組合可用於創建顯示爲地圖的卡片。

<ion-card>

  <img src="img/advance-card-map-madison.png">
  <ion-fab right top>
    <button ion-fab>
      <ion-icon name="pin"></ion-icon>
    </button>
  </ion-fab>

  <ion-item>
    <ion-icon name="football" item-start large></ion-icon>
    <h2>Museum of Football</h2>
    <p>11 N. Way St, Madison, WI 53703</p>
  </ion-item>

  <ion-item>
    <ion-icon name="wine" item-left large ></ion-icon>
    <h2>Institute of Fine Cocktails</h2>
    <p>14 S. Hop Avenue, Madison, WI 53703</p>
  </ion-item>

  <ion-item>
    <span item-left>18 min</span>
    <span item-left>(2.6 mi)</span>
    <button ion-button icon-left clear item-end>
      <ion-icon name="navigate"></ion-icon>
      Start
    </button>
  </ion-item>

</ion-card>

Checkbox 複選框

複選框是一個保存布爾值的輸入組件。複選框與HTML複選框輸入沒有區別。但是，像其他Ionic組件一樣，複選框在每個平臺上的樣式都是不同的。使用checked屬性設置默認值，使用disabled屬性禁用用戶更改值。

<ion-item>
  <ion-label>Daenerys Targaryen</ion-label>
  <ion-checkbox color="dark" checked="true"></ion-checkbox>
</ion-item>

<ion-item>
  <ion-label>Arya Stark</ion-label>
  <ion-checkbox disabled="true"></ion-checkbox>
</ion-item>

DateTime 時間日期

DateTime組件用於顯示一個界面，使用戶可以輕鬆選擇日期和時間。DateTime組件與native 元素類似，但是，Ionic的DateTime組件可以輕鬆地以首選格式顯示日期和時間，並管理日期時間值。

<ion-item>
  <ion-label>Start Time</ion-label>
  <ion-datetime displayFormat="h:mm A" pickerFormat="h mm A" [(ngModel)]="event.timeStarts"></ion-datetime>
</ion-item>

FABs 浮動按鈕

FAB（浮動按鈕）是標準的材料設計組件。他們被塑造成一個代表推動行動的圈子。按下時，可能會包含更多相關的操作。顧名思義，FAB就是以固定的位置浮在內容上的。

<ion-content>
  <!-- Real floating action button, fixed. It will not scroll with the content -->
  <ion-fab top right edge>
    <button ion-fab mini><ion-icon name="add"></ion-icon></button>
    <ion-fab-list>
      <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
    </ion-fab-list>
  </ion-fab>

  <ion-fab right bottom>
    <button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
    <ion-fab-list side="left">
      <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
    </ion-fab-list>
  </ion-fab>

</ion-content>

Genstures 手勢

基本手勢可以從HTML通過結合訪問tap，press，pan，swipe，rotate，和pinch事件。

<ion-card (tap)="tapEvent($event)">
  <ion-item>
    Tapped: {{tap}} times
  </ion-item>
</ion-card>

Grid 格

Ionic的網格系統基於flexbox，這是Ionic支持的所有設備都支持的CSS功能。網格由三個單元組成 - 網格，行和列。
網格系統由12列組成，ion-col可以通過設置col-屬性來確定大小。

<ion-grid>
  <ion-row>
    <ion-col col-12>This column will take 12 columns</ion-col>
  </ion-row>
  <ion-row>
    <ion-col col-6>This column will take 6 columns</ion-col>
  </ion-row>
</ion-grid>
一個ion-col可以通過設置不同的斷點大小col-<breakpoint>-<width>。

<ion-grid>
  <ion-row>
    <ion-col col-12 col-sm-9 col-md-6 col-lg-4 col-xl-3>
      This column will be 12 columns wide by default,
      9 columns at the small breakpoint,
      6 at the medium breakpoint, 4 at large, and 3 at xl.
    </ion-col>
  </ion-row>
</ion-grid>

Icons 圖標

衆所周知和喜愛，Ionic帶有700+圖標。

要使用圖標，請填寫組件name上的屬性ion-icon：

<ion-icon name="heart"></ion-icon>
活動/非活動圖標
所有圖標都有active和inactive狀態。活動圖標通常是滿的和厚的，其中非活動圖標被勾畫和變薄。將該isActive屬性設置爲true或false更改圖標的狀態。如果沒有指定值，圖標將默認爲激活狀態。

<ion-icon name="heart"></ion-icon>                    <!-- active -->
<ion-icon name="heart" isActive="false"></ion-icon>  <!-- inactive -->
平臺特定的圖標
許多圖標都有Material Design和iOS版本。Ionic將自動使用基於該平臺的正確版本。

要指定要用於每個平臺的圖標，請使用md和ios屬性並提供平臺特定的圖標名稱。

<ion-icon ios="logo-apple" md="logo-android"></ion-icon>
變量圖標
使用變量設置圖標：

<ion-icon [name]="myIcon"></ion-icon>
export class MyFirstPage {
  // use the home icon
  myIcon: string = "home";
}

探索更完整的圖標 https://ionicframework.com/docs/ionicons/

Inputs 輸入

輸入對於以安全的方式收集和處理用戶輸入是必不可少的。他們應該遵循每個平臺的樣式和交互準則，以便他們直觀地與用戶交互。Ionic使用Angular 2的表單庫，它可以被認爲是兩個相關的組件，控件和控件組。

表單中的每個輸入字段都有一個Control，一個綁定到字段值的函數，並執行驗證。一個控制組是控件的集合。控件組處理表單提交，並提供可用於確定整個表單是否有效的高級API。

Fixed Inline Labels 固定內嵌標籤
用於fixed在輸入元素的左側放置一個標籤。輸入文字時，標籤不會隱藏。不管標籤的長度如何，輸入都將在相同的位置對齊。佔位符文本可以與固定標籤結合使用。

<ion-list>

  <ion-item>
    <ion-label fixed>Username</ion-label>
    <ion-input type="text" value=""></ion-input>
  </ion-item>

  <ion-item>
    <ion-label fixed>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

</ion-list>
Floating Labels 浮動標籤
浮動標籤是在選擇輸入時動畫或“浮動”的標籤。將該floating屬性添加到ion-label要使用的。

在右側的示例中輸入文本以查看正在使用的浮動標籤。

<ion-list>

  <ion-item>
    <ion-label floating>Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

</ion-list>
Inline Labels 行內標籤
一個ion-label沒有任何屬性是一個內聯標籤。輸入文字時，標籤不會隱藏。佔位符文本可以與內聯標籤結合使用。

<ion-list>

  <ion-item>
    <ion-label>Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

</ion-list>

<div padding>
  <button block>Sign In</button>
</div>
Inset Labels 插入標籤
默認情況下，每個輸入項將填充其父元素的寬度的100％。通過將inset屬性添加到ion-list組件來使輸入插入。

<ion-list inset>

  <ion-item>
    <ion-label>Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

</ion-list>
Placeholder Labels 佔位符標籤
將該placeholder屬性添加到<input>元素以模擬輸入的標籤。當輸入文本時，佔位符標籤被隱藏。

<ion-list>

  <ion-item>
    <ion-input type="text" placeholder="Username"></ion-input>
  </ion-item>

  <ion-item>
    <ion-input type="password" placeholder="Password"></ion-input>
  </ion-item>

</ion-list>
Stacked Labels 堆積的標籤
堆疊標籤將始終顯示在輸入頂部。將該stacked屬性添加到ion-label要使用的。佔位符文本可以與堆疊標籤結合使用。

<ion-list>

  <ion-item>
    <ion-label stacked>Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label stacked>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

</ion-list>

Lists 清單列表

列表用於顯示信息行，例如聯繫人列表，播放列表或菜單。或者，也許有些瘋狂，我們甚至不知道存在！

Basic Lists 基本列表
默認情況下，所有列表將使用分隔線進行樣式化：

<ion-list>
  <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
    {{ item }}
  </button>  
</ion-list>
沒有線
演示源
添加no-lines屬性將隱藏列表項之間的分隔符：

<ion-list no-lines>
  <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
    {{ item }}
  </button> 
</ion-list>
Inset List 插入列表
列表默認情況下沒有外部保證金。要添加一個，請將該inset屬性添加到ion-list組件。

<ion-list inset>
  <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
    {{ item }}
  </button> 
</ion-list>
List Dividers 列表分割線
分組的項目，<ion-item-group>而不是<ion-list>。使用<ion-item-divider>組件將組分成多個部分：

<ion-content>
  <ion-item-group>
    <ion-item-divider color="light">A</ion-item-divider>
    <ion-item>Angola</ion-item>
    <ion-item>Argentina</ion-item>
  </ion-item-group>
</ion-content>
List Headers 列表頭
每個列表可以在列表頂部包含一個標題：

<ion-list>
  <ion-list-header>
    Action
  </ion-list-header>
  <ion-item>Terminator II</ion-item>
  <ion-item>The Empire Strikes Back</ion-item>
  <ion-item>Blade Runner</ion-item>
</ion-list>
Icon List 圖標列表
將圖標添加到列表項是提示每個項目內容的好方法。圖標的位置可以使用item-left和item-right屬性來設置。圖標的大小默認爲small，並且可以使用該large屬性使其更大。

<ion-list>
  <ion-item>
    <ion-icon name="leaf" item-start></ion-icon>
      Herbology
    <ion-icon name="rose" item-end></ion-icon>
  </ion-item>
</ion-list>
Avatar List 頭像列表
項目頭像顯示大於圖標的圖像，但小於縮略圖。要使用化身，請<ion-avatar>在項目內添加組件。頭像的位置可以使用item-left和item-right屬性來設置：

<ion-list>
  <ion-item>
    <ion-avatar item-start>
      <img src="img/avatar-cher.png">
    </ion-avatar>
    <h2>Cher</h2>
    <p>Ugh. As if.</p>
  </ion-item>
</ion-list>
Multi-line List 多行列表
多行列表與常規列表相同，但項目有多行文本。當<ion-item>組件包含多個標題或段落元素時，它將自動擴展其高度以適應新的文本行。下面是三行文字的例子：

<ion-list>
  <ion-item>
    <ion-avatar item-start>
      <img src="img/avatar-finn.png">
    </ion-avatar>
    <h2>Finn</h2>
    <h3>Don't Know What To Do!</h3>
    <p>I've had a pretty messed up day. If we just...</p>
  </ion-item>
</ion-list>
Sliding List 滑動列表
滑動項目可以向左或向右滑動以顯示一組隱藏的按鈕。要使用滑動項目，請在ion-item-sliding組件內添加一個ion-list組件。接下來，<ion-item-options>在滑動項目內添加一個組件以包含按鈕。

有關更多信息，請查看API文檔。

<ion-list>
  <ion-item-sliding>
    <ion-item>
      <ion-avatar item-start>
        <img src="img/slimer.png">
      </ion-avatar>
      <h2>Slimer</h2>
    </ion-item>
    <ion-item-options side="left">
      <button ion-button color="primary">
        <ion-icon name="text"></ion-icon>
        Text
      </button>
      <button ion-button color="secondary">
        <ion-icon name="call"></ion-icon>
        Call
      </button>
    </ion-item-options>
    <ion-item-options side="right">
      <button ion-button color="primary">
        <ion-icon name="mail"></ion-icon>
        Email
      </button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>
Thumbnail List 縮略圖列表
項目縮略圖顯示佔據了項目整個高度的圖像。要使用縮略圖，請<ion-thumbnail>在項目內添加組件。縮略圖的位置可以使用item-left和item-right屬性進行設置：

<ion-list>
  <ion-item>
    <ion-thumbnail item-start>
      <img src="img/thumbnail-totoro.png">
    </ion-thumbnail>
    <h2>My Neighbor Totoro</h2>
    <p>Hayao Miyazaki • 1988</p>
    <button ion-button clear item-end>View</button>
  </ion-item>
</ion-list>

Loading 加載中

加載組件是一個覆蓋層，可以防止用戶在指示活動時進行交互。默認情況下，它會根據模式顯示一個微調框。動態內容可以通過微調器顯示。微調器可以隱藏或定製使用幾個預定義的選項。即使在導航過程中，加載指示符也顯示在其他內容的頂部。

import { LoadingController } from 'ionic-angular';

export class MyPage {
  constructor(public loadingCtrl: LoadingController) {
  }

  presentLoading() {
    let loader = this.loadingCtrl.create({
      content: "Please wait...",
      duration: 3000
    });
    loader.present();
  }
}

菜單是可以拖出或切換顯示的側面菜單導航。當菜單關閉時，菜單的內容將被隱藏。

菜單基於平臺適應適當的風格。

<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，通常用於登錄或註冊頁面，消息組成和選項選擇。

import { ModalController } from 'ionic-angular';
import { ModalPage } from './modal-page';

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

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

導航是用戶在應用程序的不同頁面之間移動的方式。Ionic的導航遵循標準的原生導航概念，就像iOS中的導航概念一樣。爲了實現類似本機的導航，我們已經構建了一些新的導航組件，這對於習慣於傳統桌面瀏覽器導航的開發者來說可能感覺不同。

有幾種方法可以在整個Ionic應用程序中導航：

基本導航
演示源
導航是通過<ion-nav>組件來處理的，這個組件作爲一個簡單的堆棧來工作，新的頁面被壓入和彈出，對應着歷史上的前進和後退。

我們從加載導航組件的根頁面開始：

import {StartPage} from 'start'

@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>'
})
class MyApp {
  // First page to push onto the stack
  rootPage = StartPage;
}
接下來，我們可以通過將導航控制器注入到任何頁面中來訪問導航到的每個頁面中的導航控制器。請注意，頁面組件不需要選擇器。離子自動添加這些。

@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) {
  }
}
要從一個頁面導航到另一個頁面，只需將新頁面推入或彈出到堆棧中即可：

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

  <ion-content>
    <button (click)="goToOtherPage()">
      Go to OtherPage
    </button>
  </ion-content>`
})
export class StartPage {
  constructor(public navCtrl: NavController) {}

  goToOtherPage() {
    //push another page onto the history stack
    //causing the nav controller to animate the new page in
    this.navCtrl.push(OtherPage);
  }
}

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

  <ion-content>I'm the other page!</ion-content>`
})
class OtherPage {}
如果你的頁面有一個<ion-navbar>，如果它不是一個根頁面，一個後退按鈕將被自動地添加到它，並且導航欄的標題將被更新。

另外，如果你想回去，但沒有NavBar，你可以從堆棧中彈出當前頁面：

@Component({
  template: `
  <ion-content>
    <button (click)="goBack()">
      There's no place like home
    </button>
  </ion-content>`
})
class OtherPage {
  constructor(public navCtrl: NavController) {}

  goBack() {
    this.navCtrl.pop();
  }
}
有關基本導航的更多信息，請查看Nav API參考。

從根組件導航
如果你想控制你的根應用程序組件導航？您無法注入，NavController因爲導航控制器的任何組件都是根組件的子項，所以它們不能被注入。

通過添加一個引用變量ion-nav，你可以@ViewChild用來獲取Nav組件的一個實例，這是一個導航控制器（它的擴展NavController）：

@Component({
  template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
})
export class MyApp {
  @ViewChild('myNav') nav
  rootPage = TabsPage;

  // Wait for the components in MyApp's template to be initialized
  // In this case, we are waiting for the Nav identified by
  // the template reference variable #myNav
  ngAfterViewInit() {
    // Let's navigate from TabsPage to Page1
    this.nav.push(LoginPage);
  }
}
選項卡式導航
導航可以嵌套在複雜組件（如Tabs）中使用。與傳統的路由系統不同，Ionic的導航功能可以輕鬆地從應用中的任何位置導航到給定的頁面，而無需指定特定的路由。以iOS上的App Store應用程序爲例，我們可以輕鬆導航到AppDetailPage，該AppDetailPage顯示有關特定應用程序的信息（可以自己試試看！）。看看Tabs文檔，瞭解如何輕鬆實現這一點的更多信息。

Popover

類似於app右上角的轉發分享。
Popover是一個浮動在應用程序內容上方的視圖。Popovers提供了一種簡單的方式來呈現或收集用戶的信息，通常在以下情況下使用：

  • 顯示有關當前視圖的更多信息
  • 選擇一個常用的工具或配置
  • 在您的某個視圖中提供要執行的操作列表
import { PopoverController } from 'ionic-angular';
import { MyPopOverPage } from './my-pop-over';

export class MyPage {
  constructor(public popoverCtrl: PopoverController) {
  }

  presentPopover() {
    let popover = this.popoverCtrl.create(MyPopOverPage);
    popover.present();
  }
}

Radio 收音機

像複選框一樣，收音機是一個保存布爾值的輸入組件。在引擎蓋下，收音機與HTML無線電輸入沒有區別。但是，像其他Ionic組件一樣，每個平臺上的收音機的樣式都是不同的。與複選框不同，無線電組件組成一個組，一次只能選擇一個無線電。使用該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-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>

Searchbar 搜索欄

搜索欄綁定到模型，並在模型更改時發出輸入事件。

<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list>
  <ion-item *ngFor="let item of items">
    {{ item }}
  </ion-item>
</ion-list>
請注意，在此示例中，getItems()當輸入發生更改時會調用該函數，從而更新顯示的城市。雖然此示例基於搜索輸入過濾列表，但Searchbar可以用於許多不同的場景：

@Component({
  templateUrl: 'search/template.html',
})
class SearchPage {

  searchQuery: string = '';
  items: string[];

  constructor() {
    this.initializeItems();
  }

  initializeItems() {
    this.items = [
      'Amsterdam',
      'Bogota',
      ...
    ];
  }

  getItems(ev: any) {
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the searchbar
    let val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.items = this.items.filter((item) => {
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }
}

Segment 段

段是按行顯示的按鈕的集合。它們可以充當過濾器，根據分段值顯示/隱藏元素。

<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="img/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="img/thumbnail-kitten-1.jpg">
      </ion-thumbnail>
      <h2>Luna</h2>
    </ion-item>
    ...
  </ion-list>
</div>

Select 選擇

該ion-select組件類似於HTML 元素，但是，Ionic的select組件使用戶更容易排序並選擇首選選項。當用戶點擊選擇組件時，會出現一個對話框，其中的所有選項都顯示在一個大的，易於選擇的列表中。

<ion-list>
  <ion-item>
    <ion-label>Gaming</ion-label>
    <ion-select [(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-select>通過添加multiple="true"到組件來進行多項選擇。

<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>

Slides 幻燈片

幻燈片可以輕鬆創建畫廊，教程和基於頁面的佈局。幻燈片在組件上採取了許多配置選項。

<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>

Tabs 標籤

選項卡使用選項卡欄和一組可以選項卡的視圖來支持多選項卡界面。

Text Tabs 文本標籤
要初始化選項卡，請使用每個選項卡<ion-tabs>的子<ion-tab>選項：

import { Component } from '@angular/core';
import { ionicBootstrap } from 'ionic-angular';
import { Tab1 } from './tab1-page';
import { Tab2 } from './tab2-page';
@Component({
  template: `
    <ion-tabs>
      <ion-tab tabIcon="heart" [root]="tab1"></ion-tab>
      <ion-tab tabIcon="star" [root]="tab2"></ion-tab>
    </ion-tabs>`
})
class MyApp {

  tab1: any;
  tab2: any;

  constructor() {
    this.tab1 = Tab1;
    this.tab2 = Tab2;
  }
}
個別標籤只是 @Components

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

@Component({
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>Heart</ion-title>
    </ion-navbar>
  </ion-header>
  <ion-content>Tab 1</ion-content>`
})
export class Tab1 {}

@Component({
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>Star</ion-title>
    </ion-navbar>
  </ion-header>
  <ion-content>Tab 2</ion-content>`
})
export class Tab2 {}
請注意，每個<ion-tab>綁定到一個[root]屬性，就像<ion-nav>在上面的導航部分。那是因爲每個<ion-tab>實際上只是一個導航控制器。這意味着每個選項卡都有自己的歷史堆棧，並且每個選項卡的NavController instances injected子@Components選項對每個選項卡都是唯一的：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
...
})
class Tab1 {
  constructor(public navCtrl: NavController) {
    // Id is 1, nav refers to Tab1
    console.log(this.nav.id)
  }
}

@Component({
...
})
class Tab2 {
  constructor(public navCtrl: NavController) {
    // Id is 2, nav refers to Tab2
    console.log(this.nav.id)
  }
}
Icon Tabs 圖標選項卡
要在選項卡內添加圖標，請使用該tab-icon屬性。這個屬性可以傳遞任何圖標的名字：

@Component({
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>Tabs</ion-title>
    </ion-navbar>
  </ion-header>
  <ion-content></ion-content>
  `
})
class TabContentPage {
  constructor() {}
}

@Component({
  template: `
  <ion-tabs>
    <ion-tab tabIcon="contact" [root]="tab1"></ion-tab>
    <ion-tab tabIcon="compass" [root]="tab2"></ion-tab>
    <ion-tab tabIcon="analytics" [root]="tab3"></ion-tab>
    <ion-tab tabIcon="settings" [root]="tab4"></ion-tab>
  </ion-tabs>`
})
export class TabsIconPage {
  constructor() {
    this.tab1 = TabContentPage;
    this.tab2 = TabContentPage;
    ...
  }
}
Text and Icon Tabs 文本和圖標選項卡
要在選項卡內添加文本和圖標，請使用tab-icon和tab-title屬性：

@Component({
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>Tabs</ion-title>
    </ion-navbar>
  </ion-header>
  <ion-content></ion-content>
  `
})
class TabsTextContentPage {
  constructor() {}
}

@Component({
  template: `
  <ion-tabs>
    <ion-tab tabIcon="water" tabTitle="Water" [root]="tab1"></ion-tab>
    <ion-tab tabIcon="leaf" tabTitle="Life" [root]="tab2"></ion-tab>
    <ion-tab tabIcon="flame" tabTitle="Fire" [root]="tab3"></ion-tab>
    <ion-tab tabIcon="magnet" tabTitle="Force" [root]="tab4"></ion-tab>
  </ion-tabs>`
})
export class TabsTextPage {
  constructor() {
    this.tab1 = TabsTextContentPage;
    this.tab2 = TabsTextContentPage;
    ...
  }
}
Badge Tabs 徽章標籤
要將徽章添加到選項卡，請使用tabBadge和tabBadgeStyle屬性。該tabBadgeStyle屬性可以傳遞任何顏色的名稱：

@Component({
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>Tabs</ion-title>
    </ion-navbar>
  </ion-header>
  <ion-content></ion-content>
  `
})
class TabBadgePage {
  constructor() {}
}

@Component({
  template: `
    <ion-tabs>
      <ion-tab tabIcon="call" [root]="tabOne" tabBadge="3" tabBadgeStyle="danger"></ion-tab>
      <ion-tab tabIcon="chatbubbles" [root]="tabTwo" tabBadge="14" tabBadgeStyle="danger"></ion-tab>
      <ion-tab tabIcon="musical-notes" [root]="tabThree"></ion-tab>
    </ion-tabs>
    `
})
export class BadgesPage {
  constructor() {
    this.tabOne = TabBadgePage;
    this.tabTwo = TabBadgePage;
  }
}

Toast 吐司

吐司是一個微妙的通知，出現在應用程序的內容之上。通常情況下，吐司顯示一段時間，然後自動解僱。

import { ToastController } from 'ionic-angular';

export class MyPage {
  constructor(public toastCtrl: ToastController) {
  }

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

Toggle 切換

toggle是一個保存布爾值的輸入組件。與複選框類似，切換通常用於允許用戶打開或關閉設置。屬性，如value，disabled以及checked可應用於切換來控制其行爲。

<ion-item>
  <ion-label> Sam</ion-label>
  <ion-toggle disabled checked="false"></ion-toggle>
</ion-item>

Toolbar 工具條

工具欄是一個通用欄，可以在應用程序中用作頁眉，子頁眉，頁腳甚至子頁腳。由於ion-toolbar基於flexbox，無論您的頁面中有多少個工具欄，它們都會正確顯示，並ion-content會相應地進行調整。

注意：通常在與導航結合使用的時候使用NavBarion-header。

Basic Usage 基本用法
<ion-header>
  <ion-toolbar>
    <ion-title>Toolbar</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content></ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>
頭
工具欄的最佳用途之一是作爲標題。

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons start>
      <button ion-button icon-only>
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>

    <ion-title>Header</ion-title>

    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>

  </ion-toolbar>
</ion-header>

<ion-content>
  <p>There is a header above me!</p>
</ion-content>
Changing the Color 改變顏色
您可以通過更改元素的屬性來更改工具欄的顏色。


@Component({
  template: `
    <ion-toolbar color="primary">
      <ion-title>Toolbar</ion-title>
    </ion-toolbar>


    <ion-toolbar color="secondary">
      <ion-title>Toolbar</ion-title>
    </ion-toolbar>

    <ion-toolbar color="danger">
      <ion-title>Toolbar</ion-title>
    </ion-toolbar>


    <ion-toolbar color="dark">
      <ion-title>Toolbar</ion-title>
    </ion-toolbar>
  `
  })

您也可以用相同的方法更改導航欄的顏色。這將允許你在你的應用程序中每個頁面有一個不同的顏色導航條。

<ion-header>
  <ion-navbar color="dark">
    <ion-title>Dark</ion-title>
  </ion-navbar>
</ion-header>


<ion-header>
  <ion-navbar color="danger">
    <ion-title>Danger</ion-title>
  </ion-navbar>
</ion-header>

<ion-header>
  <ion-navbar color="secondary">
    <ion-title>Secondary</ion-title>
  </ion-navbar>
</ion-header>
Buttons in Toolbars 工具欄中的按鈕
按鈕可以添加到頁眉和頁腳工具欄。要將按鈕添加到工具欄，我們需要先添加一個ion-buttons組件。這個組件包裝一個或多個按鈕，並且可以給出start或end屬性來控制它包含的按鈕的位置：

<ion-header>
  <ion-toolbar>
    <ion-buttons start>
      <button ion-button icon-only color="royal">
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Send To...</ion-title>
    <ion-buttons end>
      <button ion-button icon-only color="royal">
        <ion-icon name="person-add"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content></ion-content>

<ion-footer>
  <ion-toolbar>
    <p>Ash, Misty, Brock</p>
    <ion-buttons end>
      <button ion-button icon-right color="royal">
        Send
        <ion-icon name="send"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>
Segment in Toolbars 段中的工具欄
段是允許用戶在不同的數據集之間切換的好方法。使用以下標記將一個段添加到工具欄中：

<ion-header>
  <ion-toolbar>
    <ion-buttons start>
      <button ion-button icon-only>
        <ion-icon name="create"></ion-icon>
      </button>
    </ion-buttons>
    <ion-segment>
      <ion-segment-button value="new">
        New
      </ion-segment-button>
      <ion-segment-button value="hot">
        Hot
      </ion-segment-button>
    </ion-segment>
    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
Searchbar in Toolbars 搜索欄在工具欄中
另一個常見的設計範例是在您的工具欄中包含一個搜索欄。

<ion-header>
  <ion-toolbar color="primary">
    <ion-searchbar (input)="getItems($event)"></ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of items">
      {{ item }}
    </ion-item>
  </ion-list>
</ion-content>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

芯片產業管理和營銷指北（3）—— 贏得客戶

注意：本文是依據 俞志宏 老師的 《我在硅谷管芯片：芯片產品線經理生存指南》 一書閱讀後歸納總結得到。可以試做此書的讀後感，對芯片產業感興趣的同僚強烈推薦此書 爲什麼要見客戶 和客戶面對面主要是獲取與客戶相關的各類信息，包含但不限於： 市

zer0black 2024-06-09 14:34:09

【stars-one】 星念輕小說下載器

原文: 【stars-one】星念輕小說下載器-Stars-One的雜貨小窩 一款將在線輕小說保存到本地的下載工具 軟件介紹 小說單卷下載 小說全卷下載(需VIP) 多線程解析和下載 下載導出爲epub文件 自動更新 軟件使用前需要進行

Stars-one 2024-06-09 14:22:28

shell編程相關的

  shell腳本獲取腳本所在目錄 執行腳本的父目錄不一定是當前的工作目錄。 url=$(dirname $(readlink -f $0))

馬昌偉 2024-06-09 14:16:47

kvm鏈接克隆虛擬機遷移到openstack機器的實驗

  總結 如果是完整克隆的那種虛擬機，是可以直接在openstack使用的，如果鏡像格式沒問題的話。   因爲kvm虛擬機大部分都是鏈接克隆出來的鏡像，不可用直接複製使用，所以需要創建新的鏡像文件   創建空盤：qemu-img creat

馬昌偉 2024-06-09 14:16:47

【Python】DQN處理CartPole-v1

DQN是強化學習中的一種方法，是對Q-Learning的擴展。 通過引入深度神經網絡、經驗回放和目標網絡等技術，使得Q-Learning算法能夠在高維、連續的狀態空間中應用，解決了傳統Q-Learning方法在這些場景下的侷限性。 Q-Le

Dsp Tian 2024-06-09 14:14:07

P1355 神祕大三角（凸包）

P1355 神祕大三角 - 洛谷 | 計算機科學教育新生態 (luogu.com.cn) 隊友推薦的，算是入門凸包，就是用叉積判斷一下點是否相對每條邊都在凸包的邊的左側。 1 #include <bits/stdc++.h> 2

SnowLove 2024-06-09 14:13:17

前端使用 Konva 實現可視化設計器（13）- 折線 - 最優路徑應用【思路篇】

這一章把直線連接改爲折線連接，沿用原來連接點的關係信息。關於折線的計算，使用的是開源的 AStar 算法進行路徑規劃，啓發方式爲 曼哈頓距離，且不允許對角線移動。 請大家動動小手，給我一個免費的 Star 吧~ 大家如果發現了 Bug，歡

xachary 2024-06-09 14:10:57

生產計劃範圍的擴展 - 工單的拆分與合併

背景 　　在過往與不少合作伙伴們，就生產計劃項目方案的討論中，經常提及這樣的一種情況： “我們在編制生產計劃時，有些數量較大的訂單，需要拆分成多個子訂單，這樣才能利用多個資源並行加工，以縮短生產週期，提高資源利用率” - 我們稱爲【工單拆分

kentzhang 2024-06-09 14:09:57

APS系統設計經驗分享(時間推導II - 2023.09)

　　在前一篇關於APS系統設計分享文章(《APS系統設計經驗分享(時間推導 - 2023.03)》)中，我們提到將會分享使用OptaPlanner作爲規劃引擎開發APS系統過程中，遇到的一些時間相關的設計建議與異常情況分析。後來一直忙於項目

kentzhang 2024-06-09 14:09:57

排程過程中任務鎖定的外延與內涵

在生產排程過程中，除了可以藉助強大的算法，與優質的規劃模型對待排任務進行排產優化外，還會遇到一些需要人爲鎖定部分任務的情況。無論是APS系統開發人員，還是排產作業人員，在常見的認識中，對於“鎖定”概念的理解，第一反應就是把任務固定到某個資源

kentzhang 2024-06-09 14:09:57

排程系統中關於任務優先級的需求延伸與設計構思

無論是面向銷售訂單的MPS，還是基於多工序制約關係的APS，還是具體車間生產中針對單一工序的任務作業調度優化，都存在基於被排程對象(例如銷售訂單、生產工單、工序任務)的優先級進行優化的需求場景。當我們僅在宏觀、較高層次的角度考慮，任務優先級

kentzhang 2024-06-09 14:09:57

從零手寫實現 nginx-11-文件處理邏輯與 range 範圍查詢合併

前言 大家好，我是老馬。很高興遇到你。 我們爲 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的，可以參考我的另一個項目：

葉止水 2024-06-09 14:02:36

nginx快速分析日誌並找出攻擊IP

第一步：分析NGINX日誌 分析日誌主要目的是尋找那些異常活躍的IP地址，通過以下命令可以快速找出。  cat access.log | awk '{print$1}' |sort|uniq -c|sort -rn|head -10 命

xiaobingch 2024-06-09 13:59:16

Vue CLI 4與項目構建實戰指南

title: Vue CLI 4與項目構建實戰指南 date: 2024/6/9 updated: 2024/6/9 excerpt: 這篇文章介紹瞭如何使用Vue CLI優化項目構建配置，提高開發效率，涉及配置管理、項目部署策略、插件系

Mifen 2024-06-09 13:40:15

Vue第三方庫與插件實戰手冊

title: Vue第三方庫與插件實戰手冊 date: 2024/6/8 updated: 2024/6/8 excerpt: 這篇文章介紹瞭如何在Vue框架中實現數據的高效驗證與處理，以及如何集成ECharts、D3.js、Chart.

Mifen 2024-06-09 13:40:15