Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

ListView 列表视图

提供规则排列控件

适用于大量重复的数据实现规则排列

Demo

点击图片时触发 OnListViewItemClick 事件

产品列表
Pic1.jpg
Pic2.jpg
Pic3.jpg
Pic4.jpg
Pic5.jpg
Pic6.jpg
Pic7.jpg
Pic8.jpg
Pic9.jpg
Pic10.jpg
Pic11.jpg
Pic12.jpg
Pic13.jpg
Pic14.jpg
Pic15.jpg
Pic16.jpg
Pic17.jpg
Pic18.jpg
Pic19.jpg
Pic20.jpg
Pic21.jpg
Pic22.jpg
Pic23.jpg
Pic24.jpg
Pic25.jpg
Pic26.jpg
Pic27.jpg
Pic28.jpg
Pic29.jpg
Pic30.jpg
Pic31.jpg
Pic32.jpg
Pic33.jpg
Pic34.jpg
Pic35.jpg
Pic36.jpg
Pic37.jpg
Pic38.jpg
Pic39.jpg
Pic40.jpg
Pic41.jpg
Pic42.jpg
Pic43.jpg
Pic44.jpg
Pic45.jpg
Pic46.jpg
Pic47.jpg
Pic48.jpg
Pic49.jpg
Pic50.jpg
Pic51.jpg
Pic52.jpg
Pic53.jpg
Pic54.jpg
Pic55.jpg
Pic56.jpg
Pic57.jpg
Pic58.jpg
Pic59.jpg
Pic60.jpg
Pic61.jpg
Pic62.jpg
Pic63.jpg
Pic64.jpg
Pic65.jpg
Pic66.jpg
Pic67.jpg
Pic68.jpg
Pic69.jpg
Pic70.jpg
Pic71.jpg
Pic72.jpg
Pic73.jpg
Pic74.jpg
Pic75.jpg
Pic76.jpg
Pic77.jpg
Pic78.jpg
Pic79.jpg
Pic80.jpg
Pic81.jpg
Pic82.jpg
Pic83.jpg
Pic84.jpg
Pic85.jpg
Pic86.jpg
Pic87.jpg
Pic88.jpg
Pic89.jpg
Pic90.jpg
Pic91.jpg
Pic92.jpg
Pic93.jpg
Pic94.jpg
Pic95.jpg
Pic96.jpg
Pic97.jpg
Pic98.jpg
Pic99.jpg
Pic100.jpg

设置 Pageable 显示分页组件

Demo
产品列表
Pic1.jpg
Pic2.jpg
Pic3.jpg
Pic4.jpg
Pic5.jpg
Pic6.jpg
Pic7.jpg
Pic8.jpg
Pic9.jpg
Pic10.jpg
Pic11.jpg
Pic12.jpg
Pic13.jpg
Pic14.jpg
Pic15.jpg
Pic16.jpg
Pic17.jpg
Pic18.jpg
Pic19.jpg
Pic20.jpg

设置 GroupName 数据进行分组显示

Demo
产品列表
Group1
Pic4.jpg
Pic8.jpg
Pic12.jpg
Pic16.jpg
Pic20.jpg
Group2
Pic1.jpg
Pic5.jpg
Pic9.jpg
Pic13.jpg
Pic17.jpg
Group3
Pic2.jpg
Pic6.jpg
Pic10.jpg
Pic14.jpg
Pic18.jpg
Group4
Pic3.jpg
Pic7.jpg
Pic11.jpg
Pic15.jpg
Pic19.jpg

Attributes

Loading...

Methods

Loading...
@page "/listviews"
@inject IOptions<WebsiteOptions> WebsiteOption

<h3>ListView 列表视图</h3>

<h4>提供规则排列控件</h4>

<Block Title="普通用法" Introduction="适用于大量重复的数据实现规则排列">
    <p>点击图片时触发 <code>OnListViewItemClick</code> 事件</p>
    <div class="listview-demo">
        <ListView TItem="Product" Items="@Products" OnListViewItemClick="OnListViewItemClick">
            <HeaderTemplate>
                <div>产品列表</div>
            </HeaderTemplate>
            <BodyTemplate>
                <Card>
                    <CardBody>
                        <img src="@context.ImageUrl" />
                        <div class="listview-demo-desc">@context.Description</div>
                    </CardBody>
                </Card>
            </BodyTemplate>
            <FooterTemplate>
                <div class="text-end">
                    Coptyright Bootstrap Blazor
                </div>
            </FooterTemplate>
        </ListView>
    </div>
    <BlockLogger @ref="Trace" class="mt-3" />
</Block>

<Block Title="分页显示" Introduction="设置 <code>Pageable</code> 显示分页组件">
    <div class="listview-demo">
        <ListView TItem="Product" Pageable="true" OnQueryAsync="@OnQueryAsync">
            <HeaderTemplate>
                <div>产品列表</div>
            </HeaderTemplate>
            <BodyTemplate>
                <Card>
                    <CardBody>
                        <img src="@context.ImageUrl" />
                        <div class="listview-demo-desc">@context.Description</div>
                    </CardBody>
                </Card>
            </BodyTemplate>
        </ListView>
    </div>
</Block>

<Block Title="分组显示" Introduction="设置 <code>GroupName</code> 数据进行分组显示">
    <div class="listview-demo">
        <ListView TItem="Product" GroupName="@(p => p.Category)" OnQueryAsync="@OnQueryAsync">
            <HeaderTemplate>
                <div>产品列表</div>
            </HeaderTemplate>
            <BodyTemplate>
                <Card>
                    <CardBody>
                        <img src="@context.ImageUrl" />
                        <div class="listview-demo-desc">@context.Description</div>
                    </CardBody>
                </Card>
            </BodyTemplate>
        </ListView>
    </div>
</Block>

<AttributeTable Items="GetAttributes()"></AttributeTable>

<MethodTable Items="GetMethods()"></MethodTable>
// 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.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class ListViews
    {
        private BlockLogger? Trace { get; set; }
        private IEnumerable<Product> Products { get; set; } = Enumerable.Empty<Product>();

        /// <summary>
        /// 
        /// </summary>
        protected override void OnInitialized()
        {
            base.OnInitialized();

            Products = Enumerable.Range(1, 100).Select(i => new Product()
            {
                ImageUrl = $"{WebsiteOption.Value.ImageLibUrl}/images/Pic{i}.jpg",
                Description = $"Pic{i}.jpg",
                Category = $"Group{(i % 4) + 1}"
            });
        }

        private Task<QueryData<Product>> OnQueryAsync(QueryPageOptions options)
        {
            var items = Products.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems);
            return Task.FromResult(new QueryData<Product>()
            {
                Items = items,
                TotalCount = Products.Count()
            });
        }
        private Task OnListViewItemClick(Product item)
        {
            Trace?.Log($"ListViewItem: {item.Description} clicked");
            return Task.CompletedTask;
        }
        /// <summary>
        /// 
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes()
        {
            return new AttributeItem[]
            {
                new AttributeItem(){
                    Name = "Items",
                    Description = "组件数据源",
                    Type = "IEnumerable<TItem>",
                    ValueList = " — ",
                    DefaultValue = " — "
                },
                new AttributeItem(){
                    Name = "Pageable",
                    Description = "是否分页",
                    Type = "bool",
                    ValueList = "true|false",
                    DefaultValue = "false"
                },
                new AttributeItem(){
                    Name = "PageItemsSource",
                    Description = "每页显示数量数据源",
                    Type = "IEnumerable<int>",
                    ValueList = " — ",
                    DefaultValue = " — "
                },
                new AttributeItem(){
                    Name = "HeaderTemplate",
                    Description = "ListView Header 模板",
                    Type = "RenderFragment",
                    ValueList = " — ",
                    DefaultValue = " — "
                },
                new AttributeItem(){
                    Name = "BodyTemplate",
                    Description = "ListView Body 模板",
                    Type = "RenderFragment<TItem>",
                    ValueList = " — ",
                    DefaultValue = " — "
                },
                new AttributeItem(){
                    Name = "FooterTemplate",
                    Description = "ListView Footer 模板",
                    Type = "RenderFragment",
                    ValueList = " — ",
                    DefaultValue = " — "
                },
                new AttributeItem() {
                    Name = "OnQueryAsync",
                    Description = "异步查询回调方法",
                    Type = "Func<QueryPageOptions, Task<QueryData<TItem>>>",
                    ValueList = "—",
                    DefaultValue = " — "
                },
                new AttributeItem() {
                    Name = "OnListViewItemClick",
                    Description = "ListView元素点击时回调委托",
                    Type = "Func<TItem, Task>",
                    ValueList = " — ",
                    DefaultValue = " — "
                }
            };
        }

        private IEnumerable<MethodItem> GetMethods() => new MethodItem[]
        {
            new MethodItem()
            {
                Name = "QueryAsync",
                Description = "手工查询数据方法",
                Parameters = " - ",
                ReturnValue = "Task"
            },
        };
    }

    /// <summary>
    /// 
    /// </summary>
    internal class Product
    {
        /// <summary>
        /// 
        /// </summary>
        public string ImageUrl { get; set; } = "";

        /// <summary>
        /// 
        /// </summary>
        public string Description { get; set; } = "";

        /// <summary>
        /// 
        /// </summary>
        public string Category { get; set; } = "";
    }
}

B 站相关视频链接

暂无

交流群

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