Skip to content

Commit dc78930

Browse files
author
pipeline
committed
feature(EJ2-868): Tab component angular samples.
1 parent bfc3af2 commit dc78930

16 files changed

+522
-0
lines changed

‎src/common/samplelist.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { maskedTextBoxAppRoutes } from '../maskedtextbox/maskedtextbox.module';
2121
import { timePickerAppRoutes } from '../timepicker/timepicker.module';
2222
import { multiselectAppRoutes } from '../multiselect/multiselect.module';
2323
import { contextMenuAppRoutes } from '../contextmenu/contextmenu.module';
24+
import { tabAppRoutes } from '../tab/tab.module';
2425
export let samplesList: any = [
2526
{
2627
'name': 'Chart', 'category': 'Datavisualization', 'order': '01', 'path': 'chart', 'samples': chartAppRoutes, 'type': 'update'
@@ -90,5 +91,8 @@ export let samplesList: any = [
9091
},
9192
{
9293
'name': 'ContextMenu', 'category': 'Navigation', 'order': '05', 'path': 'contextmenu', 'samples': contextMenuAppRoutes, "type": "new"
94+
},
95+
{
96+
'name': 'Tab', 'category': 'Navigation', 'order': '05', 'path': 'tab', 'samples': tabAppRoutes, 'type': 'new'
9397
}
9498
];

‎src/common/sb.router.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { LinearGaugeSampleModule } from '../lineargauge/lineargauge.module';
2323
import { MaskedTextBoxSampleModule } from '../maskedtextbox/maskedtextbox.module';
2424
import { MultiSelectSampleModule } from '../multiselect/multiselect.module';
2525
import { MenuModule } from '../contextmenu/contextmenu.module';
26+
import { TabSampleModule } from '../tab/tab.module';
2627

2728
const appRoutes: any = [
2829
{ path: 'chart', loadChildren: ChartSampleModule },
@@ -48,6 +49,7 @@ const appRoutes: any = [
4849
{ path: 'maskedtextbox', loadChildren: MaskedTextBoxSampleModule },
4950
{ path: 'multiselect', loadChildren: MultiSelectSampleModule },
5051
{ path: 'contextmenu', loadChildren: MenuModule },
52+
{ path: 'tab', loadChildren: TabSampleModule },
5153
{ path: '', redirectTo: 'material/chart/line', pathMatch: 'full' }
5254
];
5355

@@ -76,6 +78,7 @@ const appRoutes: any = [
7678
MaskedTextBoxSampleModule,
7779
MultiSelectSampleModule,
7880
MenuModule,
81+
TabSampleModule,
7982
RouterModule.forRoot(appRoutes)
8083
],
8184

‎src/tab/default-plnkr.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎src/tab/default.component.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Component, ViewEncapsulation, Inject } from '@angular/core';
2+
3+
/**
4+
* Default Tab Component
5+
*/
6+
@Component({
7+
selector: 'control-content',
8+
templateUrl: 'default.html',
9+
styleUrls: ['tab.component.css'],
10+
encapsulation: ViewEncapsulation.None
11+
})
12+
export class DefaultTabComponent {
13+
public headerText: Object = [{ text: "Twitter", 'iconCss': 'e-twitter' },
14+
{ text: "Facebook", 'iconCss': 'e-facebook' }, { text: "WhatsApp", 'iconCss': 'e-whatsapp' }];
15+
16+
public content0: string = 'Twitter is an online social networking service that enables users to send and read short 140-character ' +
17+
'messages called "tweets". Registered users can read and post tweets, but those who are unregistered can only read them. ' +
18+
'Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and ' +
19+
'has more than 25 offices around the world. Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, ' +
20+
'and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million ' +
21+
'users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.';
22+
23+
public content1: string = 'Facebook is an online social networking service headquartered in Menlo Park, California. Its website ' +
24+
'was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo ' +
25+
'Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website\'\s ' +
26+
'membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford ' +
27+
'University. It gradually added support for students at various other universities and later to high-school students.';
28+
29+
public content2: string = 'WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that ' +
30+
'operates under a subscription business model. It uses the Internet to send text messages, images, video, user location ' +
31+
'and audio media messages to other users using standard cellular mobile numbers. As of February 2016, WhatsApp had a user ' +
32+
'base of up to one billion,[10] making it the most globally popular messaging application. WhatsApp Inc., based in ' +
33+
'Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.';
34+
}

‎src/tab/default.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div class="control-section">
2+
<div class="e-sample-resize-container">
3+
<ej-tab id="tab_default" heightAdjustMode='Auto'>
4+
<e-tabitems>
5+
<e-tabitem [header]='headerText[0]' [content]="content0"></e-tabitem>
6+
<e-tabitem [header]='headerText[1]' [content]="content1"></e-tabitem>
7+
<e-tabitem [header]='headerText[2]' [content]="content2"></e-tabitem>
8+
</e-tabitems>
9+
</ej-tab>
10+
</div>
11+
</div>
12+
<div id="description">
13+
<p>
14+
The <code>Tab</code> is a content panel to show multiple contents in specific space one at a time.
15+
</p>
16+
<p>
17+
The default sample illustrates to render simple Tab by defining header and content as <code>items</code> collections.
18+
</p>
19+
<p>
20+
More information about Tab can be found in this <a target="_blank" href="http://ej2.syncfusion.com/angular/documentation/tab/getting-started.html">
21+
documentation</a> section.
22+
</p>
23+
</div>

‎src/tab/orientation-plnkr.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎src/tab/orientation.component.ts‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { Component, ViewChild, Inject, ViewEncapsulation } from '@angular/core';
2+
import { DropDownListComponent } from '@syncfusion/ej2-ng-dropdowns';
3+
import { rippleEffect } from '@syncfusion/ej2-base';
4+
import { TabComponent } from '@syncfusion/ej2-ng-navigations';
5+
6+
/**
7+
* Orientation Tab Component
8+
*/
9+
@Component({
10+
selector: 'control-content',
11+
templateUrl: 'orientation.html',
12+
styleUrls: ['tab.component.css'],
13+
encapsulation: ViewEncapsulation.None
14+
})
15+
export class OrientationTabComponent {
16+
@ViewChild('place')
17+
public placeObj: DropDownListComponent;
18+
@ViewChild('styles')
19+
public styleObj: DropDownListComponent;
20+
@ViewChild('orientationTab')
21+
public tabObj: TabComponent;
22+
23+
constructor( @Inject('sourceFiles') private sourceFiles: any) {
24+
sourceFiles.files = ['tab.component.css'];
25+
}
26+
27+
public headerText: Object = [{ text: 'Rome' }, { text: 'Paris' }, { text: 'London' }];
28+
public dataPlace: Object[] = [
29+
{ id: 'top', position: 'Top' }, { id: 'bottom', position: 'Bottom' }
30+
];
31+
public dataStyles: Object[] = [
32+
{ id: 'default', class: 'Default' }, { id: 'fill', class: 'Fill' }, { id: 'accent', class: 'Accent' }
33+
];
34+
public placeFields: Object = { text: 'position', value: 'id' };
35+
public styleFields: Object = { text: 'class', value: 'id' };
36+
public placeValue: string = 'top';
37+
public styleValue: string = 'default';
38+
public enableClose: boolean = true;
39+
40+
public content0: string = '<div class="content-title"><div class="cnt-text">Employee Info</div></div><div id="rome">' +
41+
'<div class="template-container"><div class="left"><img class="empImg" src="src/dropdownlist/Employees/1.png" ' +
42+
'alt="Anne Dodsworth" /></div><div class="left info"><div class="name">Anne Dodsworth</div> <div class="role">' +
43+
'Product Manager</div></div></div><div class="template-container"><div class="left"><img class="empImg" ' +
44+
'src="src/dropdownlist/Employees/2.png" alt="Laura Callahan" /></div><div class="left info"><div class="name">' +
45+
'Laura Callahan</div> <div class="role">Team Lead</div></div></div><div class="template-container"><div ' +
46+
'class="left"><img class="empImg" src="src/dropdownlist/Employees/3.png" alt="Andrew Fuller" /></div><div ' +
47+
'class="left info"><div class="name">Andrew Fuller</div> <div class="role">Developer</div></div></div></div>';
48+
49+
public content1: string = '<div class="content-title"><div class="cnt-text">Employee Info</div></div><div id="rome">' +
50+
'<div class="template-container"><div class="left"><img class="empImg" src="src/dropdownlist/Employees/4.png" ' +
51+
'alt="Robert King" /></div><div class="left info"><div class="name">Robert King</div> <div class="role">' +
52+
'Team Lead</div></div></div><div class="template-container"><div class="left"><img class="empImg" ' +
53+
'src="src/dropdownlist/Employees/5.png" alt="Michael Suyama" /></div><div class="left info"><div class="name">' +
54+
'Michael Suyama</div> <div class="role">Developer</div></div></div><div class="template-container"><div ' +
55+
'class="left"><img class="empImg" src="src/dropdownlist/Employees/6.png" alt="Margaret Peacock" /></div><div ' +
56+
'class="left info"><div class="name">Margaret Peacock</div> <div class="role">Developer</div></div></div></div>';
57+
58+
public content2: string = '<div class="content-title"><div class="cnt-text">Employee Info</div></div><div id="rome">' +
59+
'<div id="ripple" class="template-container"><div class="left"><img class="empImg" src="src/dropdownlist/Employees/7.png" ' +
60+
'alt="Janet Leverling" /></div><div class="left info"><div class="name">Janet Leverling</div> <div class="role">' +
61+
'CEO</div></div></div><div class="template-container"><div class="left"><img class="empImg" ' +
62+
'src="src/dropdownlist/Employees/8.png" alt="Steven Buchanan" /></div><div class="left info"><div class="name">' +
63+
'Steven Buchanan</div> <div class="role">HR</div></div></div><div class="template-container"><div ' +
64+
'class="left"><img class="empImg" src="src/dropdownlist/Employees/9.png" alt="Nancy Davolio" /></div><div ' +
65+
'class="left info"><div class="name">Nancy Davolio</div> <div class="role">Product Manager</div></div></div></div>';
66+
67+
public placeChange(e: Object): void {
68+
this.placeValue = this.placeObj.value.toString();
69+
if (this.placeObj.value === 'bottom') {
70+
this.tabObj.headerPlacement = 'Bottom';
71+
} else {
72+
this.tabObj.headerPlacement = 'Top';
73+
}
74+
this.tabObj.dataBind();
75+
}
76+
77+
public styleChange(e: Object): void {
78+
this.styleValue = this.styleObj.value.toString();
79+
this.removeStyleClass();
80+
let name: string = this.styleValue;
81+
if (name === 'fill') {
82+
this.tabObj.element.classList.add('e-fill');
83+
} else if (name === 'accent') {
84+
this.tabObj.element.classList.add('e-background');
85+
this.tabObj.element.classList.add('e-accent');
86+
}
87+
}
88+
89+
public removeStyleClass(): void {
90+
this.tabObj.element.classList.remove('e-fill');
91+
this.tabObj.element.classList.remove('e-background');
92+
this.tabObj.element.classList.remove('e-accent');
93+
}
94+
}

‎src/tab/orientation.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<div class="control-section">
2+
<div class="col-lg-8 content-wrapper">
3+
<ej-tab id="tab_orientation" #orientationTab [showCloseButton]='enableClose' heightAdjustMode='Auto'>
4+
<e-tabitems>
5+
<e-tabitem [header]='headerText[0]' [content]='content0'></e-tabitem>
6+
<e-tabitem [header]='headerText[1]' [content]='content1'></e-tabitem>
7+
<e-tabitem [header]='headerText[2]' [content]='content2'></e-tabitem>
8+
</e-tabitems>
9+
</ej-tab>
10+
</div>
11+
<div class="col-lg-4 property-section">
12+
<div class="property-panel-section">
13+
<div class="property-panel-header">Properties</div>
14+
<div class="property-panel-content">
15+
<table id="property" title="Properties">
16+
<tr>
17+
<td style="width:50%">Header Placement:</td>
18+
<td style="width:50%">
19+
<ej-dropdownlist id='header-place' width='90%' #place [dataSource]='dataPlace' (change)='placeChange($event)' [value]='placeValue' [fields]='placeFields'>
20+
</ej-dropdownlist>
21+
</td>
22+
</tr>
23+
<tr>
24+
<td style="width:50%">Header Styles:</td>
25+
<td style="width:50%">
26+
<ej-dropdownlist id='header-styles' width='90%' #styles [dataSource]='dataStyles' (change)='styleChange($event)' [value]='styleValue' [fields]='styleFields'>
27+
</ej-dropdownlist>
28+
</td>
29+
</tr>
30+
</table>
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
<div id="description">
36+
<p>
37+
The <code>Tab</code> allows to place the header section inside the Tab component either at <code>top / bottom</code> position by using <code>headerPlacement</code> property.
38+
</p>
39+
<p>
40+
This sample illustrates the use of header placement and <code>showCloseButton</code> property.
41+
Users can change the header position by changing the drop-down value options and can close the Tab item by clicking close icon in header.<br/><br/>
42+
43+
The User can also view different header styles of Tab component by selecting options from `Header Styles` drop-down.
44+
Header styles changed by adding predefined classes in Tab root element and it class names listed below
45+
</p>
46+
<br/>
47+
<ul>
48+
<li>Material and Fabric theme differentiates all the available tab header styles such as <code>e-fill</code>, <code>e-background e-accent</code>.</li>
49+
<li>In bootstrap theme, all the styles such as <code>e-fill</code> & <code>e-background e-accent</code> will have the same look with no difference.</li>
50+
</ul>
51+
<p>
52+
If above classes not included in root element default style will applied in Tab component.
53+
</p>
54+
<p>
55+
More information about Tab can be found in this <a target="_blank" href="http://ej2.syncfusion.com/angular/documentation/tab/getting-started.html">
56+
documentation</a> section.
57+
</p>
58+
</div>

‎src/tab/responsivemodes-plnkr.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎src/tab/responsivemodes.component.ts‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
2+
import { DropDownListComponent } from '@syncfusion/ej2-ng-dropdowns';
3+
import { TabComponent } from '@syncfusion/ej2-ng-navigations';
4+
5+
/**
6+
* Adaptive Tab Component
7+
*/
8+
@Component({
9+
selector: 'control-content',
10+
templateUrl: 'responsivemodes.html',
11+
styleUrls: ['tab.component.css'],
12+
encapsulation: ViewEncapsulation.None
13+
})
14+
export class ResponsiveTabComponent {
15+
@ViewChild('modes')
16+
public dropDownObj: DropDownListComponent;
17+
@ViewChild('adaptiveTab')
18+
public tabObj: TabComponent;
19+
20+
public data: Object[] = [
21+
{ id: 'scrollable', mode: 'Scrollable' },
22+
{ id: 'popup', mode: 'Popup' }
23+
];
24+
public fields: Object = { text: 'mode', value: 'id' };
25+
public value: string = 'scrollable';
26+
27+
public headerText: Object = [{ text: 'HTML' }, { text: 'C Sharp(C#)' }, { text: 'Java' }, { text: 'VB.Net' },
28+
{ text: 'Xamarin' }, { text: 'ASP.NET' }, { text: 'ASP.NET MVC' }, { text: 'JavaScript' }];
29+
30+
public content0: string = 'HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to ' +
31+
'create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology, used by most websites to create visually ' +
32+
'engaging web pages, user interfaces for web applications, and user interfaces for many mobile applications.[1] Web ' +
33+
'browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a ' +
34+
'website semantically along with cues for presentation, making it a markup language, rather than a programming language.';
35+
36+
public content1: string = 'C# is intended to be a simple, modern, general-purpose, object-oriented programming language. Its ' +
37+
'development team is led by Anders Hejlsberg. The most recent version is C# 5.0, which was released on August 15, 2012.';
38+
39+
public content2: string = 'Java is a set of computer software and specifications developed by Sun Microsystems, later acquired ' +
40+
'by Oracle Corporation, that provides a system for developing application software and deploying it in a cross-platform ' +
41+
'computing environment. Java is used in a wide variety of computing platforms from embedded devices and mobile phones to ' +
42+
'enterprise servers and supercomputers. While less common, Java applets run in secure, sandboxed environments to ' +
43+
'provide many features of native applications and can be embedded in HTML pages.';
44+
45+
public content3: string = 'The command-line compiler, VBC.EXE, is installed as part of the freeware .NET Framework SDK. Mono also ' +
46+
'includes a command-line VB.NET compiler. The most recent version is VB 2012, which was released on August 15, 2012.';
47+
48+
public content4: string = 'Xamarin is a San Francisco, California based software company created in May 2011[3] by the engineers ' +
49+
'that created Mono,[4] Mono for Android and MonoTouch that are cross-platform implementations of the Common Language ' +
50+
'Infrastructure (CLI) and Common Language Specifications (often called Microsoft .NET). With a C#-shared codebase, ' +
51+
'developers can use Xamarin tools to write native Android, iOS, and Windows apps with native user interfaces and share ' +
52+
'code across multiple platforms.[5] Xamarin has over 1 million developers in more than 120 countries around the World ' +
53+
'as of May 2015.';
54+
55+
public content5: string = 'ASP.NET is an open-source server-side web application framework designed for web development to produce ' +
56+
'dynamic web pages. It was developed by Microsoft to allow programmers to build dynamic web sites, web applications ' +
57+
'and web services. It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor ' +
58+
'to Microsoft\'\s Active Server Pages (ASP) technology. ASP.NET is built on the Common Language Runtime (CLR), allowing ' +
59+
'programmers to write ASP.NET code using any supported .NET language. The ASP.NET SOAP extension framework allows ' +
60+
'ASP.NET components to process SOAP messages.';
61+
62+
public content6: string = 'The ASP.NET MVC is a web application framework developed by Microsoft, which implements the ' +
63+
'model–view–controller (MVC) pattern. It is open-source software, apart from the ASP.NET Web Forms component which is ' +
64+
'proprietary. In the later versions of ASP.NET, ASP.NET MVC, ASP.NET Web API, and ASP.NET Web Pages (a platform using ' +
65+
'only Razor pages) will merge into a unified MVC 6.The project is called ASP.NET vNext.';
66+
67+
public content7: string = 'JavaScript (JS) is an interpreted computer programming language. It was originally implemented as ' +
68+
'part of web browsers so that client-side scripts could interact with the user, control the browser, communicate ' +
69+
'asynchronously, and alter the document content that was displayed.[5] More recently, however, it has become common in ' +
70+
'both game development and the creation of desktop applications.';
71+
72+
public onChange(e: Object): void {
73+
this.value = this.dropDownObj.value.toString();
74+
if (this.dropDownObj.value === 'scrollable') {
75+
this.tabObj.overflowMode = 'Scrollable';
76+
} else {
77+
this.tabObj.overflowMode = 'Popup';
78+
}
79+
this.tabObj.dataBind();
80+
}
81+
}

0 commit comments

Comments
 (0)