Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Input

Enter characters with the mouse or keyboard

Basic usage

Provides basic text entry components

Demo

You can set the IsAutoFocus whether to automatically get focus, and the components that are last executed when multiple text boxes set auto-focus will get focus

Select all on focus

Select all on enter

@inject IStringLocalizer<InputsNormal> Localizer

<div class="row g-3">
    <div class="col-12 col-sm-6">
        <BootstrapInput PlaceHolder="@Localizer["PlaceHolder"]"
                        TValue="string"
                        IsAutoFocus="true"
                        IsSelectAllTextOnFocus="true"
                        ShowLabel="true"
                        DisplayText="@Localizer["IsSelectAllTextOnFocusLabel"]" />
    </div>
    <div class="col-12 col-sm-6">
        <BootstrapInput PlaceHolder="@Localizer["PlaceHolder"]"
                        TValue="string"
                        IsSelectAllTextOnEnter="true"
                        ShowLabel="true"
                        DisplayText="@Localizer["IsSelectAllTextOnEnterLabel"]" />
    </div>
</div>

Color

Change the color of the text border by setting Color

Demo

<div class="row g-3">
    <div class="col-12 col-sm-6">
        <BootstrapInput TValue="string" Color="Color.Primary" />
    </div>
    <div class="col-12 col-sm-6">
        <BootstrapInput TValue="string" Color="Color.Info" />
    </div>
    <div class="col-12 col-sm-6">
        <BootstrapInput TValue="string" Color="Color.Warning" />
    </div>
    <div class="col-12 col-sm-6">
        <BootstrapInput TValue="string" Color="Color.Danger" />
    </div>
    <div class="col-12 col-sm-6">
        <BootstrapInput TValue="string" Color="Color.Secondary" />
    </div>
    <div class="col-12 col-sm-6">
        <BootstrapInput TValue="string" Color="Color.Dark" />
    </div>
</div>

Keyboard response

Using OnEnterAsync OnEscAsync callback delegates to respond to the Enter ESC keystrokes

Demo

Basic usage

Press the keyboard Enter or Esc test

Execute @ref.SelectAllTextAsync() method select the all text

Basic usage

@inject IStringLocalizer<InputsKeyboard> Localizer

<div>
    <div class="row g-3">
        <div class="col-auto col-form-label">
            <span>@Localizer["InputsKeyboardSpan"]</span>
        </div>
        <div class="col-6">
            <BootstrapInput TValue="string" PlaceHolder="@PlaceHolderText" OnEnterAsync="OnEnterAsync" OnEscAsync="OnEscAsync" />
        </div>
        <div class="col-12">
            <div>@((MarkupString)Localizer["InputsKeyboardTips1"].Value)</div>
        </div>
    </div>
    <p>@((MarkupString)Localizer["InputsKeyboardTips2"].Value)</p>
    <div class="row g-3">
        <div class="col-auto col-form-label">
            <span>@Localizer["InputsKeyboardSpan"]</span>
        </div>
        <div class="col-6">
            <BootstrapInput TValue="string" PlaceHolder="@PlaceHolderText" @ref="Input" OnEnterAsync="OnEnterSelectAllAsync" />
        </div>
    </div>
    <BlockLogger class="mt-3" @ref="Trace" />
</div>

@code {
    private string? PlaceHolderText { get; set; }

    [NotNull]
    private Foo? Model { get; set; }

    [NotNull]
    private BlockLogger? Trace { get; set; }

    [NotNull]
    private BootstrapInput<string>? Input { get; set; }

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

        PlaceHolderText = Localizer["PlaceHolder"];
        Model = new Foo() { Name = Localizer["TestName"] };
    }

    private Task OnEnterAsync(string val)
    {
        Trace.Log($"Enter {Localizer["InputsKeyboardLog"]}: {val}");
        return Task.CompletedTask;
    }

    private Task OnEscAsync(string val)
    {
        Trace.Log($"Esc {Localizer["InputsKeyboardLog"]}: {val}");
        return Task.CompletedTask;
    }

    private async Task OnEnterSelectAllAsync(string val)
    {
        Trace.Log($"Enter call SelectAllText {Localizer["InputsKeyboardLog"]}: {val}");
        await Input.SelectAllTextAsync();
    }
}

One-way binding data

Displays the value of variables within the component

Demo

One-way binding

@inject IStringLocalizer<InputsPlaceholder> Localizer

<div class="row g-3">
    <div class="col-auto col-form-label">
        <span>@Localizer["InputsPlaceholderSpan"]</span>
    </div>
    <div class="col-6">
        <BootstrapInput PlaceHolder="@PlaceHolderText" Value="@Model.Name" />
    </div>
</div>

@code {
    private string? PlaceHolderText { get; set; }

    [NotNull]
    private Foo? Model { get; set; }

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

        PlaceHolderText = Localizer["PlaceHolder"];
        Model = new Foo() { Name = Localizer["TestName"] };
    }
}

Bind data in both directions

Binding variables within a component, data is automatically synchronized

Demo

when BootstrapInput components turn on bidirectional binding, the Display/DisplayName label value is automatically fetched based on the bound Model property value and appears as a pre-Label, by DisplayText Properties can customize the display of pre-labels, or turn off the display of pre-labels through the ShowLabel property

Custom labels

Set the DisplayText value to custom label

Custom labels

Occupants

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

Name

Do not occupy seats

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

@inject IStringLocalizer<InputsLabels> Localizer

<div class="row g-3">
    <Divider Text="@Localizer["InputsLabelsDivider1"]" />
    <div class="col-12">
        <p>@((MarkupString)Localizer["InputsLabelsTips1"].Value)</p>
    </div>
    <div class="col-12">
        <BootstrapInput PlaceHolder="@PlaceHolderText" @bind-Value="@Model.Name"
                        DisplayText="@Localizer["InputLabelsText"]" ShowLabel="true" />
    </div>
    <Divider Text="@Localizer["InputsLabelsDivider2"]" />
    <div class="col-12">
        <p>@((MarkupString)Localizer["InputsLabelsTps2"].Value)</p>
    </div>
    <div class="col-12">
        <BootstrapInput PlaceHolder="@PlaceHolderText" @bind-Value="@Model.Name" ShowLabel="true" />
    </div>
    <Divider Text="@Localizer["InputsLabelsDivider3"]" />
    <div class="col-12">
        <p>@((MarkupString)Localizer["InputsLabelsTips3"].Value)</p>
    </div>
    <div class="col-12">
        <BootstrapInput PlaceHolder="@PlaceHolderText" @bind-Value="@Model.Name" />
    </div>
</div>

@code {
    private string? PlaceHolderText { get; set; }

    [NotNull]
    private Foo? Model { get; set; }

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

        PlaceHolderText = Localizer["PlaceHolder"];
        Model = new Foo() { Name = Localizer["TestName"] };
    }
}

Client valiation

Check data validity and prompt automatically based on custom validation rules

Demo

Tips

When using bidirectional binding, you will automatically look for the key value the resource file with a value of {FieldName}.PlaceHolder the corresponding value as placeholder shows that in this example, the placeholder value is the Name.PlaceHolder key corresponding value in the resource filerequired non-empty

@inject IStringLocalizer<InputsValidateForm> Localizer

<div>
    <ValidateForm Model="@Model">
        <BootstrapInput maxlength="5" @bind-Value="@Model.Name" />
    </ValidateForm>
</div>

@code {
    [NotNull]
    private Foo? Model { get; set; }

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

        Model = new Foo() { Name = Localizer["TestName"] };
    }
}

The password box

By setting the property type value to password the password input box that is blocked by * after entering text

Demo

In order to support more text box properties this component can be written directly to type='email' type='number' type='phone' and so onhtml5 all property values supported by the new standard, the component does not set the type value using the default type='text'

@inject IStringLocalizer<InputsPassword> Localizer

<div>
    <BootstrapInput TValue="string" PlaceHolder="@Localizer["PlaceHolder"]" type="password" maxlength="5" style="width: 200px;" />
</div>

@code {
    [NotNull]
    private Foo? Model { get; set; }

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

        Model = new Foo() { Name = Localizer["TestName"] };
    }
}

Generic binding

BootstrapInput component bidirectional binding value is generic, in this case a two-way binding of an int type value

Demo

The binding value: 000

@inject IStringLocalizer<InputsGeneric> Localizer

<div>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <BootstrapInput FormatString="000" step="1" PlaceHolder="@Localizer["PlaceHolder"]" @bind-Value="@Model.Count" />
        </div>
        <div class="col-12 col-sm-6">
            <div class="col-form-label">@Localizer["InputsGenericBindValue"]: @Model.Count.ToString("000")</div>
        </div>
    </div>
</div>

@code {
    [NotNull]
    private Foo? Model { get; set; }

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

        Model = new Foo() { Name = Localizer["TestName"] };
    }
}

Disable

When you set the IsDisabled property value to true, the component suppresses input

Demo

<div>
    <BootstrapInput TValue="string" IsDisabled="true" />
</div>

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

Set up Formatter

The BootstrapInput component binds byte[] array and formats it as an example of base64 encoded string

Set up Formatter

@inject IStringLocalizer<InputsFormatString> Localizer

<div>
    <div class="row g-3">
        <div class="col-12 col-sm-6 col-form-label">@Localizer["InputsFormatStringSetting"] <code class="ms-1">FormatString</code></div>
        <div class="col-12 col-sm-6">
            <BootstrapInput Value="DateTime.Now" FormatString="yyyy-MM-dd" IsDisabled="true" />
        </div>
        <div class="col-12 col-sm-6 col-form-label">@Localizer["InputsFormatStringSetting"] <code class="ms-1">Formatter</code></div>
        <div class="col-12 col-sm-6">
            <BootstrapInput Value="DateTime.Now" Formatter="@DateTimeFormatter" IsDisabled="true" />
        </div>
    </div>
    <p class="mt-3">@((MarkupString)Localizer["InputsFormatStringTips"].Value)</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6 col-form-label">@Localizer["InputsFormatStringSetting"] <code class="ms-1">Formatter</code></div>
        <div class="col-12 col-sm-6">
            <BootstrapInput Value="@ByteArray" Formatter="@ByteArrayFormatter" IsDisabled="true" />
        </div>
    </div>
</div>

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

    private static string ByteArrayFormatter(byte[] source) => Convert.ToBase64String(source);

    [NotNull]
    private Foo? Model { get; set; }

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

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

        Model = new Foo() { Name = Localizer["TestName"] };
    }
}

The password box

Use the BootstrapPassword component

Demo

Basic usage

@inject IStringLocalizer<InputsPassword2> Localizer

<div class="row g-3">
    <div class="col-auto col-form-label">
        <span>@Localizer["InputsPassword2Span"]</span>
    </div>
    <div class="col-6">
        <BootstrapPassword PlaceHolder="@Localizer["PlaceHolder"]" IsSelectAllTextOnFocus="true" />
    </div>
</div>

@code {
    [NotNull]
    private Foo? Model { get; set; }

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

        Model = new Foo() { Name = Localizer["TestName"] };
    }
}

Trim

Use IsTrim="true" to automatically trim white space when entering content

Demo

The front and back spaces in the component will be trimmed when set IsTrim to true

Basic usage

123Tom456

@inject IStringLocalizer<InputsTrim> Localizer

<div class="row g-3">
    <div class="col-auto col-form-label">
        <span>@Localizer["InputsTrimSpan"]</span>
    </div>
    <div class="col-6">
        <BootstrapInput @bind-Value="Model.Name" PlaceHolder="@Localizer["PlaceHolder"]" IsTrim="true" />
        <div class="mt-2">123<span>@Model.Name</span>456</div>
    </div>
</div>

@code {
    [NotNull]
    private Foo? Model { get; set; }

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

        Model = new Foo() { Name = Localizer["TestName"] };
    }
}

Attributes

B station related video link

交流群

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

Input

Enter characters with the mouse or keyboard

Demo

Demo

Demo

Demo

Demo

Demo

Tips

Demo

Demo

Demo

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.4.4-beta01