Ren's 搞玩日誌

0%

Ionic使用AdminLTE美化

發表於 分類於 Disqus：

「Ionic」真是個快速開發App的好東西，但如果想讓UI有特色一點真的是需要費很大的功夫，我本身前端設計能力又非常淺薄，這時就要想辦法靠套版來解決問題了。本篇文章選擇使用開源且免費的AdminLTE進行App美化實驗，最終希望能讓UI更豐富一點。

開發環境

本專案是還在開發中的App，功能大概是企業內部GPS打卡、提醒、查詢紀錄，這些功能理論上不影響本次實驗。

Ionic Info

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
cli packages:
    @ionic/cli-plugin-proxy : 1.4.13
    @ionic/cli-utils        : 1.13.1
    ionic (Ionic CLI)       : 3.13.2

global packages:
    cordova (Cordova CLI) : 7.0.1

local packages:
    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.1

System:
    Node : v6.9.1
    npm  : 3.10.8
    OS   : Windows 7

Misc:
    backend : legacy

AdminLTE

這裡使用版本2.4.2，共會用到兩個Css，分別是AdminLTE.min.css和_all-skins.min.css，將它們加入網頁參考，要特別注意的是AdminLTE是相依於Bootstrap的，但Ionic與Bootstrap會激烈衝突，所以在這裡不用Bootstrap。

1
2
<link href="assets/css/AdminLTE.min.css" rel="stylesheet">
<link href="assets/css/_all-skins.min.css" rel="stylesheet">

美化

美化時盡量使用Ionic Component取代AdminLTE元件，配色選擇為skin-blue。

1
<body class="skin-blue">
1
2
3
4
5
6
7
<ion-header>
    <header class="main-header navbar">
        <div class="logo">
            <ion-title>選單</ion-title>
        </div>
    </header>
</ion-header>
1
2
3
4
.main-header .logo {
    height: 44px;
    line-height: 44px;
}

修改結果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ion-list class="main-sidebar">
    <section class="sidebar">
        <ul class="sidebar-menu tree" data-widget="tree">
            <li class="header">MAIN NAVIGATION</li>
            <li tappable menuClose *ngFor="let p of pages" (tap)="openPage(p)" [ngClass]="p.active ? 'active' : 'treeview'">
                <a>
                    <ion-label item-end>
                        <ion-icon name="{{p.icon}}"></ion-icon>
                        {{p.title}}
                    </ion-label>
                </a>
            </li>
        </ul>
    </section>
</ion-list>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.main-sidebar {
    width: 100%;
    -webkit-transform: initial;
    transform: initial;
    padding-top: initial;
    position: initial;
    min-height: initial;
}

.menu-inner .list-ios, .menu-inner .list {
    margin: initial;
    min-height: 100%;
}

.menu-inner .label {
    font-size: 1.7rem;
}

修改結果

Timeline

https://adminlte.io/themes/AdminLTE/pages/UI/timeline.html

1
2
3
4
5
6
7
8
9
10
11
.timeline {
    margin: 0;
}

.timeline > li:last-child {
    margin-bottom: 0;
}

.timeline > li:last-child .timeline-footer {
    margin-bottom: 10px;
}

修改結果

Login

https://adminlte.io/themes/AdminLTE/pages/examples/login.html

1
2
3
4
5
6
7
8
9
10
11
12
13
.content {
    background: url('/img/login.jpg');
    background-repeat: round;
}
.login-page {
    background: initial;
}
.login-box-msg {
    color: white;
}
.login-box-body {
    background: initial;
}

修改結果

結語

過程中遇到很多Ionic與AdminLTE的Css衝突問題，目前只能遇到一個解一個，或許還有更好的套版方法？