SushiWen's Blog: Ionic Framework 教學

承上一章

我們之前都是用 Ionic 預設的樣式，但是這樣大家做出來的 App 豈不是都長得一樣？
我們要怎麼修改樣式呢？我們來修改剛剛做好的大師兄頁面 baseball.html 。
那個按鈕我們不喜歡，修改一下按鈕顏色和邊框，順便修改裡面的文字，我們把它做好做滿。

首先我們先啟用 sass

$ ionic setup sass

然後修改 baseball.html 增加 button-full 和 homerun 類

...
<button ui-sref="app.surprise"
    class="button button-positive button-full homerun icon-left ion-ios-baseball-outline">
    打擊
</button>
...

我們想要把這個按鈕的文字做的又粗又大
首先編輯 scss/ionic.app.scss

...

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

.homerun {
  font-size: 30px;
  font-weight: 900;
}

然後我們想要把所有按鈕的邊框加的很厚，是所有的按鈕喔，不是只有畫面中這一個，還包含了以後我們建立的按鈕，所以我們直接修改 Ionic 預設的 css
修改 www/lib/ionic/scss/_variables.scss

...
$button-border-width:             5px !default;
...

lib裡面的東西理論上很少修改，所以沒有自動更新，修改完 lib 裡面的東西我們要手動重新啟動 ionic

# ctrl + c to stop ionic server
$ ionic serve

重新整理頁面後就可以看到修改的東西都實現了。

下一章手機測試

SushiWen's Blog