# (📖#1) ionic 3 官網

###### tags: `ionic3`

### * 全文提醒
此篇為[**ionic3官網**](https://ionicframework.com/docs/v3/)，要注意*ionic3*和*ionic4*的官網不同，所以提供的一些cordova或者是一些方法、寫法都會不同喔!要注意不要進錯網站了。
<span style="font-style: italic; font-weight: bold;">※PS:以下圖片畫面可能過小，可以放大解析度觀看喔!</span>

<h3 style="margin-top: 45px">* 進入主題</h3>

下圖為進入官網的畫面，發現中間有九宮格，這些是官網提供的一些程式碼、插件、Icons等等。
<div>
<img src="https://i.imgur.com/Y3LfBZP.png" style="height: 350px;"></img>
</div>

<br>

今天要稍微介紹的是<span style="font-weight: bold;text-decoration:underline;">UI components</span>、<span style="font-weight: bold;text-decoration:underline;">API</span>、<span style="font-weight: bold;text-decoration:underline;">ionic Native</span>。
<div >
<img src="https://i.imgur.com/CBR5wkF.png" style="height: 350px;"></img>
</div>

<br>

### * UI components
<div style="background-color: #dedcdc; padding: 8px 15px;list-style-position:inside; border-radius: 5px;margin-bottom: 10px">
<span style="font-size : 15px">
簡單說就是某種東西的<span style="font-weight: bold;text-decoration:underline;">基礎寫法</span>。
</span>
</div>

以下圖為例，將Basic Usage提供的程式碼寫在專案，就能完成一個checkbox。
<div>
<img src="https://i.imgur.com/lUFXQTP.png" style="height: 350px;"></img>
</div>

<br>

### * API
<div style="background-color: #dedcdc; padding: 8px 15px;list-style-position:inside; border-radius: 5px;margin-bottom: 10px">
<span style="font-size : 15px">
比較像是UI components的<span style="font-weight: bold;text-decoration:underline;">後續應用</span>。
</span>
</div>

如下圖，同舉checkbox為例，畫面中Advanced(進階用法)提供了當checkbox改變時(change)，會觸發某個function的示意圖。
內容也不只提供Advanced，還有Usage(基礎用法)、Properties(屬性)、Sass Variables(Sass相關)等等，依每個主題會有不同。
<div>
<img src="https://i.imgur.com/Craf92B.png" style="height: 350px;"></img>
</div>

<br>

### * ionic Native
<div style="background-color: #dedcdc; padding: 8px 15px;list-style-position:inside; border-radius: 5px;margin-bottom: 10px">
<span style="font-size : 15px">
我都稱這個為<span style="font-weight: bold;text-decoration:underline;">手機原生功能</span>。
</span>
<br>
<span style="font-size : 15px">
也稱<span style="font-weight: bold;text-decoration:underline;">手機內建功能</span>。
</span>
</div>

當我們應用程式需要使用到手機Native功能，例如相機、Email、導航等等，這裡就提供了<span style="font-weight: bold;text-decoration:underline;">Installation(插件指令)</span>讓我們可以安裝。
<div>
<img src="https://i.imgur.com/rAAHoLm.png" style="height: 350px;"></img>
</div>

<br>

並且後續的Supported platforms(平台支援)、Usage(用法)也有提供給我們。
<div>
<img src="https://i.imgur.com/aKZXvlR.png" style="height: 350px;"></img>
</div>

<br>

### * 結語
官網提供這些東西都很方便，我介紹的不是很詳盡，還是要透過自己去閱讀、瀏覽才能體會。
九宮格也有幾個沒有介紹，閒暇之餘也可以去看看唷~