search

MudBlazor / MudBlazor

Blazor Component Library based on Material design with an emphasis on ease of use. Mainly written in C# with Javascript kept to a bare minimum it empowers .NET developers to easily debug it if needed.
http://mudblazor.com
MIT License
7.22k stars 1.18k forks source link

Responsive Carousel In MudBlazor #8789

Open yazh21 opened 3 weeks ago

yazh21 commented 3 weeks ago

Bug type

Component

Component name

MudCarousel

What happened?

In my code with MudCarousel which has 2 MudCarouselItem and inside each MudCarouselItem it has 4 MudCards. My problem is when I view this in mobile view then MudCarouselItem's First MudCard is only visible others goes hidden unable to access or see. 2

Expected behavior

In mobile view i want my Carousel to act like that it shows one mudcard and arrow click left/right it should show prevoius/Next mudcard accordingly(one Mudcard at a time). That is in Mobile View, I want to see only one Mudcard which should act like MudCarouselItem enable to access other Mudcards using Prevoius and Next arrows. 3 4

Reproduction link

https://try.mudblazor.com/snippet/cacSEScGqwfTCzEt

Reproduction steps

  1. Trying shinking Screen to Mobile View Size. 2.only one Mudcard shows and other Mudcards goes hidden.

  2. ...

Relevant log output

No response

Version (bug)

6.19.1

Version (working)

No response

What browsers are you seeing the problem on?

Chrome

On which operating systems are you experiencing the issue?

Windows

Pull Request

Code of Conduct

Anu6is commented 3 weeks ago

This isn't a bug. The four cards are not separate MudCarouselItem components. The arrows navigate between carousel items, and in this case you only have two carousel items, each with four cards. The most the component would currently do in mobile view is stack the cards vertically instead of horizontally.

You may be able to dynamically generate your carousel items based on breakpoints/screen size but that'll be custom logic for you to implement

Anu6is commented 3 weeks ago

@yazh21 here's a simplistic version of what I think you expect https://try.mudblazor.com/snippet/cYcIuywezvstrCSi

yazh21 commented 3 weeks ago

@yazh21 here's a simplistic version of what I think you expect https://try.mudblazor.com/snippet/cYcIuywezvstrCSi

But My requirement is On desktop view, it must show Each MudCarouselItem with 4 MudCards and On Mobile View, it must show Each MudCarouselItem with 1 MudCard other MudCards Should act like Another MudCarouselItem. Any Way to Achieve it?

Anu6is commented 3 weeks ago

That is what this does. image

image image