Ionic - API

放在前面：ionic3中文api

1.操作表：ActionSheetController

2:格 
（1）垂直對齊：

a.通過向行row中添加不同的屬性，可以將所有列垂直對齊

align-items-start/align-items-center/align-items-center/

<ion-row align-items-start>
...
<ion-col>
      4 of 4 
    </ion-col>
  </ion-row>

• 1
• 2
• 3
• 4
• 5
• 6

b.通過將對齊屬性直接添加到列col，列也可以與其他列的方式不同 
align-self-start/align-self-center/align-self-end

<ion-row>
    <ion-col align-self-start>
      <div>
        1 of 4
      </div>
    </ion-col>
  </ion-row>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

（2）水平對齊： 
通過向行中添加不同的屬性，所有列可以在行內水平對齊 
justify-content-start/center/end/around/between

<ion-row justify-content-start>
    <ion-col col-3>
      1 of 2
    </ion-col>
    <ion-col col-3>
      2 of 2
    </ion-col>
  </ion-row>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

（3）自定義網格 
可以通過Sass變量修改網格列數及其填充數。 
$grid-columns：用於生成每個列的寬度（以百分比表示）。

grid−padding−width：用於對電網的填充，同時grid−padding−width：用於對電網的填充，同時grid-padding-widths允許特定斷點值寬度在跨越均勻劃分padding-left和 padding-right以及padding-top和padding-bottom網格和列

$grid-columns:               12 !default;

$grid-padding-width:         10px !default;

$grid-padding-widths: (
  xs: $grid-padding-width,
  sm: $grid-padding-width,
  md: $grid-padding-width,
  lg: $grid-padding-width,
  xl: $grid-padding-width
) !default;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

（4）網格層 
要自定義斷點及其值，請覆蓋 grid−breakpoints和grid−breakpoints和grid-max-widths

$grid-breakpoints: (
  sm: 0,
  md: 768px,
  lg: 1024px
);

$grid-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

3.觸覺：Haptic 
設備上的觸覺引擎交互

4.圖：ion-img 
一個頁面在可滾動區域內可能存在數百甚至數千個圖像 
注意：ion-img僅用於虛擬滾動內部使用

5.物品放置

屬性 描述 
item-start 
放置在所有其他元素的左側，在內部項目之外。如複選框 
item-end 
放在內部項目內部的所有其他元素的右側，在輸入包裝器之外。如無線電和切換

item-content 
放置ion-label在輸入包裝內的任何內部的右側。如Select， Input，TextArea，DateTime和 Range。

6.虛擬滾動：[virtualScroll] 
給該virtualScroll屬性的數據必須是一個數組。*virtualItem需要具有該屬性的項目模板virtualScrol；

記錄數組將傳遞給包含數據的虛擬滾動條來創建模板，爲每個記錄創建的模板（稱爲單元格）可以由項目，頁眉和頁腳組成：

基礎：

<ion-list [virtualScroll]="items">

  <ion-item *virtualItem="let item">
    {{ item }}
  </ion-item>

</ion-list>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

頁眉和頁腳 
部分頁眉和頁腳是可選的。它們可以從開發人員定義的函數動態創建；

自定義函數中的邏輯應該確定是否創建截面模板以及要提供給模板的數據。null如果不創建模板，則返回自定義函數。

<ion-list [virtualScroll]="items" [headerFn]="myHeaderFn">

  <ion-item-divider *virtualHeader="let header">
    Header: {{ header }}
  </ion-item-divider>

  <ion-item *virtualItem="let item">
    Item: {{ item }}
  </ion-item>

</ion-list>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

以下是每個記錄調用的自定義函數的示例。它通過單個記錄，記錄的索引號和整個記錄數組。在這個例子中，每20個記錄將插入一個標題。所以在第19到第20記錄之間，在39和40之間，等等，將創建一個將模板的數據來自函數返回的數據。

myHeaderFn(record, recordIndex, records) {
  if (recordIndex % 20 === 0) {
    return 'Header ' + recordIndex;
  }
  return null;
}

• 1
• 2
• 3
• 4
• 5
• 6

大概寬度和高度 
如果虛擬滾動中的項目的高度不接近40px的默認大小，則爲aboutItemHeight高度提供一個值非常重要。精確的像素完美大小不是必需的，但沒有估計，虛擬滾動將無法正確呈現。

虛擬滾動中的圖像 
HTTP請求，圖像解碼和圖像渲染可能會導致滾動滾動。爲了更好地控制圖像，Ionic提供 了管理HTTP請求和圖像渲染。當快速滾動項目時，知道什麼時候和什麼時候不提出請求，什麼時候何時不渲染圖像，並且只加載滾動後可以查看的圖像

建議在本機元素上使用該組件， 因爲當元素添加到DOM時，它會立即爲圖像文件發出HTTP請求。此外， 當用戶滾動時可以隨時呈現。但是，它 是受包含的ion-content，並且不快速滾動時呈現圖像：

<ion-list [virtualScroll]="items">

  <ion-item *virtualItem="let item">
    <ion-avatar item-start>
      <ion-img [src]="item.avatarUrl"></ion-img>
    </ion-avatar>
    {{ item.firstName }} {{ item.lastName }}
  </ion-item>

</ion-list>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

自定義組件 
如果在Virtual Scroll中使用自定義組件，最好將其包裝好， 

以確保組件正確呈現。由於每個定製組件的實現和內部結構可能會有很大的不同，因此在一個內部進行包裝

是確保維度正確測量的安全方法。

 

<ion-list [virtualScroll]="items">

  <div *virtualItem="let item">
    <my-custom-item [item]="item">
       {{ item }}
    </my-custom-item>
  </div>

</ion-list>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

虛擬滾動性能提示

1、使用Cordova部署到iOS時，強烈建議您使用 WKWebView插件

2、鎖定元素尺寸和位置：爲了虛擬滾動以有效地對每個項目進行大小和定位，每個虛擬項目中的每個元素都不會動態地更改其維度或位置，

確保大小和位置的最佳方式不會改變，建議每個虛擬項目通過CSS鎖定其大小

3.on-img圖像被加載，所以只有可視圖像被渲染，並且在滾動時有效地控制HTTP請求

4.設置近似寬度和高度 
我們可以給虛擬滾動一個近似的大小，因此允許虛擬滾動來決定應該創建多少個項目。

5、應使用更改數據集 virtualTrackBy

迭代器中的元素的身份可能會在數據沒有改變的情況下進行更改。這可能發生，例如，如果從RPC生成的迭代器到服務器，並且該RPC重新運行。即使“數據”沒有改變，第二個響應將產生具有不同身份的對象，而Ionic將會拆除整個DOM並重建它。這是一個昂貴的操作，如果可能的話應該避免。

6.高效的頁眉和頁腳功能 
每個虛擬項目必須保持非常高效，但是一種真正消除其性能的方法是在段頭和頁腳函數中執行任何DOM操作。對數據集中的每個記錄都調用這些函數，因此請確保它們具有性能。

7.視圖控制器：

import { ViewController } from 'ionic-angular';

• 1
• 2

8.活版印刷：[ion-text] 
排版組件是一個簡單的組件，可用於爲任何元素的文本顏色設置樣式

<h1 ion-text color="secondary">H1: The quick brown fox jumps over the lazy dog</h1>

• 1

9.工具欄：ion-toolbar

工具欄是位於內容上方或下方的通用欄。與導航欄不同，工具欄可以用作子標題。

當工具欄放置在一個或之內時，工具欄保持固定在其各自的位置。放在內部時 ，工具欄將滾動內容。 
工具欄中的按鈕 
放置在工具欄中的按鈕應放置在 元素的內部。一個例外是一個menuToggle按鈕。它不應放在元素的內部

頁眉/頁腳框陰影和邊框

陰影:md 
邊框:ios

兩個md箱陰影和ios邊界可以通過添加被去除no-border 屬性的元素。

10.切換：ion-toggle

11.微妙通知：ToastController 
可用於提供有關操作的反饋或顯示系統消息 
（1）創建： 
所有的toast選項都應該在create方法的第一個參數中傳遞：create(opts)。要顯示的消息應該在message屬性中傳遞。

該showCloseButton選項可以設置爲true，以便在吐司上顯示關閉按鈕。

（2）定位： 
默認顯示在底部，也可以顯示在視圖窗口的頂部、底部和中間。位置可以傳遞給Toast.create(opts)方法。 
（3）駁回： 
在特定時間之後，吐司可以通過傳遞毫秒數來duration在吐司選項中顯示，自動關閉。 
如果showCloseButton設置爲true，則關閉按鈕將關閉吐司。 
要在創建後關閉烤麪包片，請調用dismiss() Toast實例上的方法。 
該onDidDismiss功能可以在Toast被關閉之後調用來執行一個動作。

import { ToastController } from 'ionic-angular';

constructor(public toastCtrl: ToastController) { }

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

  toast.onDidDismiss(() => {
    console.log('Dismissed toast');
  });

  toast.present();
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

12.標題：ion-title

是設置Toolbar或的標題的組件Navbar

<ion-navbar>
    <ion-title>Main Header</ion-title>
  </ion-navbar>

  <ion-toolbar>
    <ion-title>Subheader</ion-title>
  </ion-toolbar>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

13.縮略圖：ion-thumbnail 
縮略圖可以放置在帶有item-start或item-end指令的項目的左側或右側。

14.標籤：ion-tabs 
abs組件，寫爲，是單個Tab組件的容器。每個人ion-tab 都是NavController的聲明組件 
(1).放置： 
可以使用組件tabsPlacement上的屬性或應用程序的配置來配置位置。有關可用值，請參閱下面的輸入屬性tabsPlacement。

（2）佈局： 
可以使用tabsLayout 屬性定義所有選項卡的佈局。如果單個選項卡具有標題和圖標，則默認情況下，圖標將顯示在標題的頂部。

設置標籤欄的位置：top，bottom。

所有標籤頁可以通過設定的值被改變tabsLayout了的元素，或在您的應用程序的配置。例如，如果要僅在Android上顯示標題的標籤，但顯示圖標和iOS的標題，這很有用。有關 可用值，請參閱下面的輸入屬性tabsLayout。 
設置的TabBar佈局：icon-top，icon-start，icon-end，icon-bottom，icon-hide，title-hide。

（3）、可以通過不同的方式從標籤組件中選擇特定的選項卡。您可以使用該selectedIndex屬性來設置元素上的索引，也可以 在創建後select()從Tabs實例調用

<ion-tabs selectedIndex="2">
  <ion-tab [root]="tab1Root"></ion-tab>
  <ion-tab [root]="tab2Root"></ion-tab>
  <ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>

• 1
• 2
• 3
• 4
• 5

（4）也可以抓取Tabs實例並調用該select() 方法。這要求元素有一個id。例如，將值設置id爲myTabs：

<ion-tabs #myTabs>
  <ion-tab [root]="tab1Root"></ion-tab>
  <ion-tab [root]="tab2Root"></ion-tab>
  <ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>

• 1
• 2
• 3
• 4
• 5

然後在你的類中，你可以抓住Tabs實例並調用select()，傳遞選項卡的索引作爲參數。在這裏，我們通過使用ViewChild來抓取標籤。

export class TabsPage {

@ViewChild('myTabs') tabRef: Tabs;

ionViewDidEnter() {
  this.tabRef.select(2);
 }

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

（5）還可以通過select()使用NavController實例調用父視圖從子組件切換選項卡。例如，假設您有一個TabsPage組件，您可以從任何子組件調用以下內容切換到TabsRoot3：

switchTabs() {
  this.navCtrl.parent.select(2);
}

• 1
• 2
• 3

16.標籤：單個ion-tab

寫入的Tab組件基於模式進行樣式化，並應與Tabs組件結合使用。

每個ion-tab都是NavController的聲明組件。基本上，每個標籤都是NavController。

root：屬性是要爲該選項卡加載的頁面， 
tabTitle：是可在選項卡上顯示的可選文本， 
tabIcon：也是可選圖標

<ion-tabs>
 <ion-tab [root]="chatRoot" tabTitle="Chat" tabIcon="chat"></ion-tab>
</ion-tabs>

• 1
• 2
• 3

然後，（1）在你的班級你可以設置chatRoot一個導入的類：

import { ChatPage } from '../chat/chat';

export class Tabs {
  // here we'll set the property of chatRoot to
  // the imported class of ChatPage
  chatRoot = ChatPage;

  constructor() {

  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

（2）或者將一些參數傳遞到選項卡的根頁面 rootParams。下面我們chatParams轉到“聊天”選項卡 
a.

<ion-tabs>
 <ion-tab [root]="chatRoot" [rootParams]="chatParams" tabTitle="Chat" tabIcon="chat"></ion-tab>
</ion-tabs>

• 1
• 2
• 3

b.

export class Tabs {
  chatRoot = ChatPage;

  // set some user information on chatParams
  chatParams = {
    user1: 'admin',
    user2: 'ionic'
  };

  constructor() {

  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

c.而在ChatPage你可以從數據NavParams：

export class ChatPage {
  constructor(navParams: NavParams) {
    console.log('Passed params', navParams.data);
  }
}

• 1
• 2
• 3
• 4
• 5

(ionSelect)當選擇選項卡時，可以使用該事件調用類中的方法。以下是從其中一個選項卡顯示模態的示例。

<ion-tabs>
  <ion-tab (ionSelect)="chat()" tabTitle="Show Modal"></ion-tab>
</ion-tabs>pop

• 1
• 2
• 3

export class Tabs {
  constructor(public modalCtrl: ModalController) {

  }

  chat() {
    let modal = this.modalCtrl.create(ChatPage);
    modal.present();
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

17.splitpane 
是一個可以創建多視圖佈局的組件。與iPad應用程序類似，SplitPane允許在視口增加時顯示UI元素（如菜單）

如果設備屏幕尺寸低於一定大小，SplitPane會崩潰，菜單將再次隱藏。這在創建通過瀏覽器投放或通過應用商店部署到手機和平板電腦的應用程序時尤其有用。

使用SplitPane，只需將組件添加到您的根組件周圍

<ion-split-pane>
  <!--  our side menu  -->
  <ion-menu [content]="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
  </ion-menu>

  <!-- the main content -->
  <ion-nav [root]="root" main #content></ion-nav>
</ion-split-pane>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

設置斷點: 
默認情況下，當屏幕大於768px時，SplitPane將會展開。如果要自定義，請使用when輸入。該when輸入可以接受任何有效的媒體查詢，因爲它使用matchMedia()的下面。

<ion-split-pane when="(min-width: 475px)">

  <!--  our side menu  -->
  <ion-menu [content]="content">
  ....
  </ion-menu>

  <!-- the main content -->
  <ion-nav [root]="root" main #content></ion-nav>
</ion-split-pane>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

SplitPane將使用main屬性查找元素，並使其成爲較大屏幕上的中心組件。該main組分可以是任何離子組分（ion-nav或ion-tabs除了）ion-menu。

18.微調：ion-spinner

該ion-spinner組件提供各種動畫SVG旋轉器。

旋轉器使您能夠向用戶反饋，該應用程序正在積極處理/思考/等待/冷靜，或者您希望的任何內容。默認情況下，該ion-refresher功能使用此微調組件，而刷新器處於該refreshing狀態。

通過設置name屬性，您可以指定要使用的預定義旋轉器，無論平臺是什麼。

name的值可以取： 
ios 
ios-small 
bubbles 
circles 
crescent 月牙 
dots

<ion-spinner name="bubbles"></ion-spinner>

• 1

用CSS樣式化SVG： 
SVG使用術語stroke，而不是border和，fill而不是background-color。

ion-spinner * {
  width: 28px;
  height: 28px;
  stroke: #444;
  fill: #222;
}

• 1
• 2
• 3
• 4
• 5
• 6

 

轉載鏈接：https://blog.csdn.net/kassiaaaa/article/details/78344534