Skip to content

Commit b3d7b0b

Browse files
PFElementsPFElements
committed
initial
1 parent 4132ea8 commit b3d7b0b

File tree

4 files changed

+194
-83
lines changed

4 files changed

+194
-83
lines changed

‎demo/index.html‎

Lines changed: 149 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -4,79 +4,191 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
66

7-
<title>pixy-dot-nav demo</title>
7+
<title>pf-pageindicator demo</title>
8+
<script src="../../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
89

9-
<script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
10-
11-
<link rel="import" href="../bower_components/iron-demo-helpers/demo-pages-shared-styles.html">
12-
<link rel="import" href="../bower_components/iron-demo-helpers/demo-snippet.html">
10+
<link rel="import" href="../../../bower_components/iron-demo-helpers/demo-pages-shared-styles.html">
11+
<link rel="import" href="../../../bower_components/iron-demo-helpers/demo-snippet.html">
1312
<link rel="import" href="../pf-pageindicator.html">
13+
<style is="custom-style" >
14+
#pf {
15+
--pf-pageindicator-bg-color: #e0e0e0;
16+
--pf-dot-color: #fff;
17+
--pf-selecteddot-color: white;
18+
--pf-dot-border-color: lightseagreen;
19+
--pf-dot-hover-color: white
20+
}
21+
1422

15-
<style is="custom-style" include="demo-pages-shared-styles">
16-
#pg{
17-
--pf-pageindicator-bg-color:red;
18-
--pf-dot-color:pink;
19-
--pf-selecteddot-color:blue;
20-
--pf-dot-border-color:black;
21-
--pf-dot-hover-color:green
22-
}
2323
</style>
2424
</head>
2525
<body>
2626
<div class="vertical-section-container centered">
27-
<h3>Basic pixy-dot-nav demo</h3>
27+
<h3>Basic PF Page indicator demo</h3>
2828
<demo-snippet>
29+
<template>
30+
<style is="custom-style">
31+
#pf-indicator {
32+
--pf-pageindicator-bg-color: #e0e0e0;
33+
34+
--pf-selecteddot-color: white;
35+
--pf-dot-border-color: lightseagreen;
36+
--pf-dot-hover-color: white
37+
}
38+
39+
</style>
40+
<pf-pageindicator
41+
id="pf-indicator" dotstyle="dotstyle-fillup" totaldots="5">
42+
</pf-pageindicator>
43+
44+
</template>
2945

30-
<h2>Fill up</h2>
46+
</demo-snippet>
47+
</div>
48+
<div class="vertical-section-container centered">
49+
<h2>PF Page indicator with selected property</h2>
50+
<demo-snippet>
51+
<template>
52+
<pf-pageindicator
53+
dotstyle="dotstyle-smalldotstroke" totaldots="5" selected="3">
54+
</pf-pageindicator>
55+
</template>
56+
</demo-snippet>
57+
</div>
58+
<div class="vertical-section-container centered"><h2>Page indicator with data </h2>
59+
<demo-snippet>
60+
<template>
3161
<pf-pageindicator
32-
dotstyle="dotstyle-fillup" totaldots="5">
62+
dotstyle="dotstyle-tooltip"
63+
indicatordata='[{"label":"Home"},{"label":"About"},{"label":"contact us"}]'>
64+
3365
</pf-pageindicator>
34-
<h2>Scale up</h2>
66+
</template>
67+
</demo-snippet>
68+
</div>
69+
<div class="vertical-section-container centered"><h2>Dot Hop</h2>
70+
<demo-snippet>
71+
<template>
72+
<style is="custom-style" include="demo-pages-shared-styles">
73+
#pf-dothop {
74+
--pf-selecteddot-color: #80CBC4;
75+
76+
}
77+
78+
79+
</style>
3580
<pf-pageindicator
36-
dotstyle="dotstyle-scaleup" totaldots="5">
81+
id="pf-dothop" dotstyle="dotstyle-hop" totaldots="5">
3782
</pf-pageindicator>
38-
<h2>Stroke</h2>
83+
</template>
84+
</demo-snippet>
85+
</div>
86+
<div class="vertical-section-container centered">
87+
<h2>Stroke</h2>
88+
<demo-snippet>
89+
<template>
3990
<pf-pageindicator
4091
dotstyle="dotstyle-stroke" totaldots="5">
4192
</pf-pageindicator>
42-
<h2>Fill in</h2>
93+
</template>
94+
</demo-snippet>
95+
</div>
96+
<div class="vertical-section-container centered">
97+
<h2>Fill in</h2>
98+
<demo-snippet>
99+
<template>
43100
<pf-pageindicator
44101
dotstyle="dotstyle-fillin" totaldots="5">
45102
</pf-pageindicator>
46-
<h2>Circle Grow</h2>
103+
</template>
104+
</demo-snippet>
105+
</div>
106+
<div class="vertical-section-container centered"><h2>Circle Grow</h2>
107+
<demo-snippet>
108+
<template>
47109
<pf-pageindicator
48-
dotstyle="dotstyle-circlegrow" totaldots="5">
110+
dotstyle="dotstyle-circlegrow" totaldots="5">
49111
</pf-pageindicator>
50-
<h2></h2>
51-
<h2>Dot Stroke</h2>
112+
</template>
113+
</demo-snippet>
114+
</div>
115+
<div class="vertical-section-container centered">
116+
<h2>Dot Stroke</h2>
117+
<demo-snippet>
118+
<template>
119+
<style is="custom-style" include="demo-pages-shared-styles">
120+
#pf-dotstrok {
121+
--pf-pageindicator-bg-color: #e0e0e0;
122+
--pf-dot-color: #80CBC4;
123+
124+
--pf-selecteddot-color: #fff;
125+
126+
--pf-dot-hover-color: #004D40;
127+
}
128+
129+
130+
</style>
52131
<pf-pageindicator
53-
dotstyle="dotstyle-dotstroke" totaldots="5">
132+
id="pf-dotstrok" dotstyle="dotstyle-dotstroke" totaldots="5">
54133
</pf-pageindicator>
55-
<h2>Draw Circle</h2>
134+
</template>
135+
</demo-snippet>
136+
</div>
137+
<div class="vertical-section-container centered"><h2>Draw Circle</h2>
138+
<demo-snippet>
139+
<template>
56140
<pf-pageindicator
57141
dotstyle="dotstyle-drawcircle" totaldots="5">
58142
</pf-pageindicator>
59-
<h2>Small Dot With Stroke</h2>
143+
</template>
144+
</demo-snippet>
145+
</div>
146+
<div class="vertical-section-container centered"><h2>Small Dot With Stroke</h2>
147+
<demo-snippet>
148+
<template>
149+
<pf-pageindicator
150+
dotstyle="dotstyle-smalldotstroke" totaldots="5" selected="3">
151+
</pf-pageindicator>
152+
</template>
153+
</demo-snippet>
154+
</div>
155+
<div class="vertical-section-container centered"><h2>Puff</h2>
156+
<demo-snippet>
157+
<template>
60158
<pf-pageindicator
61-
id="pg" dotstyle="dotstyle-smalldotstroke" totaldots="5">
159+
dotstyle="dotstyle-puff" totaldots="5">
62160
</pf-pageindicator>
63-
<h2>Fall In</h2>
161+
</template>
162+
</demo-snippet>
163+
</div>
164+
<div class="vertical-section-container centered"><h2>Flip</h2>
165+
<demo-snippet>
166+
<template>
64167
<pf-pageindicator
65-
dotstyle="dotstyle-fall" totaldots="5">
168+
dotstyle="dotstyle-flip" totaldots="5">
66169
</pf-pageindicator>
67-
<h2>Page indicator with data </h2>
170+
</template>
171+
</demo-snippet>
172+
</div>
173+
<div class="vertical-section-container centered"><h2>Tool Tip</h2>
174+
<demo-snippet>
175+
<template>
68176
<pf-pageindicator
69-
dotstyle="dotstyle-tooltip"
70-
indicatordata='[{"label":"Home"},{"label":"About"},{"label":"contact us"}]'
71-
72-
>
177+
dotstyle="dotstyle-tooltip" totaldots="5">
178+
</pf-pageindicator>
179+
</template>
180+
</demo-snippet>
181+
</div>
73182

183+
<div class="vertical-section-container centered"><h2>Fall In</h2>
184+
<demo-snippet>
185+
<template>
186+
<pf-pageindicator
187+
dotstyle="dotstyle-fall" totaldots="5">
74188
</pf-pageindicator>
75189
</template>
76190
</demo-snippet>
77191
</div>
78-
<script>
79192

80-
</script>
81193
</body>
82194
</html>

‎index.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
66

7-
<title>pixy-dot-nav</title>
7+
<title>PF PageIndicator</title>
88

9-
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
109

11-
<link rel="import" href="bower_components/iron-component-page/iron-component-page.html">
10+
<script src="../webcomponentsjs/webcomponents-loader.js"></script>
11+
12+
<link rel="import" href="../iron-component-page/iron-component-page.html">
1213
</head>
1314
<body>
14-
<iron-component-page src=" <pf-pageindicator.html"></iron-component-page>
15+
<iron-component-page src="pf-pageindicator.html"></iron-component-page>
1516
</body>
17+
1618
</html>

0 commit comments

Comments
 (0)