Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

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

068

Enumerate

中学

Collection

Swimming,Climb,Shoot

Array

1,18,52,86

DateTime

3/22/2023 5:12:14 PM

DateTimeOffset

3/22/2023 5:12:14 PM +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-03-22

Set up Formatter

2023-03-22

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

B station related video link

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Display

Displays static text data

Demo

Demo

Demo

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.4.4-beta01