Skip to content

Commit 6de69c7

Browse files
pexea12pexea12
authored
Merge pull request #55 from vtalbot/path-1
Add slots and props to customize Lightbox.
2 parents c02f370 + a508830 commit 6de69c7

File tree

4 files changed

+149
-35
lines changed

4 files changed

+149
-35
lines changed

‎README.md

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,36 @@ How to use:
155155
<td>0</td>
156156
<td>Minimum length unto end to emit load more event</td>
157157
</tr>
158+
<tr>
159+
<td>closeText</td>
160+
<td>String</td>
161+
<td>Close (Esc)</td>
162+
<td>Text for the close button</td>
163+
</tr>
164+
<tr>
165+
<td>previousText</td>
166+
<td>String</td>
167+
<td>Previous</td>
168+
<td>Text for the previous image button</td>
169+
</tr>
170+
<tr>
171+
<td>nextText</td>
172+
<td>String</td>
173+
<td>Next</td>
174+
<td>Text for the next image button</td>
175+
</tr>
176+
<tr>
177+
<td>previousThumbText</td>
178+
<td>String</td>
179+
<td>Previous</td>
180+
<td>Text for the previous thumb image button</td>
181+
</tr>
182+
<tr>
183+
<td>nextThumbText</td>
184+
<td>String</td>
185+
<td>Next</td>
186+
<td>Text for the next thumb image button</td>
187+
</tr>
158188
</tbody>
159189
</table>
160190

@@ -191,6 +221,49 @@ How to use:
191221
</tbody>
192222
</table>
193223

224+
### Slots
225+
226+
#### close
227+
The content of the close button.
228+
229+
#### footer
230+
The content of the footer under the image.
231+
232+
##### slot-scopes
233+
<table>
234+
<thead>
235+
<tr>
236+
<th>name</th>
237+
<th>type</th>
238+
<th>description</th>
239+
</tr>
240+
</thead>
241+
<tbody>
242+
<tr>
243+
<td>current</td>
244+
<td>integer</td>
245+
<td>Number of the current image displayed</td>
246+
</tr>
247+
<tr>
248+
<td>total</td>
249+
<td>integer</td>
250+
<td>Numbers of the images</td>
251+
</tr>
252+
</tbody>
253+
</table>
254+
255+
#### previous
256+
The previous button on the main image.
257+
258+
#### next
259+
The next button on the main image.
260+
261+
#### previousThumb
262+
The previous button on the thumbs list.
263+
264+
#### nextThumb
265+
The next button on the thumbs list.
266+
194267
### Events
195268

196269
- `onOpened(value)`: `true` to emit when the lightbox is opened and `false` when it is closed.

‎src/App.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
ref="lightbox"
1919
:show-caption="true"
2020
:show-light-box="false"
21-
></LightBox>
21+
>
22+
</LightBox>
2223
</div>
2324
</div>
2425
</template>

‎src/components/script.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,31 @@ export default {
5959
type: Number,
6060
default: 0
6161
},
62+
63+
closeText: {
64+
type: String,
65+
default: 'Close (Esc)'
66+
},
67+
68+
previousText: {
69+
type: String,
70+
default: 'Previous',
71+
},
72+
73+
nextText: {
74+
type: String,
75+
default: 'Next',
76+
},
77+
78+
previousThumbText: {
79+
type: String,
80+
default: 'Previous'
81+
},
82+
83+
nextThumbText: {
84+
type: String,
85+
default: 'Next'
86+
},
6287
},
6388

6489
data() {

‎src/components/template.html

Lines changed: 49 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,17 @@
99
<div class="vue-lb-header">
1010
<span></span>
1111
<button
12-
type="button"
13-
title="Close (Esc)"
14-
class="vue-lb-button-close"
12+
type="button"
13+
:title="closeText"
14+
class="vue-lb-button-close"
1515
>
16-
<span>
17-
<svg fill="white" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;">
18-
<path d="M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4 L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1 c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1 c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z"></path>
19-
</svg>
20-
</span>
16+
<slot name="close">
17+
<span>
18+
<svg fill="white" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;">
19+
<path d="M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4 L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1 c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1 c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z"></path>
20+
</svg>
21+
</span>
22+
</slot>
2123
</button> <!-- .vue-lb-button-close -->
2224

2325
</div> <!-- .vue-lb-header -->
@@ -46,7 +48,12 @@
4648
<div class="vue-lb-footer">
4749
<div class="vue-lb-footer-info"></div>
4850
<div class="vue-lb-footer-count">
49-
{{ select + 1 }}/{{ images.length }}
51+
<slot name="footer"
52+
:current="select + 1"
53+
:total="images.length"
54+
>
55+
{{ select + 1 }} / {{ images.length }}
56+
</slot>
5057
</div>
5158
</div>
5259

@@ -58,14 +65,16 @@
5865
v-if="images.length > 1"
5966
type="button"
6067
class="vue-lb-thumbnail-arrow vue-lb-thumbnail-left"
61-
title="Previous"
68+
:title="previousThumbText"
6269
@click.stop="previousImage()"
6370
>
64-
<span>
65-
<svg fill="white" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512">
66-
<path d="M213.7,256L213.7,256L213.7,256L380.9,81.9c4.2-4.3,4.1-11.4-0.2-15.8l-29.9-30.6c-4.3-4.4-11.3-4.5-15.5-0.2L131.1,247.9 c-2.2,2.2-3.2,5.2-3,8.1c-0.1,3,0.9,5.9,3,8.1l204.2,212.7c4.2,4.3,11.2,4.2,15.5-0.2l29.9-30.6c4.3-4.4,4.4-11.5,0.2-15.8 L213.7,256z"></path>
67-
</svg>
68-
</span>
71+
<slot name="previousThumb">
72+
<span>
73+
<svg fill="white" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512">
74+
<path d="M213.7,256L213.7,256L213.7,256L380.9,81.9c4.2-4.3,4.1-11.4-0.2-15.8l-29.9-30.6c-4.3-4.4-11.3-4.5-15.5-0.2L131.1,247.9 c-2.2,2.2-3.2,5.2-3,8.1c-0.1,3,0.9,5.9,3,8.1l204.2,212.7c4.2,4.3,11.2,4.2,15.5-0.2l29.9-30.6c4.3-4.4,4.4-11.5,0.2-15.8 L213.7,256z"></path>
75+
</svg>
76+
</span>
77+
</slot>
6978
</button>
7079

7180
<div
@@ -82,43 +91,49 @@
8291
v-if="images.length > 1"
8392
type="button"
8493
class="vue-lb-thumbnail-arrow vue-lb-thumbnail-right"
85-
title="Next"
94+
:title="nextThumbText"
8695
@click.stop="nextImage()"
8796
>
88-
<span>
89-
<svg fill="white" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512">
90-
<path d="M298.3,256L298.3,256L298.3,256L131.1,81.9c-4.2-4.3-4.1-11.4,0.2-15.8l29.9-30.6c4.3-4.4,11.3-4.5,15.5-0.2l204.2,212.7 c2.2,2.2,3.2,5.2,3,8.1c0.1,3-0.9,5.9-3,8.1L176.7,476.8c-4.2,4.3-11.2,4.2-15.5-0.2L131.3,446c-4.3-4.4-4.4-11.5-0.2-15.8 L298.3,256z"></path>
91-
</svg>
92-
</span>
97+
<slot name="nextThumb">
98+
<span>
99+
<svg fill="white" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512">
100+
<path d="M298.3,256L298.3,256L298.3,256L131.1,81.9c-4.2-4.3-4.1-11.4,0.2-15.8l29.9-30.6c4.3-4.4,11.3-4.5,15.5-0.2l204.2,212.7 c2.2,2.2,3.2,5.2,3,8.1c0.1,3-0.9,5.9-3,8.1L176.7,476.8c-4.2,4.3-11.2,4.2-15.5-0.2L131.3,446c-4.3-4.4-4.4-11.5-0.2-15.8 L298.3,256z"></path>
101+
</svg>
102+
</span>
103+
</slot>
93104
</button>
94105
</div> <!-- .vue-lb-thumbnail -->
95106
</div>
96107
<button
97108
v-if="images.length > 1"
98109
type="button"
99110
class="vue-lb-arrow vue-lb-left"
100-
title="Previous"
111+
:title="previousText"
101112
@click.stop="previousImage()"
102113
>
103-
<span>
104-
<svg fill="white" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512">
105-
<path d="M213.7,256L213.7,256L213.7,256L380.9,81.9c4.2-4.3,4.1-11.4-0.2-15.8l-29.9-30.6c-4.3-4.4-11.3-4.5-15.5-0.2L131.1,247.9 c-2.2,2.2-3.2,5.2-3,8.1c-0.1,3,0.9,5.9,3,8.1l204.2,212.7c4.2,4.3,11.2,4.2,15.5-0.2l29.9-30.6c4.3-4.4,4.4-11.5,0.2-15.8 L213.7,256z"></path>
106-
</svg>
107-
</span>
114+
<slot name="previous">
115+
<span>
116+
<svg fill="white" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512">
117+
<path d="M213.7,256L213.7,256L213.7,256L380.9,81.9c4.2-4.3,4.1-11.4-0.2-15.8l-29.9-30.6c-4.3-4.4-11.3-4.5-15.5-0.2L131.1,247.9 c-2.2,2.2-3.2,5.2-3,8.1c-0.1,3,0.9,5.9,3,8.1l204.2,212.7c4.2,4.3,11.2,4.2,15.5-0.2l29.9-30.6c4.3-4.4,4.4-11.5,0.2-15.8 L213.7,256z"></path>
118+
</svg>
119+
</span>
120+
</slot>
108121
</button>
109122

110123
<button
111124
v-if="images.length > 1"
112125
type="button"
113126
class="vue-lb-arrow vue-lb-right"
114-
title="Next"
127+
:title="nextText"
115128
@click.stop="nextImage()"
116129
>
117-
<span>
118-
<svg fill="white" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" xml:space="preserve">
119-
<path d="M298.3,256L298.3,256L298.3,256L131.1,81.9c-4.2-4.3-4.1-11.4,0.2-15.8l29.9-30.6c4.3-4.4,11.3-4.5,15.5-0.2l204.2,212.7 c2.2,2.2,3.2,5.2,3,8.1c0.1,3-0.9,5.9-3,8.1L176.7,476.8c-4.2,4.3-11.2,4.2-15.5-0.2L131.3,446c-4.3-4.4-4.4-11.5-0.2-15.8 L298.3,256z"></path>
120-
</svg>
121-
</span>
130+
<slot name="next">
131+
<span>
132+
<svg fill="white" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" xml:space="preserve">
133+
<path d="M298.3,256L298.3,256L298.3,256L131.1,81.9c-4.2-4.3-4.1-11.4,0.2-15.8l29.9-30.6c4.3-4.4,11.3-4.5,15.5-0.2l204.2,212.7 c2.2,2.2,3.2,5.2,3,8.1c0.1,3-0.9,5.9-3,8.1L176.7,476.8c-4.2,4.3-11.2,4.2-15.5-0.2L131.3,446c-4.3-4.4-4.4-11.5-0.2-15.8 L298.3,256z"></path>
134+
</svg>
135+
</span>
136+
</slot>
122137
</button>
123138
</div> <!-- .vue-lb-container -->
124-
</div>
139+
</div>

0 commit comments

Comments
 (0)