Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

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

Attributes

Loading...
@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>

<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;
using System.Collections.Generic;
using System.Threading.Tasks;

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 = " — "
            }
    };
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
Themes
Bootstrap
Motronic
Ant Design (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload