Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Display 显示组件

显示静态文本数据

仅显示

Demo
基本用法
Zhangsan 1000

通过双向绑定可以自动获取资源文件中的显示标签

Demo

Display 组件开启双向绑定时,会根据绑定的 Model 属性值去自动获取 Display/DisplayName 标签值并且显示为前置 Label,通过 DisplayText 属性可以自定义显示前置标签,或者通过 ShowLabel 属性关闭前置标签是否显示

自定义标签

设置 DisplayText 值为 自定义标签

Zhangsan 1000
占位

无论是否设置 DisplayText 值,当 ShowLabeltrue 时均显示

Zhangsan 1000
不占位

无论是否设置 DisplayText 值,当 ShowLabelfalse 时均不显示

Zhangsan 1000

Display 组件内置对 枚举 集合 数组 进行处理,如不符合条件时,请自定义格式化或者回调委托方法

Demo
093
Primary
Swimming,Climb,Shoot
1,18,52,86
9/19/2021 6:33:15 PM
9/19/2021 6:33:15 PM +08:00

Display 组件在表单组件 EditorForm 中使用,多用于明细页,不可编辑模式

Demo
Loading...

设置 FormatString 属性值为 yyyy-MM-dd 时,组件显示的时间格式为年月日

Demo
设置 FormatString
2021-09-19
设置 Formatter
2021-09-19

Display 组件绑定 byte[] 数组,格式化成 base64 编码字符串示例

设置 Formatter
ARI0Vg==

设置 Lookup 值为 IEnumerable<SelectedItem> 集合,组件将通过此数据集,进行通过 Value 显示 Text 翻译工作

Demo

本例中组件 Value="@IntValue" 设置 Lookup="@IntValueSource" 组件将 Value 值对应的 Text 显示出来
InitValue: 1,2,3
IntValueSource: Text1,Text2,Text3

Text1,Text2,Text3

Attributes

Loading...
@page "/displays"

<h3>Display 显示组件</h3>

<h4>显示静态文本数据</h4>

<Block Title="基础用法" Introduction="仅显示">
    <div class="row g-3">
        <div class="col-auto col-form-label">
            <span>基本用法</span>
        </div>
        <div class="col-6">
            <Display TValue="string" Value="@Model.Name" />
        </div>
    </div>
</Block>

<Block Title="双向绑定数据" Introduction="通过双向绑定可以自动获取资源文件中的显示标签">
    <p><code>Display</code> 组件开启双向绑定时,会根据绑定的 <code>Model</code> 属性值去自动获取 <code>Display/DisplayName</code> 标签值并且显示为前置 <code>Label</code>,通过 <code>DisplayText</code> 属性可以自定义显示前置标签,或者通过 <code>ShowLabel</code> 属性关闭前置标签是否显示</p>
    <div class="row g-3">
        <div class="col-12">
            <Divider Text="自定义标签" />
        </div>
        <div class="col-12">
            <p>设置 <code>DisplayText</code> 值为 <b>自定义标签</b></p>
        </div>
        <div class="col-12 col-sm-6">
            <Display @bind-Value="@Model.Name" DisplayText="自定义标签" ShowLabel="true" />
        </div>
        <div class="col-12">
            <Divider Text="占位" />
        </div>
        <div class="col-12">
            <p>无论是否设置 <code>DisplayText</code> 值,当 <code>ShowLabel</code> 为 <code>true</code> 时均显示</p>
        </div>
        <div class="col-12 col-sm-6">
            <Display @bind-Value="@Model.Name" ShowLabel="true" />
        </div>
        <div class="col-12">
            <Divider Text="不占位" />
        </div>
        <div class="col-12">
            <p>无论是否设置 <code>DisplayText</code> 值,当 <code>ShowLabel</code> 为 <code>false</code> 时均不显示</p>
        </div>
        <div class="col-12 col-sm-6">
            <Display @bind-Value="@Model.Name" />
        </div>
    </div>
</Block>

<Block Title="泛型绑定" Introduction="<code>Display</code> 组件内置对 <code>枚举</code> <code>集合</code> <code>数组</code> 进行处理,如不符合条件时,请自定义格式化或者回调委托方法">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Display FormatString="000" @bind-Value="@Model.Count" ShowLabel="true" DisplayText="整型" />
        </div>
        <div class="col-12 col-sm-6">
            <Display @bind-Value="@Model.Education" ShowLabel="true" DisplayText="枚举" />
        </div>
        <div class="col-12 col-sm-6">
            <Display @bind-Value="@Model.Hobby" ShowLabel="true" DisplayText="集合" />
        </div>
        <div class="col-12 col-sm-6">
            <Display @bind-Value="@ByteArray" ShowLabel="true" DisplayText="数组" />
        </div>
        <div class="col-12 col-sm-6">
            <Display Value="@DateTime.Now" ShowLabel="true" DisplayText="DateTime" />
        </div>
        <div class="col-12 col-sm-6">
            <Display Value="@DateTimeOffset.Now" ShowLabel="true" DisplayText="DateTimeOffset" />
        </div>
    </div>
</Block>

<Block Title="表单内使用" Introduction="<code>Display</code> 组件在表单组件 <code>EditorForm</code> 中使用,多用于明细页,不可编辑模式">
    <EditorForm Model="@Model" ItemsPerRow="3" IsDisplay="true">
        <FieldItems>
            <EditorItem @bind-Field="@Model.Hobby" Data="@Hobbys" />
        </FieldItems>
    </EditorForm>
</Block>

<Block Title="自定义格式" Introduction="设置 <code>FormatString</code> 属性值为 <code>yyyy-MM-dd</code> 时,组件显示的时间格式为年月日">
    <div class="row g-3">
        <div class="col-12 col-sm-6">设置 <code class="ms-1">FormatString</code></div>
        <div class="col-12 col-sm-6">
            <Display Value="DateTime.Now" FormatString="yyyy-MM-dd" />
        </div>
        <div class="col-12 col-sm-6">设置 <code class="ms-1">Formatter</code></div>
        <div class="col-12 col-sm-6">
            <Display Value="DateTime.Now" FormatterAsync="@DateTimeFormatter" />
        </div>
    </div>
    <p class="mt-3"><code>Display</code> 组件绑定 <code>byte[]</code> 数组,格式化成 <code>base64</code> 编码字符串示例</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">设置 <code class="ms-1">Formatter</code></div>
        <div class="col-12 col-sm-6">
            <Display Value="@ByteArray" FormatterAsync="@ByteArrayFormatter" />
        </div>
    </div>
</Block>

<Block Title="自动翻译为 Text" Introduction="设置 <code>Lookup</code> 值为 <code>IEnumerable&lt;SelectedItem&gt;</code> 集合,组件将通过此数据集,进行通过 <code>Value</code> 显示 <code>Text</code> 翻译工作">
    <p>
        <div>本例中组件 <code>Value="@@IntValue"</code> 设置 <code>Lookup="@@IntValueSource"</code> 组件将 <code>Value</code> 值对应的 <code>Text</code> 显示出来</div>
        <div><b>InitValue</b>: 1,2,3</div>
        <div><b>IntValueSource</b>: Text1,Text2,Text3</div>
    </p>
    <Display Value="@IntValue" Lookup="@IntValueSource" />
</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.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using System;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// Display 组件示例
    /// </summary>
    public partial class Displays
    {
        [NotNull]
        private Foo? Model { get; set; }

        [Inject]
        [NotNull]
        private IStringLocalizer<Foo>? Localizer { get; set; }

        [NotNull]
        private IEnumerable<SelectedItem>? Hobbys { get; set; }

        private byte[] ByteArray { get; set; } = new byte[] { 0x01, 0x12, 0x34, 0x56 };

        private IEnumerable<int> IntValue { get; set; } = new[] { 1, 2, 3 };

        private IEnumerable<SelectedItem> IntValueSource { get; set; } = new[]
        {
            new SelectedItem("1", "Text1"),
            new SelectedItem("2", "Text2"),
            new SelectedItem("3", "Text3")
        };

        private static async Task<string> ByteArrayFormatter(byte[] source)
        {
            await Task.Delay(10);
            return Convert.ToBase64String(source);
        }

        private static Task<string> DateTimeFormatter(DateTime source) => Task.FromResult(source.ToString("yyyy-MM-dd"));

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

            Model = Foo.Generate(Localizer);
            Model.Hobby = Foo.GenerateHobbys(Localizer).Take(3).Select(i => i.Text);
            Hobbys = Foo.GenerateHobbys(Localizer);
        }

        private static IEnumerable<AttributeItem> GetAttributes() => new[]
        {
            new AttributeItem() {
                Name = "ShowLabel",
                Description = "是否显示前置标签",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "DisplayText",
                Description = "前置标签显示文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "FormatString",
                Description = "数值格式化字符串",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Formatter",
                Description = "TableHeader 实例",
                Type = "RenderFragment<TItem>",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };
    }
}

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