Как сделать адаптивную карусель в MudBlazor
Это MudCarousel, у которого есть 2 MudCarouselItem, а внутри каждого MudCarouselItem есть 4 MudCard. Моя проблема в том, что когда я просматриваю это в мобильном представлении, первая MudCard MudCarouselItem становится видимой, другие скрываются и не могут получить доступ или увидеть.
<MudCarousel Class = "mud-width-full" Style = "height:220px;" ShowArrows = "true" ShowBullets = "false" EnableSwipeGesture = "true" AutoCycle = "false" TData = "object">
<MudCarouselItem Transition = "@Transition.Slide">
<div class = "d-flex justify-content-center" style = "height:100%;">
<div class = "carousel-container">
<MudGrid>
<MudItem xs = "12" sm = "3" >
<MudCard Class = "hover-paper paper1" Style = "height: 210px;width:270px; margin-right:5px;" Elevation = "4">
<MudCardHeader style = "height: 75px; background-color:#FFF176; text-align:center;">
<CardHeaderContent>
<div style = "display: flex; justify-content: center; align-items: center;">
<div style = "flex-grow: 1;">
<MudText Typo = "Typo.caption" Color = "Color.Dark" style = "word-wrap: break-word;">
Application Name 1
</MudText>
</div>
<MudTooltip Text = "Name of IT Owners/Business" Arrow = "true" Placement = "Placement.Top">
<MudIconButton Icon = "@Icons.Material.Filled.Help" Size = "Size.Small" />
</MudTooltip>
</div>
</CardHeaderContent>
</MudCardHeader>
<MudCardContent style = "margin-bottom: 0; padding-bottom: 0;word-wrap: break-word;font-size:small;" >
</MudCardContent>
<MudCardActions></MudCardActions>
</MudCard>
</MudItem>
<MudItem xs = "12" sm = "3">
<MudCard Class = "hover-paper paper2" Style = "height: 210px;width:270px;margin-right:5px;" Elevation = "4">
<MudCardHeader style = "height: 75px; background-color:#F8BBD0;;text-align:center;">
<CardHeaderContent>
<div style = "display: flex; justify-content: center; align-items: center;">
<div style = "flex-grow: 1;">
<MudText Typo = "Typo.caption" Color = "Color.Dark" style = "word-wrap: break-word;">
Application Name 2
</MudText>
</div>
<MudTooltip Text = "Name of IT Owners/Business" Arrow = "true" Placement = "Placement.Top">
<MudIconButton Icon = "@Icons.Material.Filled.Help" Size = "Size.Small" />
</MudTooltip>
</div>
</CardHeaderContent>
</MudCardHeader>
<MudCardContent style = "margin-bottom: 0; padding-bottom: 0;word-wrap: break-word;font-size:small;">
</MudCardContent>
</MudCard>
</MudItem>
<MudItem xs = "12" sm = "3" >
<MudCard Class = "hover-paper paper3" Style = "height: 210px;width:270px; margin-right:5px;" Elevation = "4">
<MudCardHeader style = "height: 75px; background-color:#B3E5FC;text-align:center;">
<CardHeaderContent>
<div style = "display: flex; justify-content: center; align-items: center;">
<div style = "flex-grow: 1;">
<MudText Typo = "Typo.caption" Color = "Color.Dark" style = "word-wrap: break-word;">
Application Name 3
</MudText>
</div>
<MudTooltip Text = "Name of IT Owners/Business" Arrow = "true" Placement = "Placement.Top">
<MudIconButton Icon = "@Icons.Material.Filled.Help" Size = "Size.Small" />
</MudTooltip>
</div>
</CardHeaderContent>
</MudCardHeader>
<MudCardContent style = "margin-bottom: 0; padding-bottom: 0;word-wrap: break-word;font-size:small;">
</MudCardContent>
</MudCard>
</MudItem>
<MudItem xs = "12" sm = "3" >
<MudCard Class = "hover-paper paper4" Style = "height: 210px;width:270px; margin-right:5px;" Elevation = "4">
<MudCardHeader style = "height: 75px; background-color:#AED581 ;text-align:center;">
<CardHeaderContent>
<div style = "display: flex; justify-content: center; align-items: center;">
<div style = "flex-grow: 1;">
<MudText Typo = "Typo.caption" Color = "Color.Dark" style = "word-wrap: break-word;">
Application Name 4
</MudText>
</div>
<MudTooltip Text = "Name of IT Owners/Business" Arrow = "true" Placement = "Placement.Top">
<MudIconButton Icon = "@Icons.Material.Filled.Help" Size = "Size.Small" />
</MudTooltip>
</div>
</CardHeaderContent>
</MudCardHeader>
<MudCardContent style = "margin-bottom: 0; padding-bottom: 0;word-wrap: break-word;font-size:small;">
</MudCardContent>
</MudCard>
</MudItem>
</MudGrid>
</div>
</div>
</MudCarouselItem>
<MudCarouselItem Transition = "@Transition.Slide">
<div class = "d-flex justify-content-center" style = "height:100%;">
<div class = "carousel-container">
<MudGrid>
<MudItem xs = "12" sm = "3" >
<MudCard Class = "hover-paper paper1" Style = "height: 210px;width:250px; margin-right:5px;" Elevation = "4">
<MudCardHeader style = "height: 75px;background-color:#FFF176;;text-align:center;">
<CardHeaderContent>
<div style = "display: flex; justify-content: center; align-items: center;">
<div style = "flex-grow: 1;">
<MudText Typo = "Typo.caption" Color = "Color.Dark" style = "word-wrap: break-word;">
Application Name 5
</MudText>
</div>
<MudTooltip Text = "Name of IT Owners/Business" Arrow = "true" Placement = "Placement.Top">
<MudIconButton Icon = "@Icons.Material.Filled.Help" Size = "Size.Small" />
</MudTooltip>
</div>
</CardHeaderContent>
</MudCardHeader>
<MudCardContent style = "margin-bottom: 0; padding-bottom: 0;word-wrap: break-word;">
</MudCardContent>
</MudCard>
</MudItem>
<MudItem xs = "12" sm = "3" >
<MudCard Class = "hover-paper paper2" Style = "height: 210px;width:250px; margin-right:5px;" Elevation = "4">
<MudCardHeader style = "height: 75px;background-color:#F8BBD0;text-align:center;">
<CardHeaderContent>
<div style = "display: flex; justify-content: center; align-items: center;">
<div style = "flex-grow: 1;">
<MudText Typo = "Typo.caption" Color = "Color.Dark" style = "word-wrap: break-word;">
Application Name 6
</MudText>
</div>
<MudTooltip Text = "Name of IT Owners/Business" Arrow = "true" Placement = "Placement.Top">
<MudIconButton Icon = "@Icons.Material.Filled.Help" Size = "Size.Small" />
</MudTooltip>
</div>
</CardHeaderContent>
</MudCardHeader>
<MudCardContent style = "margin-bottom: 0; padding-bottom: 0;word-wrap: break-word;">
</MudCardContent>
</MudCard> </MudItem>
<MudItem xs = "12" sm = "3" >
<MudCard Class = "hover-paper paper3" Style = "height: 210px;width:250px; margin-right:5px;" Elevation = "4">
<MudCardHeader style = "height: 75px;background-color:#B3E5FC;text-align:center;">
<CardHeaderContent>
<div style = "display: flex; justify-content: center; align-items: center;">
<div style = "flex-grow: 1;">
<MudText Typo = "Typo.caption" Color = "Color.Dark" style = "word-wrap: break-word;">
Application Name 7
</MudText>
</div>
<MudTooltip Text = "Name of IT Owners/Business" Arrow = "true" Placement = "Placement.Top">
<MudIconButton Icon = "@Icons.Material.Filled.Help" Size = "Size.Small" />
</MudTooltip>
</div>
</CardHeaderContent>
</MudCardHeader>
<MudCardContent style = "margin-bottom: 0; padding-bottom: 0;word-wrap: break-word;">
</MudCardContent>
</MudCard>
</MudItem>
<MudItem xs = "12" sm = "3" >
<MudCard Class = "hover-paper paper4" Style = "height: 210px;width:250px; margin-right:5px;" Elevation = "4">
<MudCardHeader style = "height: 75px;background-color:#AED581 ;text-align:center;">
<CardHeaderContent>
<div style = "display: flex; justify-content: center; align-items: center;">
<div style = "flex-grow: 1;">
<MudText Typo = "Typo.caption" Color = "Color.Dark" style = "word-wrap: break-word;">
Application Name 8
</MudText>
</div>
<MudTooltip Text = "Name of IT Owners/Business" Arrow = "true" Placement = "Placement.Top">
<MudIconButton Icon = "@Icons.Material.Filled.Help" Size = "Size.Small" />
</MudTooltip>
</div>
</CardHeaderContent>
</MudCardHeader>
<MudCardContent style = "margin-bottom: 0; padding-bottom: 0;word-wrap: break-word;">
</MudCardContent>
</MudCard>
</MudItem></MudGrid>
</div>
</div>
</MudCarouselItem>
</MudCarousel>
В мобильном представлении я хочу, чтобы моя карусель вела себя так, что она показывает одну карточку и щелкает стрелку влево/вправо, она должна отображать предыдущую/следующую карточку соответственно (по одной карточке за раз). То есть в мобильном представлении я хочу видеть только одну карту Mudcard, которая должна действовать как MudCarouselItem и разрешать доступ к другим картам Mudcard с помощью стрелок «Назад» и «Далее».
Вид рабочего стола:
Мобильная версия:
try.mudblazor.com/snippet/cYcIuywezvstrCSi Если вы выполните это в режиме «рабочего стола», одновременно должно отображаться 4 элемента. Если вы перейдете в мобильный режим и выполните еще раз, он должен отображать по одному элементу за раз. Он не будет переключаться между видами (4 и 1), просто увеличивая или уменьшая размер экрана. При необходимости вы можете добавить прослушиватель точки останова.
—
29.04.2024 14:13
Введение в отзывчивый дизайн с использованием CSS
Поскольку число людей, пользующихся интернетом с помощью мобильных устройств, продолжает расти, важно, чтобы веб-сайты адаптировались к различным...
Ve It
Мире, где большая часть интернет-трафика приходится на мобильные устройства, отзывчивый веб-дизайн стал необходимостью. Отзывчивый сайт - это сайт,...
0
1
253
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Вы можете использовать IBrowserViewportService, чтобы определить, как должны отображаться элементы карусели. В этом полном примере кода я добавил три различных варианта рендеринга в зависимости от размера экрана (вы можете изменить их по мере необходимости). Основная логика показана ниже:
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await base.OnAfterRenderAsync(firstRender);
if (!firstRender) return;
_initialized = true;
var breakpoint = await BrowserViewportService.GetCurrentBreakpointAsync();
switch (breakpoint)
{
case Breakpoint.Xs:
case Breakpoint.Sm:
_itemGroups = ChunkList<TData>(Items, 1);
break;
case Breakpoint.Md:
_itemGroups = ChunkList<TData>(Items, PerRow / 2);
break;
default:
_itemGroups = ChunkList<TData>(Items, PerRow);
break;
}
StateHasChanged();
}
Параметр PerRow используется для определения того, сколько вы хотите отобразить (в вашем случае 4).IBrowserViewportService проверяет текущий размер экрана, а switch определяет, сколько элементов должно быть включено в каждый просмотр карусели.
- sm & xs — 1 объект за просмотр (мобильный)
- md — 2 элемента на просмотр (это можно удалить)
- по умолчанию — 4 элемента на просмотр (рабочий стол)
Примечание. Изменение размера экрана уже отрисованной карусели не приведет к обновлению количества элементов, отображаемых в строке. Количество элементов определяется исходным размером экрана (размером экрана при загрузке страницы).
Можем ли мы установить собственный вид (рабочий стол), например, для рабочего стола с большим экраном, такого как xl и xxl, установив 'switch (breakpoint) {case Breakpoint.xl: _itemGroups = ChunkList<TData>(Items, 5); перерыв; случай Breakpoint.xxl: _itemGroups = ChunkList<TData>(Items, 6); перерыв; } '
—
06.05.2024 06:37
Да, ты можешь. Вы можете определить сумму, отображаемую для каждой точки останова, по вашему желанию.
—
06.05.2024 10:39
Другие вопросы по теме
Использование свойства MudCarousel SelectedIndex
Flutter: когда я пытаюсь выполнить горячую перезагрузку для запуска приложения, я получаю эту ошибку при использовании слайдера карусели: «Ошибка: не удалось разрешить пакет «carousel_slider»
Как мне заставить эту бесконечную карусель работать?
Как настроить внешний вид слайдера карусели во флаттере?
Как изменить порядок компонентов в карусели стека React Native?
Как я могу программно переместить карусель к следующему элементу в реакции-родной-реанимированной-карусели?
Реакция: Почему чувствительность моего слайд-шоу на мобильном устройстве меняется только при использовании браузера Chrome?
3D-слайдер-карусель с 8 слайдами с использованием html и css (js тоже подойдет)
Как отобразить последний элемент CarouselView при его загрузке?
Карусель несовместима с лайтбоксом: лайтбокс неправильно подсчитывает количество изображений
Похожие вопросы
Вставка видео не масштабируется в карусели начальной загрузки 5
Как поместить значок «Копировать в буфер обмена» внутри текстового поля ввода?
Форматирование CSS с помощью flexbox и других элементов div
Размер шрифта HTML не работает должным образом?
Как выровнять элементы слева и справа с помощью flex-wrap
NextJs — стили классов CSS Tailwind не применяются на адаптивном экране
Адаптивный заголовок, не отображается
Нужны предложения по решению проблемы с адаптивным дизайном: работает на настольном компьютере, но не на мобильном устройстве
Как сделать все страницы приложения Flutter отзывчивыми?
Как вертикально центрировать адаптивный макет и исправить отступы на мобильных устройствах