你好社区我想用 carousel
制作一个 blazor webassembly
的图像,我找到了一个帮助我创建一个 carrsuel 来传递 components.razor 的例子,但我想重写代码,以便它显示图像,或者是否可以将其设置为通用以接收 both images and components
。
这是我的代码:
carousel.razor
@using System.Threading
<div class="d-flex flex-column" style="background-color: rgba(10,10,.8);">
<div class="d-flex justify-content-between align-items-center" style="height: 400px;">
<button type="button" class="btn btn-sm btn-outline-light" @onclick="() => Manualy(true)">
<i class="fas fa-chevron-left"></i>
</button>
<div>
@Render(currentPosition)
</div>
<button type="button" class="btn btn-sm btn-outline-light" @onclick="() => Manualy(false)">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<div class="d-flex justify-content-center">
@foreach (var item in Components)
{
if (Math.Abs(currentPosition % Components.Length) == Array.IndexOf(Components,item))
{
<div class="alert alert-info border-dark"></div>
}
else
{
<div class="alert alert-light border-dark"></div>
}
}
</div>
</div>
@code {
public void Manualy(bool backwards)
{
if (!cts.IsCancellationRequested)
cts.Cancel();
if (backwards)
currentPosition--;
else
currentPosition++;
}
[Parameter] public Type[] Components { get; set; }
int currentPosition;
CancellationTokenSource cts;
CancellationToken ct;
protected override async Task OnInitializedAsync()
{
cts = new CancellationTokenSource();
ct = cts.Token;
Walkthrough();
}
public async Task Walkthrough()
{
while (!ct.IsCancellationRequested)
{
await Task.Delay(2500,ct);
currentPosition++;
await InvokeAsync(() => this.StateHasChanged());
}
}
public RenderFragment Render(int position)
{
return RenderTreeBuilder =>
{
RenderTreeBuilder.OpenComponent(0,Components[Math.Abs(position % Components.Length)]);
RenderTreeBuilder.CloseComponent();
};
}
}
index.razor
<CarruselComponent Components="types"></CarruselComponent>
@code {
Type[] types =
{
typeof(Cajas),typeof(Bancos),typeof(Almacen)
};
}