ion-thumbnail

shadow

Contents

• Usage
• CSS Custom Properties

Thumbnails are square components that usually wrap an image or icon. They can be used to make it easier to display a group of larger images or provide a preview of the full-size image.

Thumbnails can be used by themselves or inside of any element. If placed inside of an ion-item, the thumbnail will resize to fit the parent component. To position a thumbnail on the left or right side of an item, set the slot to start or end, respectively.

Usage

Angular

<ion-thumbnail>  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"></ion-thumbnail>
<ion-item>  <ion-thumbnail slot="start">    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">  </ion-thumbnail>  <ion-label>Item Thumbnail</ion-label></ion-item>

Javascript

<ion-thumbnail>  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"></ion-thumbnail>
<ion-item>  <ion-thumbnail slot="start">    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">  </ion-thumbnail>  <ion-label>Item Thumbnail</ion-label></ion-item>

React

import React from 'react';import { IonThumbnail, IonItem, IonLabel, IonContent } from '@ionic/react';
export const ThumbnailExample: React.FC = () => (  <IonContent>    <IonThumbnail>      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />    </IonThumbnail>
    <IonItem>      <IonThumbnail slot="start">        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />      </IonThumbnail>      <IonLabel>Item Thumbnail</IonLabel>    </IonItem>  </IonContent>);

Stencil

import { Component, h } from '@stencil/core';
@Component({  tag: 'thumbnail-example',  styleUrl: 'thumbnail-example.css'})export class ThumbnailExample {  render() {    return [      <ion-thumbnail>        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>      </ion-thumbnail>,
      <ion-item>        <ion-thumbnail slot="start">          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>        </ion-thumbnail>        <ion-label>Item Thumbnail</ion-label>      </ion-item>    ];  }}

Vue

<template>  <ion-thumbnail>    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">  </ion-thumbnail>
  <ion-item>    <ion-thumbnail slot="start">      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">    </ion-thumbnail>    <ion-label>Item Thumbnail</ion-label>  </ion-item></template>
<script>import { IonItem, IonLabel, IonThumbnail } from '@ionic/vue';import { defineComponent } from 'vue';
export default defineComponent({  components: { IonItem, IonLabel, IonThumbnail }});</script>

CSS Custom Properties

Name	Description
--border-radius	Border radius of the thumbnail
--size	Size of the thumbnail