Skip to content

Commit 1750794

Browse files
farfromrefugfarfromrefug
committed
fi(nativescript-material-tabs): some tabs fix
1 parent 870732f commit 1750794

File tree

2 files changed

+220
-1
lines changed

2 files changed

+220
-1
lines changed

‎packages/nativescript-material-tabs/README.md

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
[![npm](https://img.shields.io/npm/v/nativescript-material-tabs.svg)](https://www.npmjs.com/package/nativescript-material-tabs)
2+
[![npm](https://img.shields.io/npm/dt/nativescript-material-tabs.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-material-tabs)
3+
[![GitHub forks](https://img.shields.io/github/forks/Akylas/nativescript-material-components.svg)](https://github.com/Akylas/nativescript-material-components/network)
4+
[![GitHub stars](https://img.shields.io/github/stars/Akylas/nativescript-material-components.svg)](https://github.com/Akylas/nativescript-material-components/stargazers)
5+
6+
## Installation
7+
8+
If using ```@nativescript``` :
9+
* `tns plugin add nativescript-material-tabs`
10+
11+
12+
Be sure to run a new build after adding plugins to avoid any issues.
13+
14+
---
15+
16+
##### [Material Design Spec](https://material.io/design/components/tabs.html)
17+
18+
### Usage
19+
20+
21+
## Plain NativeScript
22+
23+
<span style="color:red">IMPORTANT: </span>_Make sure you include `xmlns:mds="nativescript-material-tabs"` on the Page element_
24+
25+
### XML
26+
27+
```XML
28+
<Page xmlns:mdt="nativescript-material-tabs">
29+
<mdt:Tabs selectedIndex="1">
30+
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
31+
<TabStrip>
32+
<TabStripItem>
33+
<Label text="Home"></Label>
34+
<Image src="font://&#xf015;" class="fas"></Image>
35+
</TabStripItem>
36+
<TabStripItem class="special">
37+
<Label text="Account"></Label>
38+
<Image src="font://&#xf007;" class="fas"></Image>
39+
</TabStripItem>
40+
<TabStripItem class="special">
41+
<Label text="Search"></Label>
42+
<Image src="font://&#xf00e;" class="fas"></Image>
43+
</TabStripItem>
44+
</TabStrip>
45+
46+
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
47+
<TabContentItem>
48+
<GridLayout>
49+
<Label text="Home Page" class="h2 text-center"></Label>
50+
</GridLayout>
51+
</TabContentItem>
52+
<TabContentItem>
53+
<GridLayout>
54+
<Label text="Account Page" class="h2 text-center"></Label>
55+
</GridLayout>
56+
</TabContentItem>
57+
<TabContentItem>
58+
<GridLayout>
59+
<Label text="Search Page" class="h2 text-center"></Label>
60+
</GridLayout>
61+
</TabContentItem>
62+
</Tabs>
63+
</Page>
64+
```
65+
66+
### CSS
67+
68+
```CSS
69+
MDTabs.bottom-nav {
70+
background-color: orangered;
71+
color: gold;
72+
font-size: 18;
73+
}
74+
75+
TabStripItem.tabstripitem-active {
76+
background-color: teal;
77+
}
78+
79+
TabStripItem.tabstripitem-active:active {
80+
background-color: yellowgreen;
81+
}
82+
83+
TabContentItem.first-tabcontent {
84+
background-color: seashell;
85+
color: olive;
86+
}
87+
TabContentItem.second-tabcontent {
88+
background-color: slategray;
89+
color: aquamarine;
90+
}
91+
TabContentItem.third-tabcontent {
92+
background-color: blueviolet;
93+
color: antiquewhite;
94+
}
95+
MDTabs TabStrip {
96+
highlight-color: red;
97+
}
98+
```
99+
100+
## NativeScript + Angular
101+
102+
```typescript
103+
import { NativeScriptMaterialTabsModule } from "nativescript-material-slider/angular";
104+
105+
@NgModule({
106+
imports: [
107+
NativeScriptMaterialTabsModule,
108+
...
109+
],
110+
...
111+
})
112+
```
113+
114+
```html
115+
<MDTabs selectedIndex="1">
116+
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
117+
<TabStrip>
118+
<TabStripItem>
119+
<Label text="Home"></Label>
120+
<Image src="font://&#xf015;" class="fas"></Image>
121+
</TabStripItem>
122+
<TabStripItem class="special">
123+
<Label text="Account"></Label>
124+
<Image src="font://&#xf007;" class="fas"></Image>
125+
</TabStripItem>
126+
<TabStripItem class="special">
127+
<Label text="Search"></Label>
128+
<Image src="font://&#xf00e;" class="fas"></Image>
129+
</TabStripItem>
130+
</TabStrip>
131+
132+
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
133+
<TabContentItem>
134+
<GridLayout>
135+
<Label text="Home Page" class="h2 text-center"></Label>
136+
</GridLayout>
137+
</TabContentItem>
138+
<TabContentItem>
139+
<GridLayout>
140+
<Label text="Account Page" class="h2 text-center"></Label>
141+
</GridLayout>
142+
</TabContentItem>
143+
<TabContentItem>
144+
<GridLayout>
145+
<Label text="Search Page" class="h2 text-center"></Label>
146+
</GridLayout>
147+
</TabContentItem>
148+
</MDTabs>
149+
```
150+
151+
## NativeScript + Vue
152+
153+
```javascript
154+
import TabsPlugin from 'nativescript-material-slider/vue';
155+
156+
Vue.use(TabsPlugin);
157+
```
158+
159+
```html
160+
<MDTabs selectedIndex="1">
161+
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
162+
<TabStrip>
163+
<TabStripItem>
164+
<Label text="Home"></Label>
165+
<Image src="font://&#xf015;" class="fas"></Image>
166+
</TabStripItem>
167+
<TabStripItem class="special">
168+
<Label text="Account"></Label>
169+
<Image src="font://&#xf007;" class="fas"></Image>
170+
</TabStripItem>
171+
<TabStripItem class="special">
172+
<Label text="Search"></Label>
173+
<Image src="font://&#xf00e;" class="fas"></Image>
174+
</TabStripItem>
175+
</TabStrip>
176+
177+
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
178+
<TabContentItem>
179+
<GridLayout>
180+
<Label text="Home Page" class="h2 text-center"></Label>
181+
</GridLayout>
182+
</TabContentItem>
183+
<TabContentItem>
184+
<GridLayout>
185+
<Label text="Account Page" class="h2 text-center"></Label>
186+
</GridLayout>
187+
</TabContentItem>
188+
<TabContentItem>
189+
<GridLayout>
190+
<Label text="Search Page" class="h2 text-center"></Label>
191+
</GridLayout>
192+
</TabContentItem>
193+
</MDTabs>
194+
```
195+
196+
## Attributes
197+
198+
Inherite from Nativescript [Tabs](https://docs.nativescript.org/ui/ns-ui-widgets/slider) so it already has all the same attributes
199+
200+
## Attributes
201+
202+
| Name |Type| Description|
203+
| ------------- |:-------------:| -----:|
204+
| items | Array<TabContentItem> | Gets or sets the items of the BottomNavigation.|
205+
|selectedIndex | number | Gets or sets the selectedIndex of the BottomNavigation.|
206+
|swipeEnabled | boolean | Gets or sets the swipe enabled state of the Tabs.|
207+
|offscreenTabLimit | number | Gets or sets the number of offscreen preloaded tabs of the Tabs.|
208+
|tabStrip |TabStrip | Gets or sets the tab strip of the BottomNavigation.|
209+
|tabsPosition | "top", "bottom" | Gets or sets the position state of the Tabs. Default value: top|
210+
|iOSTabBarItemsAlignment | "leading", "justified", "center", "centerSelected" |iOS Only: Gets or set the MDCTabBarAlignment of the tab bar icons in iOS. Default value: justified|
211+
212+
## Events
213+
214+
|Name | Description|
215+
| ------------- |:-------------:| -----:|
216+
|selectedIndexChanged | Emitted when the selectedIndex property is changed.
217+
|loaded | Emitted when the view is loaded.
218+
|unloaded | Emitted when the view is unloaded.
219+
|layoutChanged | Emitted when the layout bounds of a view changes due to layout processing.

‎src/tabs/tabs-common.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export module knownCollections {
4444
export const items = "items";
4545
}
4646

47-
@CSSType("Tabs")
47+
@CSSType("MDTabs")
4848
export class TabsBase extends TabNavigationBase implements TabsDefinition {
4949
public swipeEnabled: boolean;
5050
public offscreenTabLimit: number;

0 commit comments

Comments
 (0)