angular/apps/nativescript-demo-ng/src/app/home/home.component.html at 62dbfbf98df8284c679f91a31c32697d4af16026 · NativeScript/angular · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<GridLayout rows="*" columns="*">
  <MDBottomNavigation selectedIndex="0" (loaded)="loadedTabView()" (selectedIndexChange)="onIndexChanged($event)">
    <MDTabStrip class="c-tabs">
      <MDTabStripItem class="tabstripitem">
        <Label [text]="tabItems?.start?.title" class="text-center text-sm"></Label>
      </MDTabStripItem>
    </MDTabStrip>

    <MDTabContentItem backgroundColor="transparent">
      <GridLayout>
        <page-router-outlet actionBarVisibility="never" name="startTab"></page-router-outlet>
      </GridLayout>
    </MDTabContentItem>
  </MDBottomNavigation>
</GridLayout>


<!-- Uncomment to try core TabView features -->
<!-- <TabView
  tabTextFontSize="11"
  iosTabBarMinimizeBehavior="onScrollDown"
  class="bg-black"
>
  <GridLayout
    *tabItem="{
        title: 'Home',
        iconSource: 'sys://house.fill',
      }"
  >
    <Label text="Home Content" class="text-center text-white"></Label>
  </GridLayout>

  <GridLayout
    *tabItem="{
        title: 'Saved',
        iconSource: 'sys://star.fill',
      }"
  >
    <Label text="Second Tab Content" class="text-center text-white"></Label>
  </GridLayout>

  <GridLayout
    *tabItem="{
        title: 'Settings',
        iconSource: 'sys://gearshape.fill',
      }"
  >
    <Label text="Third Tab Content" class="text-center text-white"></Label>
  </GridLayout>
  <GridLayout
    *tabItem="{
        iconSource: 'res://ns-logo',
        role: 'search'
      }"
  >
    <Label text="Search Tab" class="text-center text-white"></Label>
  </GridLayout>
</TabView> -->