Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Carousel 走马灯

在有限空间内,循环播放同一类型的图片、文字等内容

基础用法

适用广泛的基础用法,通过设置 Items 属性值对组件进行图片的绑定,值为图片路径数组

Demo

淡入淡出

通过设置 IsFade 属性,图片切换时采用淡入淡出效果

Demo

点击图片回调事件

通过设置 OnClick 属性后,点击 Image 后触发 OnClick 回调委托

Demo

Attributes

Loading...
@page "/carousels"

<h3>Carousel 走马灯</h3>

<h4>在有限空间内,循环播放同一类型的图片、文字等内容</h4>

<Block Title="基础用法" Introduction="适用广泛的基础用法,通过设置 <code>Items</code> 属性值对组件进行图片的绑定,值为图片路径数组">
    <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> 属性,图片切换时采用淡入淡出效果">
    <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> 回调委托">
    <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 = " — "
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload