Image Tile

Narrative's image component

Small (32px)

Normal (64px)

Large (96px)

Selector

nio-image-tile

Props

Prop name	Type	Supported values	Default value
size	string	small | normal | large |	normal

Prop details:

:size

the size of the image

Events

This component preserves all events emitted by Vuetify's v-img component. See Vuetify's documentation for more details: https://vuetifyjs.com/en/components/images/

Additionally, the nio-image-tile component provides the following event emitters:

@mounted

Emits when the component's mounted lifecycle method is executed

@destroyed

Emits when the component's destroyed lifecycle method is executed

Slots

This component preserves all of the named slotes supported by Vuetify's v-img component. See Vuetify's documentation for more details.

Additionally, Tacklebox exposes the nio-img-placeholder slot, which implements the placeholder slot provided by Vuetify. Use in the following manner:

<nio-image-tile :src="..." lazy-src="placeholderSrc">
	<template v-slot:nio-image-placeholder>
		...
	</template>	
</nio-image-tile>

Examples

The following is a simple example of how to use this component in a Vue template:

<nio-image-tile :size="'large'" :src="imageSrc"></nio-image-tile>

Included here are live examples of this component in common configurations. Click below to view them.

Source Code

This component's source code is included for your reference