ion-thumbnail
コンテンツ
Thumbnailsは、通常、画像またはアイコンをラップする四角形のコンポーネントです。これを使用すると、大きな画像のグループを簡単に表示したり、フルサイズのイメージのプレビューを表示したりできます。
Thumbnailsは、単独で使用することも、任意の要素の内部で使用することもできます。ion-item
の内部に配置すると、Thumbnailsのサイズが親コンポーネントに合わせて変更されます。Thumbnailsをアイテムの左側または右側に配置するには、slotをそれぞれ start
または end
に設定します。
使い方
- Angular
- Javascript
- React
- Stencil
- Vue
<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>
<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>
);
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>
];
}
}
<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>
プロパティ
No properties available for this component.
イベント
No events available for this component.
メソッド
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSSカスタムプロパティ
Name | Description |
---|---|
--border-radius | Border radius of the thumbnail |
--size | Size of the thumbnail |
Slots
No slots available for this component.