ion-thumbnail
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
<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>
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>
);
CSS Custom Properties
Name | Description |
---|---|
--border-radius | Border radius of the thumbnail |
--size | Size of the thumbnail |