You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
3.3 KiB
85 lines
3.3 KiB
2 years ago
|
@namespace Connected.Components
|
||
|
|
@inherits BindableItemsControlBase<CarouselItem, TData>
|
||
|
|
@using Connected.Extensions
|
||
|
|
@implements IAsyncDisposable
|
||
|
|
@typeparam TData
|
||
|
|
|
||
|
|
<section @attributes="UserAttributes" aria-roledescription="carousel" class="@Classname" style="@Style">
|
||
|
|
<CascadingValue Value="this">
|
||
|
|
|
||
|
|
<SwipeArea OnSwipe="OnSwipe" Class="mud-carousel-swipe">
|
||
|
|
@*Selected Content*@
|
||
|
|
@if (ItemsSource == null)
|
||
|
|
{
|
||
|
|
@ChildContent
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
foreach (TData item in ItemsSource)
|
||
|
|
{
|
||
|
|
<CarouselItem>
|
||
|
|
@ItemTemplate(item)
|
||
|
|
</CarouselItem>
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</SwipeArea>
|
||
|
|
|
||
|
|
@*Controls*@
|
||
|
|
<div class="d-flex flex-grow-1 align-self-auto">
|
||
|
|
@*Left Arrow*@
|
||
|
|
@if (ShowArrows)
|
||
|
|
{
|
||
|
|
@if (PreviousButtonTemplate == null)
|
||
|
|
{
|
||
|
|
<IconButton tabindex="1" aria-label="Go to previous" Class="@NavigationButtonsClassName" Style="z-index:3;opacity:0.75" Icon="@PreviousIcon" OnClick="Previous" Color="ThemeColor.Inherit" />
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
<div @onclick="Previous" tabindex="1" aria-label="Go to previous" class="@NavigationButtonsClassName" style="z-index:3">
|
||
|
|
@PreviousButtonTemplate
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@*Bullets*@
|
||
|
|
<div class="@($"flex-grow-1 align-self-{ConvertPosition(BulletsPosition).ToDescriptionString()}")" style="z-index:3">
|
||
|
|
@if (ShowBullets)
|
||
|
|
{
|
||
|
|
<div class="d-flex justify-center">
|
||
|
|
@for (int i = 0; i < Items.Count; i++)
|
||
|
|
{
|
||
|
|
int current = i;
|
||
|
|
if (BulletTemplate == null)
|
||
|
|
{
|
||
|
|
<IconButton tabindex="@(i+3)" aria-label="@(i+1)" Class="@BulletsButtonsClassName" Style="z-index:3;opacity:0.75" Icon="@(current == SelectedIndex ? CheckedIcon : UncheckedIcon)" OnClick="(() => MoveTo(current))" Color="ThemeColor.Inherit" />
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
<div @onclick="() => MoveTo(current)" class="@BulletsButtonsClassName" style="z-index:3">
|
||
|
|
@BulletTemplate(current == SelectedIndex)
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
@*Right Arrow*@
|
||
|
|
@if (ShowArrows)
|
||
|
|
{
|
||
|
|
@if (NextButtonTemplate == null)
|
||
|
|
{
|
||
|
|
<IconButton tabindex="2" aria-label="Go to next" Class="@NavigationButtonsClassName" Style="z-index:3;opacity:0.75" Icon="@NextIcon" OnClick="Next" Color="ThemeColor.Inherit" />
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
<div @onclick="Next" tabindex="2" aria-label="Go to next" class="@NavigationButtonsClassName" style="z-index:3">
|
||
|
|
@NextButtonTemplate
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</CascadingValue>
|
||
|
|
</section>
|