Skip to content

Commit 68817cd

Browse files
roslaneshellanooroslaneshellanoo
committed
props, props table
1 parent fd68941 commit 68817cd

File tree

6 files changed

+369
-140
lines changed

6 files changed

+369
-140
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
"http-proxy-middleware": "^0.17.3",
4545
"milligram": "^1.3.0",
4646
"node-sass": "^4.5.2",
47+
"normalize.css": "^6.0.0",
4748
"opn": "^4.0.2",
4849
"optimize-css-assets-webpack-plugin": "^1.3.0",
4950
"ora": "^1.2.0",

‎src/App.vue

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,15 @@
1010
Vue.js component for particles backgrounds
1111
</p>
1212
</div>
13-
<vue-particles color="#ffffff" linesColor="#ffffff"></vue-particles>
13+
<vue-particles
14+
color="#ffffff"
15+
linesColor="#ffffff"
16+
:particlesNumber="80"
17+
shapeType="circle"
18+
:particleSize="5"
19+
:linesWidth="2"
20+
>
21+
</vue-particles>
1422

1523
</div>
1624
<main-content></main-content>
@@ -46,7 +54,7 @@
4654
4755
body {
4856
margin: 0;
49-
background: linear-gradient(45deg, hsl(0, 0%, 49%) 0%, hsla(158, 21%, 69%, 0) 70%), linear-gradient(135deg, hsl(203, 49%, 13%) 10%, hsla(203, 64%, 52%, 0) 80%), linear-gradient(225deg, hsl(0, 0%, 0%) 10%, hsla(189, 54%, 37%, 0) 80%), linear-gradient(315deg, hsl(0, 0%, 70%) 100%, hsla(238, 24%, 45%, 0) 70%);
57+
background: #34393f;
5058
}
5159
5260
#app {
@@ -69,9 +77,12 @@
6977
}
7078
}
7179
72-
pre.language-js {
80+
pre.language-js, pre.language-html {
7381
max-width: 550px;
7482
margin: 1rem auto !important;
83+
background: #292929;
84+
border-radius: 3px;
85+
box-shadow: inset 0px 0px 39px rgba(0, 0, 0, 0.74);
7586
}
7687
7788
.npm-code {

‎src/assets/tables.scss

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
2+
$breakpoint-alpha: 480px; // adjust to your needs
3+
4+
.rwd-table {
5+
margin: 1em 0;
6+
min-width: 300px; // adjust to your needs
7+
8+
tr {
9+
border-top: 1px solid #ddd;
10+
border-bottom: 1px solid #ddd;
11+
}
12+
13+
th {
14+
display: none; // for accessibility, use a visually hidden method here instead! Thanks, reddit!
15+
}
16+
17+
td {
18+
display: block;
19+
20+
&:first-child {
21+
padding-top: .5em;
22+
}
23+
&:last-child {
24+
padding-bottom: .5em;
25+
}
26+
27+
&:before {
28+
content: attr(data-th)": "; // who knew you could do this? The internet, that's who.
29+
font-weight: bold;
30+
31+
// optional stuff to make it look nicer
32+
width: 6.5em; // magic number :( adjust according to your own content
33+
display: inline-block;
34+
// end options
35+
36+
@media (min-width: $breakpoint-alpha) {
37+
display: none;
38+
}
39+
}
40+
}
41+
42+
th, td {
43+
text-align: left;
44+
45+
@media (min-width: $breakpoint-alpha) {
46+
display: table-cell;
47+
padding: .25em .5em;
48+
49+
&:first-child {
50+
padding-left: 0;
51+
}
52+
53+
&:last-child {
54+
padding-right: 0;
55+
}
56+
}
57+
58+
}
59+
60+
61+
}
62+
63+
64+
// presentational styling
65+
66+
67+
.rwd-table {
68+
background: #34495E;
69+
color: #fff;
70+
border-radius: .4em;
71+
overflow: hidden;
72+
background: #292929;
73+
border-radius: 3px;
74+
box-shadow: inset 0px 0px 39px rgba(0, 0, 0, 0.74);
75+
tr {
76+
border-color: lighten(#34495E, 10%);
77+
}
78+
th, td {
79+
margin: .5em 1em;
80+
@media (min-width: $breakpoint-alpha) {
81+
padding: 1em !important;
82+
}
83+
}
84+
th, td:before {
85+
color: #dd5;
86+
}
87+
}

‎src/components/Main.vue

Lines changed: 96 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,14 @@ npm install vue-particles --save-dev
99
</code>
1010
</pre>
1111

12+
<br>
13+
1214

1315
<div class="wrap-code text-left">
1416
<h4 class="white">
15-
Main file
17+
Main.js file
1618
</h4>
1719
<pre class="language-js"><code>
18-
// Main file
1920
import Vue from 'vue'
2021
import VueParticles from 'vue-particles'
2122
Vue.use(VueParticles)
@@ -24,12 +25,89 @@ Vue.use(VueParticles)
2425
<br>
2526
<div class="wrap-code text-left">
2627
<h4 class="white">
27-
App.vue file
28+
App.vue file - Simple example
2829
</h4>
2930
<pre class="language-html"><code>
3031
{{appCode}}
3132
</code></pre>
3233
</div>
34+
<br>
35+
36+
<div class="wrap-code text-left">
37+
<h4 class="white">
38+
App.vue file - Full example
39+
</h4>
40+
<pre class="language-html"><code>
41+
{{appCodeFull}}
42+
</code></pre>
43+
</div>
44+
<br>
45+
46+
<div class="wrap-table">
47+
<h4 class="white text-left">
48+
Props
49+
</h4>
50+
<table class="rwd-table">
51+
52+
<thead>
53+
<tr>
54+
<th>Name</th>
55+
<th>Type</th>
56+
<th>Default</th>
57+
<th>Description</th>
58+
</tr>
59+
</thead>
60+
61+
<tr>
62+
<td data-th="Name">color</td>
63+
<td data-th="Type">String</td>
64+
<td data-th="Default">#dedede</td>
65+
<td data-th="Description">Particle color</td>
66+
</tr>
67+
<tr>
68+
<td data-th="Name">particlesNumber</td>
69+
<td data-th="Type">Number</td>
70+
<td data-th="Default">80</td>
71+
<td data-th="Description">Amount of particles</td>
72+
</tr>
73+
<tr>
74+
<td data-th="Name">shapeType</td>
75+
<td data-th="Type">String</td>
76+
<td data-th="Default">"circle"</td>
77+
<td data-th="Description">
78+
Available shape types: "circle","edge","triangle",
79+
"polygon","star"
80+
</td>
81+
</tr>
82+
<tr>
83+
<td data-th="Name">particleSize</td>
84+
<td data-th="Type">Number</td>
85+
<td data-th="Default">4</td>
86+
<td data-th="Description">
87+
Size of single particle
88+
</td>
89+
</tr>
90+
<tr>
91+
<td data-th="Name">linesColor</td>
92+
<td data-th="Type">String</td>
93+
<td data-th="Default">#dedede</td>
94+
<td data-th="Description">
95+
Lines color
96+
</td>
97+
</tr>
98+
<tr>
99+
<td data-th="Name">linesWidth</td>
100+
<td data-th="Type">Number</td>
101+
<td data-th="Default">1</td>
102+
<td data-th="Description">
103+
Lines width
104+
</td>
105+
</tr>
106+
</table>
107+
</div>
108+
109+
110+
33111

34112
</div>
35113
</template>
@@ -40,12 +118,26 @@ Vue.use(VueParticles)
40118
<vue-particles color="#ffffff"></vue-particles>
41119
</div>
42120
</template>`
121+
const appCodeFull = `<template>
122+
<div id="app">
123+
<vue-particles
124+
color="#ffffff"
125+
linesColor="#ffffff"
126+
:particlesNumber="80"
127+
shapeType="circle"
128+
:particleSize="8"
129+
:linesWidth="3"
130+
>
131+
</vue-particles>
132+
</div>
133+
</template>`
43134
/* eslint-disable */
44135
export default {
45136
name: 'main-content',
46137
data () {
47138
return {
48-
appCode
139+
appCode,
140+
appCodeFull
49141
}
50142
}
51143
}

‎src/main.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import 'normalize.css/normalize.css'
44
import 'prismjs/themes/prism.css'
55
import 'prismjs/themes/prism-okaidia.css'
6+
import './assets/tables.scss'
67

78
import Vue from 'vue'
89
import App from './App'

0 commit comments

Comments
 (0)