
Display 显示组件
显示静态文本数据
基础用法
仅显示
Demo
基本用法
Zhangsan 1000
双向绑定数据
通过双向绑定可以自动获取资源文件中的显示标签
Demo
Display
组件开启双向绑定时,会根据绑定的 Model
属性值去自动获取 Display/DisplayName
标签值并且显示为前置 Label
,通过 DisplayText
属性可以自定义显示前置标签,或者通过 ShowLabel
属性关闭前置标签是否显示
自定义标签
设置 DisplayText
值为 自定义标签
Zhangsan 1000
占位
无论是否设置 DisplayText
值,当 ShowLabel
为 true
时均显示
Zhangsan 1000
不占位
无论是否设置 DisplayText
值,当 ShowLabel
为 false
时均不显示
Zhangsan 1000
泛型绑定
Display
组件内置对 枚举
集合
数组
进行处理,如不符合条件时,请自定义格式化或者回调委托方法
Demo
029
Middel
Swimming,Climb,Shoot
1,18,52,86
4/23/2021 6:47:13 PM
4/23/2021 6:47:13 PM +08:00
表单内使用
Display
组件在表单组件 EditorForm
中使用,多用于明细页,不可编辑模式
Demo
form-inline form-group
模式
Loading...
form-inline
模式
29
Middel
自定义格式
设置 FormatString
属性值为 yyyy-MM-dd
时,组件显示的时间格式为年月日
Demo
设置
FormatString
2021-04-23
设置
Formatter
2021-04-23
Display
组件绑定 byte[]
数组,格式化成 base64
编码字符串示例
设置
Formatter
ARI0Vg==
自动翻译为 Text
设置 Data
值为 IEnumerable<SelectedItem>
集合,组件将通过此数据集,进行通过 Value
显示 Text
翻译工作
Demo
本例中组件
Value="@IntValue"
设置 Data="@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">
<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="form-inline">
<div class="row">
<Divider Text="自定义标签" />
<div class="form-group col-12">
<p>设置 <code>DisplayText</code> 值为 <b>自定义标签</b></p>
</div>
<div class="form-group col-12">
<Display @bind-Value="@Model.Name" DisplayText="自定义标签" ShowLabel="true" />
</div>
<Divider Text="占位" />
<div class="form-group col-12">
<p>无论是否设置 <code>DisplayText</code> 值,当 <code>ShowLabel</code> 为 <code>true</code> 时均显示</p>
</div>
<div class="form-group col-12">
<Display @bind-Value="@Model.Name" ShowLabel="true" />
</div>
<Divider Text="不占位" />
<div class="form-group col-12">
<p>无论是否设置 <code>DisplayText</code> 值,当 <code>ShowLabel</code> 为 <code>false</code> 时均不显示</p>
</div>
<div class="form-group col-12">
<Display @bind-Value="@Model.Name" />
</div>
</div>
</div>
</Block>
<Block Title="泛型绑定" Introduction="<code>Display</code> 组件内置对 <code>枚举</code> <code>集合</code> <code>数组</code> 进行处理,如不符合条件时,请自定义格式化或者回调委托方法">
<div class="form-inline">
<div class="row">
<div class="form-group col-12 col-sm-6">
<Display FormatString="000" @bind-Value="@Model.Count" ShowLabel="true" DisplayText="整型" />
</div>
<div class="form-group col-12 col-sm-6">
<Display @bind-Value="@Model.Education" ShowLabel="true" DisplayText="枚举" />
</div>
<div class="form-group col-12 col-sm-6">
<Display @bind-Value="@Model.Hobby" ShowLabel="true" DisplayText="集合" />
</div>
<div class="form-group col-12 col-sm-6">
<Display @bind-Value="@ByteArray" ShowLabel="true" DisplayText="数组" />
</div>
<div class="form-group col-12 col-sm-6">
<Display Value="@DateTime.Now" ShowLabel="true" DisplayText="DateTime" />
</div>
<div class="form-group col-12 col-sm-6">
<Display Value="@DateTimeOffset.Now" ShowLabel="true" DisplayText="DateTimeOffset" />
</div>
</div>
</div>
</Block>
<Block Title="表单内使用" Introduction="<code>Display</code> 组件在表单组件 <code>EditorForm</code> 中使用,多用于明细页,不可编辑模式">
<p><b><code>form-inline form-group</code></b> 模式</p>
<EditorForm Model="@Model" ItemsPerRow="3" IsDisplay="true">
<FieldItems>
<EditorItem @bind-Field="@Model.Hobby" Data="@Hobbys" />
</FieldItems>
</EditorForm>
<p><b><code>form-inline</code></b> 模式</p>
<div class="form-inline">
<div class="row">
<div class="col-12 col-sm-6"><Display @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>
</div>
</Block>
<Block Title="自定义格式" Introduction="设置 <code>FormatString</code> 属性值为 <code>yyyy-MM-dd</code> 时,组件显示的时间格式为年月日">
<div class="form-inline">
<div class="row">
<div class="form-group col-12 col-sm-6">设置 <code class="ml-1">FormatString</code></div>
<div class="form-group col-12 col-sm-6">
<Display Value="DateTime.Now" FormatString="yyyy-MM-dd" />
</div>
<div class="form-group col-12 col-sm-6">设置 <code class="ml-1">Formatter</code></div>
<div class="form-group col-12 col-sm-6">
<Display Value="DateTime.Now" FormatterAsync="@DateTimeFormatter" />
</div>
</div>
</div>
<p class="mt-3"><code>Display</code> 组件绑定 <code>byte[]</code> 数组,格式化成 <code>base64</code> 编码字符串示例</p>
<div class="form-inline">
<div class="row">
<div class="form-group col-12 col-sm-6">设置 <code class="ml-1">Formatter</code></div>
<div class="form-group col-12 col-sm-6">
<Display Value="@ByteArray" FormatterAsync="@ByteArrayFormatter" />
</div>
</div>
</div>
</Block>
<Block Title="自动翻译为 Text" Introduction="设置 <code>Data</code> 值为 <code>IEnumerable<SelectedItem></code> 集合,组件将通过此数据集,进行通过 <code>Value</code> 显示 <code>Text</code> 翻译工作">
<p>
<div>本例中组件 <code>Value="@@IntValue"</code> 设置 <code>Data="@@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>
<div class="form-inline">
<div class="row">
<div class="col-12 col-sm-6">
<Display Value="@IntValue" Data="@IntValueSource" />
</div>
</div>
</div>
</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 = " — "
}
};
}
}