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.
Basic Usage
Item Thumbnails
Theming
CSS Custom Properties
Properties
mode
| Description | The mode determines the platform behaviors of the component. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
theme
| Description | The theme determines the visual appearance of the component. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | theme |
| Type | "ios" ｜ "md" ｜ "ionic" |
| Default | undefined |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
| Name | Description |
|---|---|
--border-radius | Border radius of the thumbnail |
--size | Size of the thumbnail |
Slots
No slots available for this component.