search

material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.15k stars 2.15k forks source link

Top App Bar Background Image and transformation #4740

Open zaheraldefai opened 5 years ago

zaheraldefai commented 5 years ago

Hi All,

I'm trying out the Top App Bar and it works wonderful. But I'm looking for two features that are described in the Top App Bar Guidelines:

Background Image

mio-design_assets_1UmsSQiiLgULeUnPsyvwdtixhQ7VfqRmN_topappbars-images

I didn't find out how to include a background image unless I change the CSS manually. But in my use case the image is always a different one and I won't like to change the CSS manually. I would like to make it in the same way like in the Card-component with Card-Media, which is the much cleaner way.

Transformation after scroll

mio-design_assets_1d3jb571H-QqU8rMvcvksU1e8-Di0lgu0_topappbars-behavior-scrolling-prominent-to-regular

Here is the exact Guideline description: "When scrolling up, prominent top app bars using imagery can transform into normal top app bars. They should not return to prominent mode until the user scrolls back to the top of the page."


My questions:

Best Regards, Zaher

moog16 commented 5 years ago

Hello! Thanks for opening the issue...This actually belongs more in the MDC Web repo as it concerns theming and Sass mixins. I'll move this issue to Web.

I think you did the correct thing here by manually doing it via CSS. I do not think we have this as a customization yet.

zaheraldefai commented 5 years ago

Hi @moog16, thanks for the quick reply. Does this mean there are future plans for offering these two features?

I'm asking because if there are plans then we would start with using the existing component and make some smaller css customization, so the migration to the newer version would be easier.

moog16 commented 5 years ago

I don't think we had a plan to add this to our API, but since it is in the spec we can add it. Are you available to open a PR?

zaheraldefai commented 5 years ago

Many thanks for adding it and thank you for offering me this chance to contribute to this project. Unfortunately, I have already too much on my plate and therefore I cannot take the time for this chance.

moog16 commented 5 years ago

No worries - thanks for letting us know! We'll keep the issue open anyways.