mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 08:13:40 +09:00
64 lines
1.4 KiB
Markdown
64 lines
1.4 KiB
Markdown
---
|
|
items:
|
|
- src: http://via.placeholder.com/600x400
|
|
thumbnail: http://via.placeholder.com/60x40
|
|
w: 600
|
|
h: 400
|
|
alt: 'optional alt attribute for thumbnail image'
|
|
- src: http://via.placeholder.com/1200x900
|
|
thumbnail: http://via.placeholder.com/120x90
|
|
w: 1200
|
|
h: 900
|
|
- src: http://via.placeholder.com/800x600
|
|
thumbnail: http://via.placeholder.com/80x60
|
|
w: 800
|
|
h: 600
|
|
---
|
|
|
|
### Rounded Thumbnails
|
|
|
|
We wrote a custom Vue wrapper for the `Photo Swipe` library so it makes it easy
|
|
for you to create image galleries seamlessly. Thumbnails border radius is
|
|
configurable. Pass a value of `full` to the `thumbnailRadius` to show curved
|
|
borders.
|
|
|
|
<!--code-->
|
|
|
|
```vue
|
|
<script setup lang="ts">
|
|
const items = [
|
|
{
|
|
src: 'http://via.placeholder.com/600x400',
|
|
thumbnail: 'http://via.placeholder.com/60x40',
|
|
w: 600,
|
|
h: 400,
|
|
alt: 'optional alt attribute for thumbnail image',
|
|
},
|
|
{
|
|
src: 'http://via.placeholder.com/1200x900',
|
|
thumbnail: 'http://via.placeholder.com/120x90',
|
|
w: 1200,
|
|
h: 900,
|
|
},
|
|
{
|
|
src: 'http://via.placeholder.com/800x600',
|
|
thumbnail: 'http://via.placeholder.com/80x60',
|
|
w: 800,
|
|
h: 600,
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<VPhotosSwipe :items="items" thumbnail-radius="full" />
|
|
</template>
|
|
```
|
|
|
|
<!--/code-->
|
|
|
|
<!--example-->
|
|
|
|
<VPhotosSwipe :items="frontmatter.items" thumbnail-radius="full" />
|
|
|
|
<!--/example-->
|