Image Preview
Src
URL of the image for preview.
<script setup lang="ts">
import { NmorphImagePreview } from "@nmorph/nmorph-ui-kit";
import { Spring, Summer, Autumn, Winter } from "@/assets/images";
</script><template>
<div class="image-preview-src-overview">
<NmorphImagePreview
:src="Spring"
:width="76"
:height="76"
preview-width="min(92vw, 840px)"
preview-height="min(72vh, 560px)"
/>
<NmorphImagePreview
:src="[Summer, Spring, Winter, Autumn]"
:width="76"
:height="76"
preview-width="min(92vw, 840px)"
preview-height="min(72vh, 560px)"
/>
<NmorphImagePreview
:src="[Summer, Spring, Winter, Autumn]"
trigger-view="gallery"
:trigger-limit="3"
:width="108"
:height="108"
preview-width="min(92vw, 840px)"
preview-height="min(72vh, 560px)"
/>
</div>
</template>Model value
Controls the visibility of the image preview.
<script setup lang="ts">
import { NmorphImagePreview, NmorphButton } from "@nmorph/nmorph-ui-kit";
import { Winter } from "@/assets/images";
const show = ref(false);
const showHandler = () => {
show.value = true;
};
</script><template>
<div class="image-preview-model-value-overview">
<NmorphImagePreview
v-model="show"
:src="Winter"
:width="76"
:height="76"
preview-width="min(92vw, 840px)"
preview-height="min(72vh, 560px)"
/>
<NmorphButton text="Show" design="plain" @click="showHandler" />
</div>
</template>Initial Index
Defines the initial index of the image when there are multiple images.
<script setup lang="ts">
import { NmorphImagePreview } from "@nmorph/nmorph-ui-kit";
import { Spring, Summer, Autumn, Winter } from "@/assets/images";
</script><template>
<div class="image-preview-initial-index-overview">
<NmorphImagePreview
:src="[Summer, Spring, Winter, Autumn]"
:initial-index="3"
:width="76"
:height="76"
preview-width="min(92vw, 840px)"
preview-height="min(72vh, 560px)"
/>
</div>
</template>