search

material-components / material-web

Material Design Web Components
https://material-web.dev
Apache License 2.0
9.2k stars 875 forks source link

md-tabs: add tab panels with animations #5373

Open shhdharmen opened 8 months ago

shhdharmen commented 8 months ago

What is affected?

Component

Description

When I switch tabs, I would expect tab-panels to animate the same way (but opposite direction) as md-primary-tab or md-secondary-tab, however it does not happen.

Reproduction

Check the official playground at https://material-web.dev/components/tabs/stories/, no tab-panels are animated, they just appear/dis-appear.

Workaround

I have not found a workaround

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

1.1.1

Browser/OS/Node environment

Browser: Microsoft Edge Version 120.0.2210.91 (Official build) (64-bit)

asyncLiz commented 8 months ago

There are examples of this in spec, but I think this may be part of the "add tab panels" feature we want to support.

For those tab panels, we could add built-in animation support as panels change.

shhdharmen commented 8 months ago

@asyncLiz correct, I was asking for built-in animation, like when we switch tabs, tab-panel should animate smoothly from left to right or opposite. Because other components in material-web, like dialogues, have the built-in animation.

Even flutter 's tabs have animations built-in. https://docs.flutter.dev/cookbook/design/tabs#interactive-example