Add code examples for AppStore-like expanding cards

[BerkeAras]

Feature Request

Ionic version:

[x] 5.x

Describe the Feature Request

An AppStore like expanding card component would be great.

Describe Preferred Solution

The IonCard Component should be clickable and should be expanding. A component like ion-card-detailed-content could be placed in IonCard, and on click IonCard should expanding, and ion-card-detailed-content should be visible.

Describe Alternatives

At the moment, there is no alternative as far as I know.

Additional Context Here is an example of another mobile framework (of course ionic is better.): Just click on cards expandable: https://framework7.io/kitchen-sink/core/?theme=ios

[brandyscarney]

Thanks for the issue! Maybe something like ion-card-details? @liamdebeasi thoughts on the animation?

[BerkeAras]

ion-card-details is better, yeah.

[BerkeAras]

@liamdebeasi look at the link i've placed

[DwieDima]

@brandyscarney, @liamdebeasi This is one feature i would love to see in ionic! I also had some thoughts on how this could be set up.

• This could be achieved by using <ion-card-details> as component
• or creating card details programmatically (similar to PopoverController).

Approach using ion-card-details component

• Properties:
  • blur: boolean / default true -> blurs the background.
  • backdropDismiss: boolean /default true -> whether card can be dismissed by backdrop or not.
  • type: 'modal' | 'sheet' default 'modal' -> whether the card should be presented as sheet or modal on PadOS.
  • swipeToClose: boolean / default true -> whether the expanded card can be dismissed on top or not.
  • closeButton: boolean / default true -> whether the round close button is shown or not. (afaik the button color is only dark or light, depending on card background)
  • closeButtonBlur: boolean / default false -> whether blur to close button is applied or not.
• Methods:
  • toggle -> close/open card programmatically
  • open -> open card programmatically
  • close -> close card programmatically
  • isOpen -> boolean whether card is expanded or not

Example without routing

  <ion-card>
    <img src="https://ionicframework.com/docs/demos/api/card/madison.jpg" />
    <ion-card-header>
      <ion-card-subtitle>Destination</ion-card-subtitle>
      <ion-card-title>Madison, WI</ion-card-title>
    </ion-card-header>
    <ion-card-details blur="true" backdropDismiss="true" type="modal">
      <!-- any content -->
      Founded in 1829 on an isthmus between Lake Monona and Lake Mendota,
      Madison was named the capital of the Wisconsin Territory in 1836.
    </ion-card-details>
  </ion-card>

Example with routing

There should also be a possibility to combine this with <ion-nav></ion-nav>, so that navigation is also possible within an expanded ion-card. This can be seen on the AppStore app.

  <ion-card>
     <!-- content from example without routing will be inside my-component.html -->
     <ion-nav [root]="myComponent">
  </ion-card>

Apprach creating it programmatically

HTML

  <ion-card #myCard (click)="onExpand(myCard)">
    <img src="https://ionicframework.com/docs/demos/api/card/madison.jpg" />
    <ion-card-header>
      <ion-card-subtitle>Destination</ion-card-subtitle>
      <ion-card-title>Madison, WI</ion-card-title>
    </ion-card-header>
  </ion-card>

TS

  public async onExpand(card: IonCard) {
    const expandedCard = await card.create({
      // MyComponent could contain only
      // <ion-nav [root]="MyCardDetailComponent">
      // to allow routing inside card
      // or regular component for no routing
      component: MyComponent,
      blur: true,
      backdropDismiss: true,
      type: 'sheet',
      swipeToClose: true,
      closeButton: true,
      closeButtonBlur: true,
    })

    return await expandedCard.present();
  }

In my opinion the programmatically apprach got one problem:

• the visible part (img, card-header, card-title...) is inside parent
• the rendered part inside another component

--> when expanded these two parts somehow must be merged as one page inside MyComponent to allow routing (see video navigation inside expanded card) I haven't come up with a solution to this problem yet.

I'm sure there's more to consider. Those would be my first thoughts on how to approach this.

Picture of card before expanded:

iPad

iPhone

Picture of card after expanded:

iPad (sheet)

iPad (modal)

iPhone

Video of expanded card animation:

sheet

• iPad
• iPhone

modal

• iPad

navigation inside expanded card

• iPad

[BerkeAras]

There are a few features which would make ionic much better! This is one of them.

[liamdebeasi]

Thanks for the feature request. I am a bit hesitant to make this part of the framework. The main reason is that there is no efficient way of doing this transition. I have experimented with a few approaches, but they all involve animating height/width/related properties. This results in the browser repainting the card every single frame.

When we add features to Ionic Framework, we add them knowing that they will perform well on devices we support. This animation will not perform well on older devices, and since the animation itself is inherently slow there will not be much we can do to optimize.

However, I am open to including instructions on how to do this on a per-application basis in the documentation. This would include step by step instructions, code snippets that you can modify to fit your application's needs, as well as notes on performance tradeoffs. Is that something people would be interested in?

[BerkeAras]

What about using Hardware Transitions? I think it would animate the transitions smooth.

[liamdebeasi]

What are "Hardware Transitions"?

[BerkeAras]

Sorry, meant Hardware Accerelation

[liamdebeasi]

Properties such as height and width cannot be hardware accelerated. The reason is that they physically change the geometry of the card. In other words, they resize the card, which potentially causes other elements to resize and move around. This results in the browser repainting the card every frame.

Properties such as transform and opacity can be hardware accelerated because they do not physically change the geometry of elements. However, I do not currently see a way to accomplish this transition with only transform and opacity.

[DwieDima]

However, I am open to including instructions on how to do this on a per-application basis in the documentation. This would include step by step instructions, code snippets that you can modify to fit your application's needs, as well as notes on performance tradeoffs. Is that something people would be interested in?

@liamdebeasi that would be great!

[liamdebeasi]

Since this will be added to the docs, I am going to move this to the ionic-docs repo.

[ivizzz]

Thanks for the feature request. I am a bit hesitant to make this part of the framework. The main reason is that there is no efficient way of doing this transition. I have experimented with a few approaches, but they all involve animating height/width/related properties. This results in the browser repainting the card every single frame.

When we add features to Ionic Framework, we add them knowing that they will perform well on devices we support. This animation will not perform well on older devices, and since the animation itself is inherently slow there will not be much we can do to optimize.

However, I am open to including instructions on how to do this on a per-application basis in the documentation. This would include step by step instructions, code snippets that you can modify to fit your application's needs, as well as notes on performance tradeoffs. Is that something people would be interested in?

https://framework7.io/kitchen-sink/core/?theme=ios check out this. its already available for framwork7

[EmilienRamos]

Any update about this feature ?

[ivizzz]

still not

[BerkeAras]

:(