Skip to content

Commit 5ace892

Browse files
officertofficert
committed
docs
1 parent 41f0f0b commit 5ace892

File tree

17 files changed

+319
-80
lines changed

17 files changed

+319
-80
lines changed

‎docs-src/components/App/index.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,7 @@ button.hide-loader .hidden {
7070
}
7171
7272
.form-control {
73-
display: block;
74-
width: 100%;
73+
display: inline-block;
7574
padding: 0.375rem 0.75rem;
7675
font-size: 1rem;
7776
line-height: 1.5;

‎docs-src/components/Examples-openOn/index.vue

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template src="./template.html">
2+
</template>
3+
4+
<script>
5+
export default {
6+
name: 'examples-openOn',
7+
data() {
8+
return {
9+
openOn: 'left'
10+
}
11+
},
12+
methods: {
13+
showPanel() {
14+
this.$showPanel({
15+
component: 'panel-1',
16+
height: 600,
17+
width: 600,
18+
openOn: this.openOn
19+
});
20+
}
21+
}
22+
};
23+
</script>
24+
25+
<style lang="less">
26+
</style>

‎docs-src/components/Examples-openOn/template.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<div id="examples">
2+
<p>
3+
Open panels on the left, right, top or bottom side using the <code>openOn</code> option:
4+
</p>
5+
<pre class="highlight">
6+
const panel = this.$showPanel({
7+
component: "panel-1",
8+
openOn: '{{ this.openOn }}',
9+
props: {}
10+
});</pre>
11+
<select class="form-control" v-model="openOn">
12+
<option value="left">
13+
Left
14+
</option>
15+
<option value="right">
16+
Right
17+
</option>
18+
<option value="top">
19+
Top
20+
</option>
21+
<option value="bottom">
22+
Bottom
23+
</option>
24+
</select>
25+
<button @click.prevent="showPanel">
26+
Show Panel
27+
</button>
28+
</div>

‎docs-src/components/Examples-width/index.vue

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template src="./template.html">
2+
</template>
3+
4+
<script>
5+
export default {
6+
name: 'examples-width',
7+
data() {
8+
return {
9+
width: 600
10+
}
11+
},
12+
methods: {
13+
showPanel() {
14+
this.$showPanel({
15+
component: 'panel-1',
16+
height: 600,
17+
width: this.width,
18+
openOn: 'left'
19+
});
20+
}
21+
}
22+
};
23+
</script>
24+
25+
<style lang="less">
26+
</style>

‎docs-src/components/Examples-width/template.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div id="examples">
2+
<p>
3+
Open panels on the left, right, top or bottom side using the <code>openOn</code> option:
4+
</p>
5+
<pre class="highlight">
6+
const panel = this.$showPanel({
7+
component: "panel-1",
8+
width: {{ this.width }},
9+
props: {}
10+
});</pre>
11+
<input class="form-control" type="text" v-model="width" />
12+
<button @click.prevent="showPanel">
13+
Show Panel
14+
</button>
15+
</div>

‎docs-src/components/Examples/index.vue

Lines changed: 2 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,41 +5,11 @@
55
export default {
66
name: 'examples',
77
data() {
8-
return {
9-
example1Form: {
10-
src: 'https://www.pexels.com/search',
11-
searchTerm: 'tiger'
12-
},
13-
iframeLoading: true
14-
}
8+
return {}
159
},
16-
methods: {
17-
onLoad() {
18-
console.log('iframe loaded');
19-
20-
this.iframeLoading = false;
21-
},
22-
onIframeLoad() {
23-
console.log('iframe loaded');
24-
}
25-
}
10+
methods: {}
2611
};
2712
</script>
2813

2914
<style lang="less">
30-
#examples {
31-
.iframe-wrapper {
32-
border: 1px solid gray;
33-
height: 600px;
34-
35-
.vue-friendly-iframe {
36-
height: 100%;
37-
width: 100%;
38-
iframe {
39-
height: 100%;
40-
width: 100%;
41-
}
42-
}
43-
}
44-
}
4515
</style>

‎docs-src/components/Examples/template.html

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,3 @@
11
<div id="examples">
2-
<h2>Example</h2>
3-
<div class="example-1">
4-
<form>
5-
<div class="form-group">
6-
<label>Enter a search term:</label>
7-
<input class="form-control" v-model="example1Form.searchTerm">
8-
</div>
9-
<div class="form-group">
10-
<label>Iframe URL:</label>
11-
<input class="form-control" :value="example1Form.src + '/' + example1Form.searchTerm" readonly="readonly">
12-
</div>
13-
</form>
14-
<div class="iframe-wrapper">
15-
<div class="iframe-loading" v-if="iframeLoading">
16-
iframe loading...
17-
</div>
18-
<vue-friendly-iframe ref="iframeEl" :style="{ 'display' : iframeLoading ? 'none' : 'block' }" :src="example1Form.src + '/' + example1Form.searchTerm" @load="onLoad" @iframe-load="onIframeLoad" frameborder="0" gesture="media" allow="encrypted-media"></vue-friendly-iframe>
19-
</div>
20-
</div>
2+
<router-view></router-view>
213
</div>

‎docs-src/components/Home/template.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
<h2>Intro</h2>
33
<div>
44
<p>
5-
Vue Slideout Panel is a component for creating stackable slideout panels. Panels can be added from any Vue component.
5+
Vue Slideout Panel is a component for creating stackable slideout panels.
6+
</p>
7+
<p>
8+
Panels can be added from any Vue component and are added to the global stack and must be closed in LIFO order.
69
</p>
710
</div>
811
</div>

‎docs-src/components/Install/template.html

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,24 @@
11
<div id="install">
22
<h2>Installation</h2>
3-
<div>
4-
<pre class="highlight">npm install vue2-slideout-panel --save-dev</pre>
5-
</div>
3+
<pre class="highlight">npm install vue2-slideout-panel --save-dev</pre>
64
<h2>Usage</h2>
75
<p>
86
1) Install the Vue Slideout Panel plugin:
97
</p>
10-
<div>
11-
<pre class="highlight">import Vue from 'vue';
8+
<pre class="highlight">import Vue from 'vue';
129
import VueSlideoutPanel from 'vue2-slideout-panel';
1310

1411
Vue.use(VueSlideoutPanel);</pre>
15-
<p>
16-
2) In your HTML add the component:
17-
</p>
18-
<div class="highlight">
19-
<pre class="highlight">&lt;slideout-panel&gt;&lt;/slideout-panel&gt;</pre>
20-
</div>
21-
<p>
22-
3) Launch a panel from your component:
23-
</p>
24-
<div class="highlight">
25-
<pre class="highlight">
12+
<p>
13+
2) In your HTML add the component:
14+
</p>
15+
<div class="highlight">
16+
<pre class="highlight">&lt;slideout-panel&gt;&lt;/slideout-panel&gt;</pre>
17+
</div>
18+
<p>
19+
3) Launch a panel from your component:
20+
</p>
21+
<pre class="highlight">
2622
methods: {
2723
showPanel() {
2824
const panel1Handle = this.$showPanel({
@@ -39,12 +35,16 @@ <h2>Usage</h2>
3935
}
4036
}
4137
</pre>
42-
<div class="alert">
43-
<p>
44-
<code>'your-component-name'</code> just needs to be the name of a valid component that you have registered with Vue like this:
45-
<code>Vue.component('your-component-name', {})</code>
46-
</p>
47-
</div>
48-
</div>
38+
<div class="alert">
39+
<p>
40+
<code>'your-component-name'</code> just needs to be the name of a valid component that you have registered with Vue like this:
41+
<code>Vue.component('your-component-name', {})</code>
42+
</p>
4943
</div>
44+
<p>
45+
The <code>$showPanel()</code> method returns a <code>PanelResult</code> object.
46+
</p>
47+
<p>
48+
<router-link :to="{ name : 'PanelResult' }">Learn more about the <code>PanelResult</code> object here.</router-link>
49+
</p>
5050
</div>

‎docs-src/components/Panel1/index.vue

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template src="./template.html">
2+
</template>
3+
4+
<script>
5+
export default {
6+
name: 'panel-1',
7+
data() {
8+
return {}
9+
},
10+
methods: {}
11+
};
12+
</script>
13+
14+
<style lang="less">
15+
#panel-1 {
16+
padding: 45px;
17+
}
18+
</style>

‎docs-src/components/Panel1/template.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<div id="panel-1">
2+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id tempus lorem. Cras ornare egestas mi in mattis. Sed volutpat velit sapien, eget suscipit quam tincidunt id. Vivamus cursus lorem lectus, a convallis turpis suscipit sed. Suspendisse
3+
turpis sapien, vestibulum id tempor in, imperdiet sit amet orci. Vivamus nisl sem, mollis et blandit vitae, auctor quis nulla. Curabitur sem est, faucibus a tempor id, tempor non justo. Fusce aliquet est vel libero elementum, ac euismod libero
4+
molestie. Morbi dignissim ullamcorper mi, ac interdum magna volutpat sit amet. Mauris pulvinar ligula quis augue pretium, ac vulputate nibh laoreet. Sed sed efficitur dui, pulvinar congue ex. Sed venenatis nibh eu eros sagittis porta. Sed sed
5+
maximus dui. Mauris ullamcorper lacus vitae dolor maximus, eget consectetur purus venenatis. In laoreet venenatis metus, a bibendum libero rhoncus id.
6+
7+
Aenean nisl quam, aliquam vitae venenatis eu, consectetur at metus. Nunc rutrum, dui tempor vehicula tincidunt, odio turpis faucibus risus, at feugiat turpis leo eget arcu. Aenean vitae nunc erat. Pellentesque sed est nunc. Aenean tristique, arcu
8+
at pellentesque finibus, elit tortor aliquam velit, sed viverra nisl urna sed mauris. Donec viverra, urna nec tempor ornare, leo enim sollicitudin orci, id volutpat risus lorem ac leo. Ut eu ultrices est. Aenean eros neque, interdum ut nibh sed,
9+
mollis blandit risus. Nulla ac volutpat arcu. Aenean lobortis pharetra ligula ut iaculis.
10+
11+
Nunc elit tortor, facilisis eu fringilla nec, luctus non tortor. Quisque euismod euismod erat, sit amet finibus magna sagittis nec. Aenean pulvinar quam ac mi dignissim dignissim. In dapibus efficitur turpis, efficitur tristique sapien mollis at.
12+
Cras quis leo consequat, ultrices massa in, suscipit mauris. Nullam dictum laoreet sapien, nec sagittis leo finibus vitae. Suspendisse lobortis metus tortor, et maximus purus condimentum a. Quisque iaculis aliquam ipsum vitae finibus. Fusce eu
13+
iaculis elit, sed vulputate felis.
14+
15+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id tempus lorem. Cras ornare egestas mi in mattis. Sed volutpat velit sapien, eget suscipit quam tincidunt id. Vivamus cursus lorem lectus, a convallis turpis suscipit sed. Suspendisse
16+
turpis sapien, vestibulum id tempor in, imperdiet sit amet orci. Vivamus nisl sem, mollis et blandit vitae, auctor quis nulla. Curabitur sem est, faucibus a tempor id, tempor non justo. Fusce aliquet est vel libero elementum, ac euismod libero
17+
molestie. Morbi dignissim ullamcorper mi, ac interdum magna volutpat sit amet. Mauris pulvinar ligula quis augue pretium, ac vulputate nibh laoreet. Sed sed efficitur dui, pulvinar congue ex. Sed venenatis nibh eu eros sagittis porta. Sed sed
18+
maximus dui. Mauris ullamcorper lacus vitae dolor maximus, eget consectetur purus venenatis. In laoreet venenatis metus, a bibendum libero rhoncus id.
19+
20+
Aenean nisl quam, aliquam vitae venenatis eu, consectetur at metus. Nunc rutrum, dui tempor vehicula tincidunt, odio turpis faucibus risus, at feugiat turpis leo eget arcu. Aenean vitae nunc erat. Pellentesque sed est nunc. Aenean tristique, arcu
21+
at pellentesque finibus, elit tortor aliquam velit, sed viverra nisl urna sed mauris. Donec viverra, urna nec tempor ornare, leo enim sollicitudin orci, id volutpat risus lorem ac leo. Ut eu ultrices est. Aenean eros neque, interdum ut nibh sed,
22+
mollis blandit risus. Nulla ac volutpat arcu. Aenean lobortis pharetra ligula ut iaculis.
23+
24+
Nunc elit tortor, facilisis eu fringilla nec, luctus non tortor. Quisque euismod euismod erat, sit amet finibus magna sagittis nec. Aenean pulvinar quam ac mi dignissim dignissim. In dapibus efficitur turpis, efficitur tristique sapien mollis at.
25+
Cras quis leo consequat, ultrices massa in, suscipit mauris. Nullam dictum laoreet sapien, nec sagittis leo finibus vitae. Suspendisse lobortis metus tortor, et maximus purus condimentum a. Quisque iaculis aliquam ipsum vitae finibus. Fusce eu
26+
iaculis elit, sed vulputate felis.
27+
</div>

‎docs-src/components/PanelResult/index.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template src="./template.html">
2+
</template>
3+
4+
<script>
5+
export default {
6+
name: 'panel-result',
7+
data() {
8+
return {}
9+
},
10+
methods: {}
11+
};
12+
</script>
13+
<style lang="less">
14+
</style>

‎docs-src/components/PanelResult/template.html

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<div id="panel-result">
2+
<h2>Panel Result</h2>
3+
<p>
4+
The <code>$showPanel</code> method returns a <code>PanelResult</code> object.
5+
</p>
6+
<pre class="highlight">
7+
methods: {
8+
showPanel() {
9+
const panelResult = this.$showPanel({
10+
component: 'your-component-name'
11+
});
12+
}
13+
}</pre>
14+
<p>
15+
The <code>PanelResult</code> object allows you to show and hide the panel programatically.
16+
</p>
17+
<p>
18+
Just store the <code>PanelResult</code> to your Vue component and use a method to call <code>hide()</code>.
19+
</p>
20+
<pre class="highlight">
21+
methods: {
22+
showPanel() {
23+
this.panelResult = this.$showPanel({
24+
component: 'your-component-name'
25+
});
26+
},
27+
hidePanel() {
28+
this.panelResult.hide();
29+
}
30+
}</pre>
31+
<p>
32+
You can also call <code>show()</code> to re-show a panel.
33+
</p>
34+
<pre class="highlight">
35+
methods: {
36+
showPanel() {
37+
if (this.panelResult) {
38+
this.panelResult.show();
39+
40+
return;
41+
}
42+
43+
this.panelResult = this.$showPanel({
44+
component: 'your-component-name'
45+
});
46+
}
47+
}</pre>
48+
<p>
49+
The <code>PanelResult</code> object also contains a <code>promise</code> property, which is a <code>Promise</code>.
50+
</p>
51+
<p>
52+
You can use this promise to receive data from your panel component.
53+
</p>
54+
<pre class="highlight">
55+
methods: {
56+
showPanel() {
57+
const panelResult = this.$showPanel({
58+
component: 'your-component-name'
59+
});
60+
61+
panelResult.promise
62+
.then(result => {
63+
//result is whatever you're panel component passes to <code>this.$emit("closePanel", {})</code>
64+
});
65+
}
66+
}</pre>
67+
</div>

0 commit comments

Comments
 (0)