Skip to content

Commit 8cda8ed

Browse files
JoshDSommerJoshDSommer
committed
readme updates css updates
1 parent 5b4f74a commit 8cda8ed

File tree

4 files changed

+71
-17
lines changed

4 files changed

+71
-17
lines changed

‎README.md‎

Lines changed: 47 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,75 @@
22

33

44
Beta
5-
6-
Include `xmlns:IntroSlides="nativescript-intro-slides"` in your Page
7-
5+
###XML
86
```xml
97

108
<IntroSlides:IntroSlides>
11-
<IntroSlides:Slide id="Page1" top="0" left="0">
9+
<IntroSlides:Slide class="intro-slide-1">
1210
<Label text="This is Panel 1" />
1311
</IntroSlides:Slide>
14-
<IntroSlides:Slide id="Page2" top="0" left="0">
12+
<IntroSlides:Slide class="intro-slide-2">
1513
<Label text="This is Panel 2" />
1614
</IntroSlides:Slide>
17-
<IntroSlides:Slide id="Page3" top="0" left="0">
15+
<IntroSlides:Slide class="intro-slide-3">
1816
<Label text="This is Panel 3" />
1917
</IntroSlides:Slide>
20-
<IntroSlides:Slide id="Page4" top="0" left="0">
18+
<IntroSlides:Slide class="intro-slide-4">
2119
<Label text="This is Panel 4" />
2220
</IntroSlides:Slide>
23-
<IntroSlides:Slide id="Page5" top="0" left="0">
21+
<IntroSlides:Slide class="intro-slide-5">
2422
<Label text="This is Panel 5" />
2523
</IntroSlides:Slide>
2624
</IntroSlides:IntroSlides>
2725

2826
```
27+
###CSS
28+
```css
29+
.intro-slide-1{
30+
background-color: darkslateblue;
31+
}
32+
33+
.intro-slide-2{
34+
background-color: darkcyan;
35+
}
36+
.intro-slide-3{
37+
background-color: darkgreen;
38+
}
39+
40+
.intro-slide-4{
41+
background-color: darkgoldenrod;
42+
}
43+
.intro-slide-5{
44+
background-color: darkslategray;
45+
}
46+
```
47+
#Usage
48+
To use the intro slide plugin you need to first import it into your xml layout with `xmlns:parallax="nativescript-intro-slides"`
2949

50+
when using the intro slide plugin you need at least two ``<IntroSlides:Slide>`` views inside of the ``<IntroSlides:IntroSlides>``.
3051

31-
### Planned additions
52+
add as many ``<IntroSlides:Slide>`` as you want.
53+
54+
### Planned additions:
3255

3356
* disable/enable previous and next buttons
3457
* Add function and property for button text, for next button on the last slide.
3558
* add properties to override previous and next buttons text.
3659

37-
add as many slides as you want, top down order, minimum of two.
60+
### Known Issues:
61+
* Breaks on screen rotation. will be fixed.
62+
63+
###Plugin Development Work Flow:
64+
65+
* Clone repository to your machine.
66+
* First run `npm install`
67+
* Then run `npm run setup` to prepare the demo project
68+
* Build with `npm run build`
69+
* Run and deploy to your device or emulator with `npm run demo.android` or `npm run demo.ios`
70+
71+
72+
###Special thanks to:
73+
Thanks to [Nathan Walker](https://github.com/NathanWalker) for setting up the {N} plugin seed that I used to help get this plugin up and running. More info can be found about it here:
74+
https://github.com/NathanWalker/nativescript-plugin-seed
3875

3976
for {N} version 1.7.0+

‎demo/app/app.css‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,18 @@
1-

1+
.intro-slide-1{
2+
background-color: darkslateblue;
3+
}
4+
5+
.intro-slide-2{
6+
background-color: lightcyan;
7+
}
8+
.intro-slide-3{
9+
background-color: darkgreen;
10+
}
11+
12+
.intro-slide-4{
13+
background-color: darkgoldenrod;
14+
}
15+
.intro-slide-5{
16+
background-color: darkslategray;
17+
}
18+

‎demo/app/main-page.xml‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:IntroSlides="nativescript-intro-slides" loaded="pageLoaded">
22
<IntroSlides:IntroSlides>
3-
<IntroSlides:Slide id="Page1" top="0" left="0">
3+
<IntroSlides:Slide class="intro-slide-1">
44
<Label text="This is Panel 1" />
55
</IntroSlides:Slide>
6-
<IntroSlides:Slide id="Page2" top="0" left="0">
6+
<IntroSlides:Slide class="intro-slide-2">
77
<Label text="This is Panel 2" />
88
</IntroSlides:Slide>
9-
<IntroSlides:Slide id="Page3" top="0" left="0">
9+
<IntroSlides:Slide class="intro-slide-3">
1010
<Label text="This is Panel 3" />
1111
</IntroSlides:Slide>
12-
<IntroSlides:Slide id="Page4" top="0" left="0">
12+
<IntroSlides:Slide class="intro-slide-4">
1313
<Label text="This is Panel 4" />
1414
</IntroSlides:Slide>
15-
<IntroSlides:Slide id="Page5" top="0" left="0">
15+
<IntroSlides:Slide class="intro-slide-5">
1616
<Label text="This is Panel 5" />
1717
</IntroSlides:Slide>
1818
</IntroSlides:IntroSlides>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "nativescript-intro-slides",
3-
"version": "0.0.3",
3+
"version": "0.0.4",
44
"description": "NativeScript intro slides plugin.",
55
"main": "nativescript-intro-slides.js",
66
"nativescript": {

0 commit comments

Comments
 (0)