
Carousel 走马灯
在有限空间内,循环播放同一类型的图片、文字等内容
基础用法
适用广泛的基础用法,通过设置 Items
属性值对组件进行图片的绑定,值为图片路径数组
Demo
淡入淡出
通过设置 IsFade
属性,图片切换时采用淡入淡出效果
Demo
点击图片回调事件
通过设置 OnClick
属性后,点击 Image
后触发 OnClick
回调委托
Demo
Attributes 属性
Loading...
@page "/carousels"
<h3>Carousel 走马灯</h3>
<h4>在有限空间内,循环播放同一类型的图片、文字等内容</h4>
<Block Title="基础用法" Introduction="适用广泛的基础用法,通过设置 <code>Items</code> 属性值对组件进行图片的绑定,值为图片路径数组" CodeFile="carousel.1.html">
<div class="form-inline">
<div class="row">
<div class="form-group col-12">
<Carousel Images="@Images" Width="280"></Carousel>
</div>
</div>
</div>
</Block>
<Block Title="淡入淡出" Introduction="通过设置 <code>IsFade</code> 属性,图片切换时采用淡入淡出效果" CodeFile="carousel.2.html">
<div class="form-inline">
<div class="row">
<div class="form-group col-12">
<Carousel Images="@Images" Width="280" IsFade="true"></Carousel>
</div>
</div>
</div>
</Block>
<Block Title="点击图片回调事件" Introduction="通过设置 <code>OnClick</code> 属性后,点击 <code>Image</code> 后触发 <code>OnClick</code> 回调委托" CodeFile="carousel.3.html">
<div class="form-inline">
<div class="row">
<div class="form-group col-12">
<Carousel Images="@Images" Width="280" IsFade="true" OnClick="@OnClick"></Carousel>
</div>
</div>
</div>
<Logger @ref="Trace" class="mt-3" />
</Block>
<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.Pages.Components;
using System.Collections.Generic;
using System.Threading.Tasks;
namespace BootstrapBlazor.Shared.Pages
{
/// <summary>
///
/// </summary>
public sealed partial class Carousels
{
/// <summary>
///
/// </summary>
private Logger? Trace { get; set; }
private IEnumerable<string> Images => new List<string>()
{
"_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 = "Images 集合",
Type = "IEnumerable<string>",
ValueList = "—",
DefaultValue = "—"
},
new AttributeItem() {
Name = "IsFade",
Description = "是否淡入淡出",
Type = "boolean",
ValueList = " — ",
DefaultValue = "false"
},
new AttributeItem() {
Name = "Width",
Description = "设置图片宽度",
Type = "int",
ValueList = " — ",
DefaultValue = "—"
},
new AttributeItem() {
Name = "OnClick",
Description = "点击图片回调委托",
Type = "Func<string, Task>",
ValueList = " — ",
DefaultValue = " — "
}
};
}
}