0%

Ionic使用AdminLTE美化

「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衝突問題,目前只能遇到一個解一個,或許還有更好的套版方法?