@@ -44,73 +44,73 @@ IMPORTANT: _Make sure you include `xmlns:mds="@nativescript-community/ui-materia
44
44
45
45
``` XML
46
46
<Page xmlns : mdt =" @nativescript-community/ui-material-tabs" >
47
- <mdt : MDTabs selectedIndex =" 1" >
47
+ <mdt : Tabs selectedIndex =" 1" >
48
48
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
49
- <mdt : MDTabStrip >
50
- <mdt : MDTabStripItem >
49
+ <mdt : TabStrip >
50
+ <mdt : TabStripItem >
51
51
<Label text =" Home" ></Label >
52
52
<Image src =" font:// " class =" fas" ></Image >
53
- </MDTabStripItem >
54
- <mdt : MDTabStripItem >Item class="special">
53
+ </TabStripItem >
54
+ <mdt : TabStripItem > class="special">
55
55
<Label text =" Account" ></Label >
56
56
<Image src =" font:// " class =" fas" ></Image >
57
- </MDTabStripItem >
58
- <mdt : MDTabStripItem >Item class="special">
57
+ </mdt : TabStripItem >
58
+ <mdt : TabStripItem > class="special">
59
59
<Label text =" Search" ></Label >
60
60
<Image src =" font:// " class =" fas" ></Image >
61
- </MDTabStripItem >
62
- </MDTabStrip >
61
+ </mdt : TabStripItem >
62
+ </mdt : TabStrip >
63
63
64
64
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
65
- <mdt : MDTabContentItem >
65
+ <mdt : TabContentItem >
66
66
<GridLayout >
67
67
<Label text =" Home Page" class =" h2 text-center" ></Label >
68
68
</GridLayout >
69
- </MDTabContentItem >
70
- <mdt : MDTabContentItem >
69
+ </mdt : TabContentItem >
70
+ <mdt : TabContentItem >
71
71
<GridLayout >
72
72
<Label text =" Account Page" class =" h2 text-center" ></Label >
73
73
</GridLayout >
74
- </MDTabContentItem >
75
- <mdt : MDTabContentItem >
74
+ </mdt : TabContentItem >
75
+ <mdt : TabContentItem >
76
76
<GridLayout >
77
77
<Label text =" Search Page" class =" h2 text-center" ></Label >
78
78
</GridLayout >
79
- </MDTabContentItem >
80
- </Tabs >
79
+ </mdt : TabContentItem >
80
+ </mdt : Tabs >
81
81
</Page >
82
82
```
83
83
84
84
#### CSS
85
85
86
86
``` CSS
87
- MDTabs .bottom-nav {
87
+ Tabs .bottom-nav {
88
88
background-color : orangered ;
89
89
color : gold ;
90
90
font-size : 18 ;
91
91
}
92
92
93
- MDTabStripItem .tabstripitem-active {
93
+ TabStripItem .tabstripitem-active {
94
94
background-color : teal ;
95
95
}
96
96
97
- MDTabStripItem .tabstripitem-active :active {
97
+ TabStripItem .tabstripitem-active :active {
98
98
background-color : yellowgreen ;
99
99
}
100
100
101
- MDTabContentItem .first-tabcontent {
101
+ TabContentItem .first-tabcontent {
102
102
background-color : seashell ;
103
103
color : olive ;
104
104
}
105
- MDTabContentItem .second-tabcontent {
105
+ TabContentItem .second-tabcontent {
106
106
background-color : slategray ;
107
107
color : aquamarine ;
108
108
}
109
- MDTabContentItem .third-tabcontent {
109
+ TabContentItem .third-tabcontent {
110
110
background-color : blueviolet ;
111
111
color : antiquewhite ;
112
112
}
113
- MDTabs MDTabStrip {
113
+ Tabs MDTabStrip {
114
114
highlight-color : red ;
115
115
}
116
116
```
0 commit comments