4b31b5b3e3L5">5
|
- <ion-icon name="add-outline"></ion-icon>
|
|
6
|
|
- </ion-fab-button>
|
|
7
|
|
-
|
|
8
|
|
- </ion-fab>
|
|
9
|
|
-
|
|
10
|
|
- <ion-tab-bar slot="bottom">
|
|
11
|
|
- <ion-tab-button tab="tab1">
|
|
12
|
|
- <ion-icon name="home"></ion-icon>
|
|
13
|
|
- <ion-label>Tab 1</ion-label>
|
|
14
|
|
- </ion-tab-button>
|
|
15
|
|
-
|
|
16
|
|
- <ion-tab-button tab="tab2">
|
|
17
|
|
- <ion-icon name="ellipse"></ion-icon>
|
|
18
|
|
- <ion-label>Tab 2</ion-label>
|
|
19
|
|
- </ion-tab-button>
|
|
20
|
|
-
|
|
21
|
|
- <ion-tab-button tab="tab3">
|
|
22
|
|
- <ion-icon name="location"></ion-icon>
|
|
23
|
|
- <ion-label>Tab 3</ion-label>
|
|
24
|
|
- </ion-tab-button>
|
|
25
|
|
-
|
|
26
|
|
- <ion-tab-button tab="tab4">
|
|
27
|
|
- <ion-icon name="location"></ion-icon>
|
|
28
|
|
- <ion-label>Tab 4</ion-label>
|
|
29
|
|
- </ion-tab-button>
|
|
30
|
|
- </ion-tab-bar>
|
|
31
|
|
-</ion-tabs>
|
|
|
@@ -5,23 +5,20 @@
|
|
5
|
5
|
</ion-fab-button>
|
|
6
|
6
|
</ion-fab> -->
|
|
7
|
7
|
<ion-tab-bar slot="bottom">
|
|
8
|
|
- <ion-tab-button tab="home">
|
|
|
8
|
+ <ion-tab-button tab="home" layout="icon-top">
|
|
9
|
9
|
<ion-icon name="home"></ion-icon>
|
|
10
|
10
|
<ion-label>หน้าแรก</ion-label>
|
|
11
|
11
|
</ion-tab-button>
|
|
12
|
12
|
|
|
13
|
|
- <ion-tab-button tab="nearme">
|
|
14
|
|
- <ion-icon name="location"></ion-icon>
|
|
15
|
|
- <ion-label>ใกล้ฉัน</ion-label>
|
|
|
13
|
+ <ion-tab-button tab="nearme" layout="icon-top">
|
|
|
14
|
+ <ion-icon name="location" color="danger"></ion-icon>
|
|
|
15
|
+ <ion-label color="danger">ใกล้ฉัน</ion-label>
|
|
16
|
16
|
</ion-tab-button>
|
|
17
|
17
|
|
|
18
|
|
- <ion-tab-button tab="login">
|
|
|
18
|
+ <ion-tab-button tab="login" layout="icon-top">
|
|
19
|
19
|
<ion-icon name="person"></ion-icon>
|
|
20
|
20
|
<ion-label>ฉัน</ion-label>
|
|
21
|
21
|
</ion-tab-button>
|
|
22
|
|
- <ion-tab-button tab="register-form">
|
|
23
|
|
- <ion-icon name="person"></ion-icon>
|
|
24
|
|
- <ion-label>ลงทะเบียน</ion-label>
|
|
25
|
|
- </ion-tab-button>
|
|
|
22
|
+
|
|
26
|
23
|
</ion-tab-bar>
|
|
27
|
24
|
</ion-tabs>
|
|
|
@@ -1,4 +1,34 @@
|
|
1
|
1
|
ion-label {
|
|
2
|
2
|
font-family: "IBM Plex Sans Thai", sans-serif !important;
|
|
3
|
3
|
font-weight: 400;
|
|
4
|
|
-}
|
|
|
4
|
+}
|
|
|
5
|
+
|
|
|
6
|
+ion-tab-bar {
|
|
|
7
|
+ height: 70px;
|
|
|
8
|
+ }
|
|
|
9
|
+
|
|
|
10
|
+// ion-tab-bar {
|
|
|
11
|
+// bottom: 20px;
|
|
|
12
|
+// position: relative;
|
|
|
13
|
+// border-radius: 16px;
|
|
|
14
|
+// width: 92%;
|
|
|
15
|
+// margin: 0 auto;
|
|
|
16
|
+// }
|
|
|
17
|
+
|
|
|
18
|
+// ion-tab-button {
|
|
|
19
|
+// --color: var(--ion-color-medium);
|
|
|
20
|
+// --color-selected: var(--ion-color-primary);
|
|
|
21
|
+
|
|
|
22
|
+// &::before {
|
|
|
23
|
+// background-color: transparent;
|
|
|
24
|
+// display: block;
|
|
|
25
|
+// content: "";
|
|
|
26
|
+// margin: 0 auto;
|
|
|
27
|
+// width: 20px;
|
|
|
28
|
+// height: 2px;
|
|
|
29
|
+// }
|
|
|
30
|
+
|
|
|
31
|
+// &.tab-selected::before {
|
|
|
32
|
+// background-color: var(--ion-color-primary);
|
|
|
33
|
+// }
|
|
|
34
|
+// }
|
|
|
@@ -78,6 +78,14 @@
|
|
78
|
78
|
font-family: "IBM Plex Sans Thai", sans-serif !important;
|
|
79
|
79
|
}
|
|
80
|
80
|
|
|
|
81
|
+.hcs {
|
|
|
82
|
+ display: flex;
|
|
|
83
|
+ justify-content: center;
|
|
|
84
|
+ align-items: center;
|
|
|
85
|
+ padding-bottom: 5px;
|
|
|
86
|
+ padding-top: 5px;
|
|
|
87
|
+}
|
|
|
88
|
+
|
|
81
|
89
|
.new-background-color {
|
|
82
|
90
|
--background: rgb(103, 143, 221);
|
|
83
|
91
|
--background: -moz-linear-gradient(
|