Flutter教程

ion-thumbnail

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4媒体组件ion-thumbnail对项目进行布局。

ion-thumbnail官方文档地址:https://ionicframework.com/docs/api/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.

ion-thumbnail 用法(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 Thumbnailion-label>
ion-item>
import React from 'react';

import { IonThumbnail, IonItem, IonLabel } from '@ionic/react';

const Example: React.SFC<{}> = () => (
  <>
    <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 ThumbnailIonLabel>
    IonItem>
  >
);

export default Example;

ion-thumbnail中的CSS 自定义属性

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