Components
Image Viewer
A lightbox: the picture over a dimmed page, with a small toolbar beneath it. Zoom is the reader's hand (half to three times, clamped), a quarter turn at a time rotates, Escape and the scrim close — the dialog machine carries the modal part. `open` may stay with the caller; left undefined the viewer keeps it to itself.
#Basic usage
<script setup lang="ts">
import { Button, ImageViewer } from "@bysages/vue";
import { ref } from "vue";
const SAMPLE = "https://picsum.photos/seed/elements-viewer/1600/1000";
const open = ref(false);
</script>
<template>
<div class="w-full">
<Button @click="open = true">Open viewer</Button>
<ImageViewer v-model:open="open" :src="SAMPLE" alt="A photograph from the archive" />
</div>
</template>
<script setup lang="ts">
import { Button, ImageViewer } from "@bysages/vue";
import { ref } from "vue";
const SAMPLE = "https://picsum.photos/seed/elements-viewer/1600/1000";
const open = ref(false);
</script>
<template>
<div class="w-full">
<Button variant="outline" @click="open = true">Open (no zoom)</Button>
<ImageViewer
v-model:open="open"
:src="SAMPLE"
alt="A photograph from the archive"
:zoomable="false"
/>
</div>
</template>
#Props
#ImageViewer
| Prop | Type | Default | Description |
|---|---|---|---|
src | String | — | |
alt | String | "" | — |
open | Boolean | undefined | — |
zoomable | Boolean | true | — |