ionic3學習筆記

1.導航：怎麼運行的

要從一個頁面導航到另一個頁面，只需將新頁面推入或彈出到堆棧上即可：
（1）push()：導航到新頁面
（2）pop():倒退頁面

2.UI組件：

1.行動表：
（餓了麼點菜的菜單查看或者刪除）
import { ActionSheetController } from 'ionic-angular';
2.警報
警報只能用於快速操作，如密碼驗證，小型應用通知或快速選項。

 import { AlertController } from 'ionic-angular'

類型：
a.基本警報；
b.提示警報;(提示將被用於詢問用戶密碼)。
c.確認提醒：（刪除通訊錄）
d.無線電警報（確認警報）
e.複選框警報

3.徽章

向用戶傳達數值的小組件

<ion-badge item-end>260k</ion-badge>

4.鈕釦

就是按鈕，注意圖標按鈕可以只有圖標沒有文本

<!-- Only icon (no text) -->
<button ion-button icon-only>
  <ion-icon name="home"></ion-icon>
</button>

簡單按鈕，可以添加不同屬性進行加強: 如small/large、outline、full/block/clear/round/

<button ion-button color="secondary">Secondary</button>

5.牌

也稱爲卡片

6.約會時間

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>

7.晶圓廠

FAB（浮動動作按鈕）是標準材料設計組件。它們被塑造成一個代表一個促進行動的圓圈。按下時，可能會包含更多的相關操作。FABs的名字表示在固定位置上浮動內容。

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

tap，press，pan，swipe，rotate，和pinch事件

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

9.格

Ionic的網格系統基於flexbox，

網格系統由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>

10.圖標

<ion-icon name="heart"></ion-icon>

類型： a、active和inactive狀態 b.平臺特定圖標要指定要用於每個平臺的圖標，請使用**md和ios**屬性，並提供平臺特定的圖標名稱。

<ion-icon ios="logo-apple" md="logo-android"></ion-icon>

c.可變圖標要使用變量設置圖標：

<ion-icon [name]="myIcon"></ion-icon>

export class MyFirstPage {
  // use the home icon
  myIcon: string = "home";
}

11.輸入

表單中的每個輸入字段都有一個Control，一個綁定到該字段中的值的函數，並執行驗證。一個控制組是控件的集合。

控制組處理表單提交，並提供可用於確定整個表單是否有效的高級API。
類型：
a.固定內聯標籤

 <ion-label fixed>Username</ion-label>

b.浮動標籤floating
c.內聯標籤（沒有屬性值，輸入後也不會隱藏）
d.插入標籤（通過將inset屬性添加到父級ion-list組件來進行輸入插入）
e.佔位符標籤placeholder=“”
f.堆疊標籤stacked

12.清單（列表）

列表用於顯示信息行，例如聯繫人列表，播放列表或菜單

13.載入中

加載組件是一個覆蓋，可以防止用戶在指示活動時進行交互。默認情況下，它顯示基於模式的微調。

可以使用微調框傳遞和顯示動態內容。可以隱藏或定製微調框以使用多個預定義的選項。即使在導航期間，載入指示器也會顯示在其他內容的頂部

import { LoadingController } from 'ionic-angular';

14.菜單

菜單是可以拖出或切換顯示的側面菜單導航。

當菜單關閉時，菜單的內容將被隱藏。

15.情態動詞

模式在關閉屏幕上滑動以顯示臨時UI，通常用於登錄或註冊頁面，消息組合和選項選擇

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

16.導航

導航是用戶在應用中不同頁面之間移動的方式

類型：
a.基本導航

通過組件進行處理，該組件作爲一個簡單的堆棧，新的頁面被推到並彈出，對應於歷史上向前和向後移動。

@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>'
})

如果您的頁面有，則如果不是根頁面，則會自動添加後退按鈕，導航欄的標題將被更新;
但沒有一個NavBar，你可以彈出當前頁面的堆棧：

b.從根組件導航

通過添加一個引用變量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);
  }
}

c.標籤導航

導航可以嵌套在複雜組件（如Tabs）中

17.酥料餅

Popover是一個浮動在應用程序內容之上的視圖
常見情形：
（1）顯示有關當前視圖的更多信息
（2）選擇常用的工具或配置
（3）提供在您的一個視圖中執行的操作列表

import { PopoverController } from 'ionic-angular';
import { MyPopOverPage } from './my-pop-over';

18.無線電:radio-group

像複選框一樣，無線電是一個保存布爾值的輸入組件。在引擎蓋下，收音機與HTML無線電輸入沒有區別。

然而，像其他離子組件一樣，無線電在每個平臺上的風格不同。
與複選框不同，無線電組件組成一個組，每次只能選擇一個無線電。使用該checked屬性設置默認值，該disabled屬性可禁用用戶更改爲該值。

19.範圍

範圍是一個控件，允許用戶通過沿滑桿或軌道移動滑塊旋鈕從一系列值中進行選擇。

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

20.搜索欄

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

<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list>
  <ion-item *ngFor="let item of items">
    {{ item }}
  </ion-item>
</ion-list>

getItems()當輸入更改時調用該函數，該更新更新顯示的城市。雖然此示例基於搜索輸入過濾列表，但是可以在許多不同的場景中使用Searchbar：

21.分割：ion-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>

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

24.標籤

Tabs爲多標籤界面提供了一個Tab Bar和一組可以標籤化的視圖。

<ion-tabs>
      <ion-tab tabIcon="heart" [root]="tab1"></ion-tab>
      <ion-tab tabIcon="star" [root]="tab2"></ion-tab>
    </ion-tabs>

a.要初始化Tabs，請爲每個選項卡使用一個小孩

b.個別標籤只是 @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 {}

c.每個標籤都有自己的歷史堆棧，並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)
  }
}

25.圖標和文字

要在選項卡內添加文本和圖標，請使用tab-icon和tab-title屬性：

要在選項卡內添加圖標，請使用該tab-icon屬性。該屬性可以傳遞任何圖標的名稱:

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

每個都綁定到一個[root]屬性，就像上面的導航部分一樣。那是因爲每個都只是一個導航控制器

26.徽章

要向選項卡添加徽章，請使用tabBadge和tabBadgeStyle屬性。該tabBadgeStyle屬性可以傳遞任何顏色的名稱

<ion-tab tabIcon="call" [root]="tabOne" tabBadge="3" tabBadgeStyle="danger"></ion-tab>

27.烤麪包

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();
  }
}

28.切換

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

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

29.工具欄

工具欄是可以在應用程序中用作標題，子標題，頁腳或甚至子頁腳的通用欄。

由於ion-toolbar是基於flexbox，無論您的頁面中有多少工具欄，它們將被正確顯示，並ion-content相應地進行調整

a.基本用法

<ion-header>
  <ion-toolbar>
    <ion-title>Toolbar</ion-title>
  </ion-toolbar>
</ion-header>

b.改變顏色

c.工具欄中的按鈕

按鈕可以添加到頁眉和頁腳工具欄。要向工具欄添加按鈕，我們需要先添加一個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>

d.工具欄中的細分

分段是允許用戶在不同數據集之間切換的好方法。使用以下標記將段添加到工具欄

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

e.工具欄中的搜索欄

在工具欄中包含一個搜索欄。

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

ionic3學習筆記

SQL優化-20231016

echarts 地圖

elementUI模態框點擊頁面不刷新問題解決

VUE的優點

單頁面與多頁面優缺點

Vue.js 過濾器的基本使用（filter）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結