Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

On-Screen keyboard

Precautions

This component relies on BootstrapBlazor.OnScreenKeyboard, which needs to reference its component package when using this component

Nuget Install

Use nuget.org to install BootstrapBlazor.OnScreenKeyboard component

.NET CLI

dotnet add package BootstrapBlazor.OnScreenKeyboard

PackageReference

<PackageReference Include="BootstrapBlazor.OnScreenKeyboard" Version="7.0.1" />

Package Manager

Install-Package BootstrapBlazor.OnScreenKeyboard

Basic

Razor

1. <OnScreenKeyboard />

2. <input class="virtualkeyboard" data-kioskboard-type="all" data-kioskboard-specialcharacters="true" />

Basic usage

Full Keyboard

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.OnScreenKeyboards> Localizer

<input class="form-control virtualkeyboard"
       data-kioskboard-type="@KeyboardType.all.ToString()"
       data-kioskboard-specialcharacters="true"
       placeholder='@Localizer["OnScreenKeyboardsNormalIntro"]' />
<OnScreenKeyboard ClassName="virtualkeyboard" KeyboardKeys="KeyboardKeysType.english" />

Keyboard

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.OnScreenKeyboards> Localizer

<input class="form-control virtualkeyboard"
       data-kioskboard-type="@KeyboardType.keyboard.ToString()"
       data-kioskboard-placement="@KeyboardPlacement.bottom.ToString()"
       placeholder='@Localizer["OnScreenKeyboardsTypekeyboardTitle"]' />

Numpad

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.OnScreenKeyboards> Localizer

<input class="form-control virtualkeyboard"
       data-kioskboard-type="@KeyboardType.numpad.ToString()"
       data-kioskboard-placement="@(KeyboardPlacement.bottom.ToString())"
       placeholder='@Localizer["OnScreenKeyboardsTypeNumpadTitle"]' />

Theme dark

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.OnScreenKeyboards> Localizer

<input class="form-control virtualkeyboard1"
       data-kioskboard-type="@KeyboardType.keyboard.ToString()"
       placeholder='@Localizer["OnScreenKeyboardsThemeDarkTitle"]' />
<OnScreenKeyboard ClassName="virtualkeyboard1" Option="Option" />

@code {
    static KeyboardOption Option => new()
    {
        keysFontFamily = "Barlow",
        keysFontWeight = "500",
        Theme = KeyboardTheme.dark,
    };
}

Special characters europe

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.OnScreenKeyboards> Localizer

<input class="form-control virtualkeyboard2"
       data-kioskboard-specialcharacters="true"
       placeholder='@Localizer["OnScreenKeyboardsSpecialcharactersTitle"]' />
<OnScreenKeyboard ClassName="virtualkeyboard2" Option="Option" />

@code {
    static KeyboardOption Option => new()
    {
        KeyboardSpecialcharacters = KeyboardSpecialcharacters.europe
    };
}

Special characters in customer

[- + =]

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.OnScreenKeyboards> Localizer

<input class="form-control virtualkeyboard3"
       data-kioskboard-specialcharacters="true"
       placeholder='@Localizer["OnScreenKeyboardsSpecialcharactersCustomerTitle"]' />
<OnScreenKeyboard ClassName="virtualkeyboard3" Option="Option" />

@code {
    static KeyboardOption Option => new()
    {
        CustomerKeyboardSpecialcharacters = new string[] { "中", "国", "女", "足", "牛啊" }
    };
}

BootstrapBlazor component

Demo

Bind

virtualkeyboard

BootstrapInput

BootstrapPassword

Textarea

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.OnScreenKeyboards> Localizer

<OnScreenKeyboard ClassName="virtualkeyboardbb" Option="Option" />
<div class="form-control textarea-demo"> @BindValue</div>
<p>BootstrapInput</p>
<BootstrapInput class="virtualkeyboardbb" data-kioskboard-specialcharacters="true" placeholder="BootstrapInput" @bind-Value="@BindValue" />
<p>BootstrapPassword</p>
<BootstrapPassword class="virtualkeyboardbb" data-kioskboard-specialcharacters="true" placeholder="BootstrapPassword" @bind-Value="@BindValue" />
<p>Textarea</p>
<Textarea class="virtualkeyboardbb" data-kioskboard-specialcharacters="true" placeholder="Textarea" rows="4" @bind-Value="@BindValue" />

@code {
    string BindValue { get; set; } = "virtualkeyboard";

    static KeyboardOption Option => new()
    {
        autoScroll = true
    };
}

Tips

If the performance is not normal, you can add this css to debug ：

.kioskboard-body-padding { padding-top: unset !important;}

Attributes

KeyboardOption

KeyboardEnum

B station related video link

交流群

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

On-Screen keyboard

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Tips

Attributes

KeyboardOption

KeyboardEnum

Bootstrap Blazor Component library updated to 7.4.4-beta01