From 11abc77e6278e885511e4ab723bad0462099f257 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Tue, 9 Jun 2020 10:29:00 +0530 Subject: [PATCH] Tabs UI --- src/app/app-routing.module.ts | 3 +- src/app/app.module.ts | 2 ++ src/app/tabs/tabs.component.html | 23 ++++++++++++-- src/app/tabs/tabs.component.scss | 53 ++++++++++++++++++++++++++++++++ src/assets/custom-icons/home.svg | 2 +- src/assets/custom-icons/more.svg | 50 ++++++++++++++++++++++++++++++ 6 files changed, 129 insertions(+), 4 deletions(-) create mode 100644 src/assets/custom-icons/more.svg diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index b2ea638..6e15217 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -6,7 +6,8 @@ import { TabsComponent } from './tabs/tabs.component'; const routes: Routes = [ { path: '', pathMatch: 'full', redirectTo: 'welcome' }, { component: WelcomeComponent, path: 'welcome' }, - { component: TabsComponent, path: 'tabs' } + { component: TabsComponent, path: 'tabs' }, + { component: TabsComponent, path: 'tabs/:subpage' } ]; @NgModule({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4dddf7e..f44a91c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,6 +1,7 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AngularSvgIconModule } from 'angular-svg-icon'; +import { HttpClientModule } from '@angular/common/http'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @@ -24,6 +25,7 @@ import { MoreComponent } from './tabs/more/more.component'; imports: [ BrowserModule, AppRoutingModule, + HttpClientModule, AngularSvgIconModule.forRoot() ], providers: [], diff --git a/src/app/tabs/tabs.component.html b/src/app/tabs/tabs.component.html index f467413..4360fbc 100644 --- a/src/app/tabs/tabs.component.html +++ b/src/app/tabs/tabs.component.html @@ -1,2 +1,21 @@ -

tabs works!

- +
+ + + + + +
diff --git a/src/app/tabs/tabs.component.scss b/src/app/tabs/tabs.component.scss index e69de29..4031e85 100644 --- a/src/app/tabs/tabs.component.scss +++ b/src/app/tabs/tabs.component.scss @@ -0,0 +1,53 @@ +.tabs { + display: flex; + width: 100%; + height: 60px; + align-items: stretch; + background-color: var(--black); + position: fixed; + left: 0; + bottom: 0; + z-index: 1; + padding: 0 5%; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + + button { + border: 0px; + width: calc(90vw / 5); + display: block; + background-color: transparent; + display: block; + text-align: center; + + &.mid-button { + height: calc(90vw / 5); + background-color: white; + border-radius: 50%; + position: relative; + transform: translateY(calc(-90vw / 13))scale(0.9); + box-shadow: 0px 0px 5px var(--black); + + .icon { + fill: var(--teal); + width: 25px; + height: 25px; + } + } + + span { + display: block; + margin-top: 5px; + color: white; + font-size: 10px; + } + } + + .icon { + margin: 0 auto; + display: block; + width: 15px; + height: 15px; + fill: white; + } +} diff --git a/src/assets/custom-icons/home.svg b/src/assets/custom-icons/home.svg index d6d4bbe..a3c56e3 100644 --- a/src/assets/custom-icons/home.svg +++ b/src/assets/custom-icons/home.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/assets/custom-icons/more.svg b/src/assets/custom-icons/more.svg new file mode 100644 index 0000000..d5532dc --- /dev/null +++ b/src/assets/custom-icons/more.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +