Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Example Razor C#Video

Display

Displays static text data

Basic usage

Show only

Demo

Basic usage

Zhangsan 1000

@inject IStringLocalizer<DisplayNormal> Localizer

<div class="row g-3">
    <div class="col-auto col-form-label">
        <span>@Localizer["BasicUsage"]</span>
    </div>
    <div class="col-6">
        <Display TValue="string" Value="@Model.Name" />
    </div>
</div>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    [NotNull]
    private Foo? Model { get; set; }

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

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

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

Bind data in both directions

Two-way binding automatically gets the display labels in the resource file

Demo

When the Dispaly components turn on bidirectional binding, the Display/DisplayName label value is automatically obtained based on the Model property value of the binding and appears as a pre-Label, with DisplayText properties you can customize the display of the pre-label, or by turning off the display of the pre-label through the ShowLabel property

Custom labels

Set the DisplayText value to custom label

Custom labels

Zhangsan 1000

Occupants

The value of DisplayText is displayed when ShowLabel is true, regardless of whether the value is set

Name

Zhangsan 1000

Do not occupy seats

The value of DisplayText is not displayed when the ShowLabel is false

Zhangsan 1000

@inject IStringLocalizer<DisplayLabels> Localizer

<div class="row g-3">
    <div class="col-12">
        <Divider Text="@Localizer["BindWayCustomLabel"]" />
    </div>
    <div class="col-12">
        <p>@((MarkupString)Localizer["BindWayP2"].Value)</p>
    </div>
    <div class="col-12 col-sm-6">
        <Display @bind-Value="@Model.Name" DisplayText="@Localizer["BindWayCustomLabel"]" ShowLabel="true" />
    </div>
    <div class="col-12">
        <Divider Text="@Localizer["BindWayOccupants"]" />
    </div>
    <div class="col-12">
        <p>@((MarkupString)Localizer["BindWayP3"].Value)</p>
    </div>
    <div class="col-12 col-sm-6">
        <Display @bind-Value="@Model.Name" ShowLabel="true" />
    </div>
    <div class="col-12">
        <Divider Text="@Localizer["BindWayNotccupants"]" />
    </div>
    <div class="col-12">
        <p>@((MarkupString)Localizer["BindWayP4"].Value)</p>
    </div>
    <div class="col-12 col-sm-6">
        <Display @bind-Value="@Model.Name" />
    </div>
</div>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    [NotNull]
    private Foo? Model { get; set; }

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

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

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

Generic binding

The Display component has built-in processing of enumerated collections array, customize formatting or callback delegate methods if they do not meet the criteria

Demo

Integer Integer

017

Enumerate

中学

Collection

Swimming,Climb,Shoot

Array

1,18,52,86

DateTime

1/31/2023 8:52:28 AM

DateTimeOffset

1/31/2023 8:52:28 AM +08:00

@inject IStringLocalizer<DisplayDataType> Localizer

<div class="row g-3">
    <div class="col-12 col-sm-6">
        Integer
        <Display FormatString="000" @bind-Value="@Model.Count" ShowLabel="true" DisplayText="@Localizer["Integer"]" />
    </div>
    <div class="col-12 col-sm-6">
        <Display @bind-Value="@Model.Education" ShowLabel="true" DisplayText="@Localizer["Enum"]" />
    </div>
    <div class="col-12 col-sm-6">
        <Display @bind-Value="@Model.Hobby" ShowLabel="true" DisplayText="@Localizer["Collection"]" />
    </div>
    <div class="col-12 col-sm-6">
        <Display @bind-Value="@ByteArray" ShowLabel="true" DisplayText="@Localizer["Arr"]" />
    </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>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    [NotNull]
    private Foo? Model { get; set; }

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

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

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

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

Used within the form

The Dispaly component is used in form components EditorForm, and is used in detail pages and is not editable

Demo

<EditorForm Model="@Model" ItemsPerRow="3" IsDisplay="true">
    <FieldItems>
        <EditorItem @bind-Field="@Model.Hobby" Items="@Hobbys" />
    </FieldItems>
</EditorForm>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    [NotNull]
    private Foo? Model { get; set; }

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

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

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

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

Custom format

When you set the FormatString property value to yyyy-MM-dd, the component displays a time format of the year and day

Demo

Set up FormatString

2023-01-31

Set up Formatter

2023-01-31

The Dispaly component binding byte[] array, formatted as an example of base64 encoded string

Set up Formatter

ARI0Vg==

@inject IStringLocalizer<DisplayFormatString> Localizer

<div class="row g-3">
    <div class="col-12 col-sm-6">@Localizer["FormatStringettingText"] <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">@Localizer["FormatStringettingText"] <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">@((MarkupString)Localizer["FormatStringP"].Value)</p>
<div class="row g-3">
    <div class="col-12 col-sm-6">@Localizer["FormatStringettingText"] <code class="ms-1">Formatter</code></div>
    <div class="col-12 col-sm-6">
        <Display Value="@ByteArray" FormatterAsync="@ByteArrayFormatter" />
    </div>
</div>

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

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

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

Automatically translated into Text

Set the Lookup value to IEnumerable<SelectedItem> collection, through which the component will perform translations through the Value display Text

Demo

In this example, the component Value='@IntValue' set Lookup='@IntValueSource' component to display the Value corresponding to the value of the Text Value

InitValue: 1,2,3

IntValueSource: Text1,Text2,Text3

Text1,Text2,Text3

<Display Value="@IntValue" Lookup="@IntValueSource" />

@code {
    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")
    };
}

Attributes

@page "/displays"
@inject IStringLocalizer<Displays> Localizer

<h3>Display</h3>

<h4>Displays static text data</h4>

<DemoBlock Title="Basic usage" Introduction="Show only" Name="Normal" Demo="typeof(Demos.Display.DisplayNormal)" />

<DemoBlock Title="Bind data in both directions" Introduction="Two-way binding automatically gets the display labels in the resource file" Name="Labels" Demo="typeof(Demos.Display.DisplayLabels)">
    <p>When the <code>Dispaly</code> components turn on bidirectional binding, the <code>Display/DisplayName</code> label value is automatically obtained based on the <code>Model</code> property value of the binding and appears as a <code>pre-Label</code>, with <code>DisplayText</code> properties you can customize the display of the pre-label, or by turning off the display of the pre-label through the <code>ShowLabel</code> property</p>
</DemoBlock>

<DemoBlock Title="Generic binding" Introduction="The <code>Display</code> component has built-in processing of <code>enumerated</code> <code>collections</code> <code>array</code>, customize formatting or callback delegate methods if they do not meet the criteria" Name="DataType" Demo="typeof(Demos.Display.DisplayDataType)" />

<DemoBlock Title="Used within the form" Introduction="The <code>Dispaly</code> component is used in form components <code>EditorForm</code>, and is used in detail pages and is not editable" Name="EditorForm" Demo="typeof(Demos.Display.DisplayEditorForm)" />

<DemoBlock Title="Custom format" Introduction="When you set the <code>FormatString</code> property value to <code>yyyy-MM-dd</code>, the component displays a time format of the year and day" Name="FormatString" Demo="typeof(Demos.Display.DisplayFormatString)" />

<DemoBlock Title="Automatically translated into Text" Introduction="Set the <code>Lookup</code> value to <code>IEnumerable<SelectedItem></code> collection, through which the component will perform translations through the <code>Value</code> display <code>Text</code>" Name="Lookup" Demo="typeof(Demos.Display.DisplayLookup)">
    <p>
        <div>In this example, the component <code>Value='@IntValue'</code> set <code>Lookup='@IntValueSource'</code> component to display the <code>Value</code> corresponding to the value of the <code>Text</code> Value</div>
        <div><b>InitValue</b>: 1,2,3</div>
        <div><b>IntValueSource</b>: Text1,Text2,Text3</div>
    </p>
</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/

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// Display 组件示例
/// </summary>
public partial class Displays
{
    private IEnumerable<AttributeItem> GetAttributes() => new[]
    {
        new AttributeItem() {
            Name = "ShowLabel",
            Description = Localizer["ShowLabel"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "DisplayText",
            Description = Localizer["DisplayText"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "FormatString",
            Description = Localizer["FormatString"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "Formatter",
            Description = Localizer["Formatter"],
            Type = "RenderFragment<TItem>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = nameof(Display<string>.TypeResolver),
            Description = Localizer["TypeResolver"],
            Type = "Func<Assembly?, string, bool, Type?>",
            ValueList = " — ",
            DefaultValue = " — "
        }
    };
}

Display

Displays static text data

Demo

Demo

Demo

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.2.5-beta02