svcm/oa
1
0
Fork 0
mirror of https://git.hmsn.ink/kospo/svcm/oa.git synced 2026-03-20 07:53:48 +09:00
Code Issues Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
bangae1
2025-05-24 01:49:48 +09:00
commit 62abbcf4eb
2376 changed files with 325522 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
documentation/plugins/gallery/gallery-images-curved-documentation.md Normal file
View File

@@ -0,0 +1,63 @@
---
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
---
### Curved 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 `5` 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="5" />
</template>
```
<!--/code-->
<!--example-->
<VPhotosSwipe :items="frontmatter.items" thumbnailRadius="5" />
<!--/example-->

62
documentation/plugins/gallery/gallery-images-documentation.md Normal file
View File

@@ -0,0 +1,62 @@
---
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
---
### Thumbnail Gallery
We wrote a custom Vue wrapper for the `Photo Swipe` library so it makes it easy
for you to create image galleries seamlessly. Pass an array of `items` to
generate your gallery.
<!--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" />
</template>
```
<!--/code-->
<!--example-->
<VPhotosSwipe :items="frontmatter.items" />
<!--/example-->

36
documentation/plugins/gallery/gallery-images-larger-documentation.md Normal file
View File

@@ -0,0 +1,36 @@
---
items:
- src: http://via.placeholder.com/600x400
thumbnail: http://via.placeholder.com/200x150
w: 600
h: 400
alt: 'optional alt attribute for thumbnail image'
- src: http://via.placeholder.com/1200x900
thumbnail: http://via.placeholder.com/200x150
w: 1200
h: 900
- src: http://via.placeholder.com/800x600
thumbnail: http://via.placeholder.com/200x150
w: 800
h: 600
---
### Large Thumbnails
Thumbnails can be the size you want based on the thumbnail image real size.
<!--code-->
```vue
<template>
<VPhotosSwipe :items="items" thumbnail-radius="5" />
</template>
```
<!--/code-->
<!--example-->
<VPhotosSwipe :items="frontmatter.items" thumbnail-radius="5" />
<!--/example-->

63
documentation/plugins/gallery/gallery-images-rounded-documentation.md Normal file
View File

@@ -0,0 +1,63 @@
---
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-->