
Carousel
In limited space, loop through the same type of pictures, text, and more
A wide range of basic usages are used to bind components to an array of picture paths by setting the Items
property values
Demo
By setting the IsFade
property, the picture switches with a fade-in and fade-out effect
Demo
After you set the OnClick
property by setting, click Image
to trigger the OnClick
callback delegate
Demo
Use ChildContent
render the customer content
Demo
Attributes
@page "/carousels"
@inject IStringLocalizer<Carousels> Localizer
<h3>Carousel</h3>
<h4>In limited space, loop through the same type of pictures, text, and more</h4>
<DemoBlock Title="Basic usage" Introduction="A wide range of basic usages are used to bind components to an array of picture paths by setting the <code>Items</code> property values" Name="Normal">
<Carousel Images="@Images" Width="280"></Carousel>
</DemoBlock>
<DemoBlock Title="Fade in and out" Introduction="By setting the <code>IsFade</code> property, the picture switches with a fade-in and fade-out effect" Name="Fade">
<Carousel Images="@Images" Width="280" IsFade="true"></Carousel>
</DemoBlock>
<DemoBlock Title="Click on the image to call back the event" Introduction="After you set the <code>OnClick</code> property by setting, click <code>Image</code> to trigger the <code>OnClick</code> callback delegate" Name="OnClick">
<Carousel Images="@Images" Width="280" IsFade="true" OnClick="@OnClick"></Carousel>
<BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>
<DemoBlock Title="ChildContent" Introduction="Use <code>ChildContent</code> render the customer content" Name="ChildContent">
<Carousel Width="280">
<CarouselItem>
<div class="carousel-item-demo">
<h3>Title-1</h3>
<div>Content-1</div>
<div>
<Button Icon="fa fa-fa" Text="Button-1" />
</div>
</div>
</CarouselItem>
<CarouselItem>
<div class="carousel-item-demo">
<h3>Title-2</h3>
<div>Content-2</div>
<div>
<Button Icon="fa fa-fa" Text="Button-2" />
</div>
</div>
</CarouselItem>
<CarouselItem>
<div class="carousel-item-demo">
<h3>Title-3</h3>
<div>Content-3</div>
<div>
<Button Icon="fa fa-fa" Text="Button-3" />
</div>
</div>
</CarouselItem>
</Carousel>
</DemoBlock>
<AttributeTable Items="@GetAttributes()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Components;
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public sealed partial class Carousels
{
/// <summary>
///
/// </summary>
private BlockLogger? Trace { get; set; }
private static List<string> Images => new()
{
"_content/BootstrapBlazor.Shared/images/Pic0.jpg",
"_content/BootstrapBlazor.Shared/images/Pic1.jpg",
"_content/BootstrapBlazor.Shared/images/Pic2.jpg"
};
/// <summary>
///
/// </summary>
/// <param name="imageUrl"></param>
/// <returns></returns>
private Task OnClick(string imageUrl)
{
Trace?.Log($"Image Clicked: {imageUrl}");
return Task.CompletedTask;
}
/// <summary>
/// 获得属性方法
/// </summary>
/// <returns></returns>
private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem() {
Name = "Images",
Description = Localizer["Images"],
Type = "IEnumerable<string>",
ValueList = "—",
DefaultValue = "—"
},
new AttributeItem() {
Name = "IsFade",
Description = Localizer["IsFade"],
Type = "boolean",
ValueList = " — ",
DefaultValue = "false"
},
new AttributeItem() {
Name = "Width",
Description = Localizer["Width"],
Type = "int",
ValueList = " — ",
DefaultValue = "—"
},
new AttributeItem() {
Name = "OnClick",
Description = Localizer["OnClick"],
Type = "Func<string, Task>",
ValueList = " — ",
DefaultValue = " — "
}
};
}