Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d42cb4d

Browse files
committed
Add TabView example page.
1 parent 636459e commit d42cb4d

File tree

4 files changed

+35
-11
lines changed

4 files changed

+35
-11
lines changed

‎app/app.css‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,10 @@
33
}
44

55
label {
6-
text-align: center;
7-
}
6+
text-align: center;
7+
}
8+
9+
.tab-view-container {
10+
font-family: 'Courier'; /* Enabling this results in the error and shows a blank TabView */
11+
}
12+

‎app/app.routes.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ import { ListViewWithNestedTemplateComponent } from "./listView/nestedTemplate/l
2020
import { ModalTest, ModalTestWithPushStrategy, ModalContent } from "./modal/modal-dialogs/modal-dialog.component";
2121
import { ModalViewMainPageComponent } from "./modal/modal-view-main-page";
2222

23+
import { TabViewComponent } from "./tab-view/tab-view.component";
24+
2325
import { NavigationOptionsComponent } from "./navigation-options/navigation-options.component";
2426
import { NavigationInfoComponent } from "./navigation-options/navigation-info.component";
2527
import { MainComponent } from "./main/main-page-router-outlet";
@@ -53,6 +55,8 @@ export const routes = [
5355
routeEntry({ path: 'modal/modal-dialogs', component: ModalTest, data: { title: "modal" } }),
5456
routeEntry({ path: 'modal/modal-dialogs-push', component: ModalTestWithPushStrategy, data: { title: "modal(onPush)" } }),
5557

58+
routeEntry({ path: 'tab-view', component: TabViewComponent, data: { title: "tab-view", isNavigatable: true } }),
59+
5660
routeEntry({ path: 'nav-options', component: NavigationOptionsComponent, data: { title: "nav-options", isNavigatable: true} }),
5761
routeEntry({ path: 'nav-info', component: NavigationInfoComponent, data: { title: "nav-info" } }),
5862
];

‎app/main/main-page-router-outlet.ts‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,30 +6,28 @@ import * as platform from "platform";
66
selector: "main",
77
template: `
88
<WrapLayout id='mainView' [orientation]="orientation">
9-
<Button *ngFor="let route of routers" [text]="route.data.title" [nsRouterLink]="route.path" [color]="route.data.isNavigatable == true ? 'red':'blue'" height="40"></Button>
9+
<Button *ngFor="let page of pages" [text]="page.data.title" [nsRouterLink]="page.path" color="red" height="40"></Button>
1010
</WrapLayout>
1111
`,
1212
})
1313
export class MainComponent {
14-
private _routers = [];
14+
private _pages = [];
1515
private _routes = require("../app.routes").routes
1616
private _orientation: string = "vertical";
1717

1818
constructor() {
19-
let routs = this._routes.filter((item) => {
20-
let isNavigatable = item.data.isNavigatable != undefined && item.data.isNavigatable == true && item.path != '';
21-
console.log("Page route:" + item.path + "; page name: " + item.data.title + "; isNavigatable: " + isNavigatable);
22-
return isNavigatable;
19+
let navigatableRoutes = this._routes.filter((item) => {
20+
return item.data.isNavigatable == true && item.path != '';
2321
});
2422

25-
this._routers = routs;
23+
this._pages = navigatableRoutes;
2624
if (platform.isAndroid) {
2725
this._orientation = "horizontal";
2826
}
2927
}
3028

31-
get routers() {
32-
return this._routers;
29+
get pages() {
30+
return this._pages;
3331
}
3432

3533
get orientation() {

‎app/tab-view/tab-view.component.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'tab-view-component',
5+
template: `
6+
<Grid class="tab-view-container">
7+
<TabView sdkExampleTitle sdkToggleNavButton>
8+
<StackLayout *tabItem="{title: 'Overview'}" >
9+
<Label text="Test Label"></Label>
10+
</StackLayout>
11+
</TabView>
12+
</Grid>
13+
`,
14+
})
15+
16+
export class TabViewComponent {
17+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /