-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7f7962e
commit 770b06d
Showing
7 changed files
with
222 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
38 changes: 38 additions & 0 deletions
38
src/app/layouts/tabbar/tabbar-style/tabbar-style.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| <igx-bottom-nav> | ||
| <igx-tab-panel icon="phone"> | ||
| <igx-list class="tab-content"> | ||
| <igx-list-item [isHeader]="true">History</igx-list-item> | ||
| <igx-list-item igxRipple="pink" igxRippleTarget=".igx-list__item-content" *ngFor="let contact of contactsList"> | ||
| <div class="item"> | ||
| <igx-avatar [src]="contact.avatar" roundShape="true"></igx-avatar> | ||
| <div class="person"> | ||
| <p class="name">{{contact.text}}</p> | ||
| <span class="phone">{{contact.phone}}</span> | ||
| </div> | ||
| <igx-icon>phone</igx-icon> | ||
| </div> | ||
| </igx-list-item> | ||
| </igx-list> | ||
| </igx-tab-panel> | ||
| <igx-tab-panel icon="supervisor_account"> | ||
| <div class="tab-content"> | ||
| <h3>Tab 2 Content</h3> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius sapien ligula. Donec | ||
| consectetur accumsan suscipit. Praesent rutrum tellus blandit bibendum cursus. Vestibulum | ||
| urna arcu, bibendum nec molestie ac, varius congue massa. Mauris porttitor viverra lacus. | ||
| </p> | ||
| </div> | ||
| </igx-tab-panel> | ||
| <igx-tab-panel icon="format_list_bulleted"> | ||
| <div class="tab-content"> | ||
| <h3>Tab 3 Content</h3> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius sapien ligula. Donec | ||
| consectetur accumsan suscipit. Praesent rutrum tellus blandit bibendum cursus. Vestibulum | ||
| urna arcu, bibendum nec molestie ac, varius congue massa. Mauris porttitor viverra lacus. | ||
| Donec efficitur purus id urna dapibus, vitae pharetra orci pellentesque. Vestibulum id lacus | ||
| a magna euismod volutpat id in mi. Etiam a nunc ut tellus dictum porta. Donec in ligula a | ||
| arcu sollicitudin finibus. Vivamus id lorem pulvinar, accumsan justo vitae, vehicula diam. | ||
| Mauris vel quam at velit venenatis vulputate in quis nisl.</p> | ||
| </div> | ||
| </igx-tab-panel> | ||
| </igx-bottom-nav> |
86 changes: 86 additions & 0 deletions
86
src/app/layouts/tabbar/tabbar-style/tabbar-style.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| @import '~igniteui-angular/lib/core/styles/themes/index'; | ||
|
|
||
| /*BASIC THEMING*/ | ||
|
|
||
| $dark-bottom-nav: igx-bottom-nav-theme( | ||
| $background: #292826, | ||
| $active-item-color: #F4D45C | ||
| ); | ||
|
|
||
| /*ENHANCED APPROACHES*/ | ||
|
|
||
| // $yellow-color: #F4D45C; | ||
| // $black-color: #292826; | ||
| // $dark-palette: igx-palette($primary: $black-color, $secondary: $yellow-color); | ||
|
|
||
| // $dark-bottom-nav: igx-bottom-nav-theme( | ||
| // $background: igx-color($dark-palette, "primary", 400), | ||
| // $active-item-color: igx-color($dark-palette, "secondary", 400) | ||
| // ); | ||
|
|
||
| /*SCHEMAS*/ | ||
|
|
||
| // $dark-bottom-nav-schema: extend($_dark-bottom-nav, | ||
| // ( | ||
| // background: ( | ||
| // igx-color: ("primary", 400) | ||
| // ), | ||
| // active-item-color: ( | ||
| // igx-color: ("secondary", 400) | ||
| // ) | ||
| // ) | ||
| // ); | ||
|
|
||
| // $custom-dark-schema: extend($dark-schema,( | ||
| // igx-bottom-nav: $dark-bottom-nav-schema | ||
| // )); | ||
|
|
||
| // $dark-bottom-nav: igx-bottom-nav-theme( | ||
| // $palette: $dark-palette, | ||
| // $schema: $custom-dark-schema | ||
| // ); | ||
|
|
||
| /*INCLUSION by DEFAULT ViewEncapsulation strategy*/ | ||
|
|
||
| :host { | ||
| ::ng-deep { | ||
| @include igx-bottom-nav($dark-bottom-nav); | ||
| } | ||
| } | ||
|
|
||
| .tab-content { | ||
| padding: 16px; | ||
| min-width: 350px; | ||
| } | ||
|
|
||
| .item { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .item > [igxLabel], | ||
| .item > .person { | ||
| position: absolute; | ||
| margin-left: 72px; | ||
| top:1px; | ||
| left: 16px; | ||
| } | ||
|
|
||
| .person .name { | ||
| padding: 0; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .person .phone { | ||
| font-size: 12px; | ||
| color: gray; | ||
| } | ||
|
|
||
| .item igx-icon { | ||
| color: lightgray; | ||
| } | ||
|
|
||
| .item igx-icon.favorite { | ||
| color: orange; | ||
| } |
72 changes: 72 additions & 0 deletions
72
src/app/layouts/tabbar/tabbar-style/tabbar-style.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import { Component, OnInit } from "@angular/core"; | ||
|
|
||
| @Component({ | ||
| selector: "app-tabbar-style", | ||
| styleUrls: ["./tabbar-style.component.scss"], | ||
| templateUrl: "./tabbar-style.component.html" | ||
| }) | ||
| export class TabbarStyleComponent { | ||
|
|
||
| public contactsList: Contact[] = [{ | ||
| avatar: "assets/images/avatar/1.jpg", | ||
| favorite: true, | ||
| key: "1", | ||
| link: "#", | ||
| phone: "770-504-2217", | ||
| text: "Terrance Orta" | ||
| }, { | ||
| avatar: "assets/images/avatar/2.jpg", | ||
| favorite: false, | ||
| key: "2", | ||
| link: "#", | ||
| phone: "423-676-2869", | ||
| text: "Richard Mahoney" | ||
| }, { | ||
| avatar: "assets/images/avatar/3.jpg", | ||
| favorite: false, | ||
| key: "3", | ||
| link: "#", | ||
| phone: "859-496-2817", | ||
| text: "Donna Price" | ||
| }, { | ||
| avatar: "assets/images/avatar/4.jpg", | ||
| favorite: false, | ||
| key: "4", | ||
| link: "#", | ||
| phone: "901-747-3428", | ||
| text: "Lisa Landers" | ||
| }, { | ||
| avatar: "assets/images/avatar/12.jpg", | ||
| favorite: true, | ||
| key: "5", | ||
| link: "#", | ||
| phone: "573-394-9254", | ||
| text: "Dorothy H. Spencer" | ||
| }, { | ||
| avatar: "assets/images/avatar/13.jpg", | ||
| favorite: false, | ||
| key: "6", | ||
| link: "#", | ||
| phone: "323-668-1482", | ||
| text: "Stephanie May" | ||
| }, { | ||
| avatar: "assets/images/avatar/14.jpg", | ||
| favorite: false, | ||
| key: "7", | ||
| link: "#", | ||
| phone: "401-661-3742", | ||
| text: "Marianne Taylor" | ||
| }]; | ||
|
|
||
| public constructor() { | ||
| } | ||
| } | ||
|
|
||
| class Contact { | ||
| public avatar: string; | ||
| public favorite: boolean; | ||
| public key: string; | ||
| public link: string; | ||
| public phone: string; | ||
| public text: string; | ||
| } |