Style slot size

@fortunella wrote:

I have a <ion-list> with a number of <ion-item> entries. Each is of this structure:

<ion-item text-wrap (click)="itemTapped($event, item.uuid)">
  <ion-thumbnail slot="start" class="tile-thumbnail">
    <img src="{{item.imageUrl}}" class="tile-image" />
  </ion-thumbnail>
  <ion-label>
    <h2 class="tile-title">{{item.title}}</h2>
    <p class="tile-text" [innerHTML]="item.text"></p>
  </ion-label>
</ion-item>

The thumbnail is created on the left due to slot="start" with a size of 56px. I want to change the size to 100px, but I don’t know how. When I inspect the DOM I see a styling

::slotted(ion-thumbnail) {
    width: 56px;
    height: 56px;
}

When I change these values in the dev tools it has the effect that I want to achieve. But I cannot get it working from the CSS. I also tried

ion-thumbnail {
  --size: 100px;
}

but no effect either. How can I change the size of the slot/thumbnail?

Posts: 1

Participants: 1

Read full topic