Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 68817cd

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /