
On-Screen keyboard
Precautions :
This component relies on BootstrapBlazor.OnScreenKeyboard
, which needs to reference its component package when using this component
Nuget package installation
Install the components of BootstrapBlazor.OnScreenKeyboard using nuget.org
.NET CLI
dotnet add package BootstrapBlazor.SignaturePad
PackageReference
<PackageReference Include="BootstrapBlazor.SignaturePad" />
Package Manager
Install-Package BootstrapBlazor.SignaturePad
Basic
Razor
1. <OnScreenKeyboard />
2. <input class="virtualkeyboard" data-kioskboard-type="all" data-kioskboard-specialcharacters="true" />
Basic usage
Full Keyboard
Demo
Keyboard
Demo
Numpad
Demo
Theme dark
Demo
Special characters europe
Demo
Special characters in customer
[- + =]
Demo
Pre>
BootstrapBlazor component
Demo
Bind
virtualkeyboard
BootstrapInput
BootstrapPassword
Textarea
Attributes
Loading...
KeyboardOption
Loading...
KeyboardEnum
Loading...
@page "/onscreenkeyboards"
@namespace BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<OnScreenKeyboards> Localizer
<h3>On-Screen keyboard</h3>
<p><b>Precautions :</b></p>
<p>This component relies on <a href='https://www.nuget.org/packages?q-BootstrapBlazor.OnScreenKeyboard' target'_blank'><code>BootstrapBlazor.OnScreenKeyboard</code></a>, which needs to reference its component package when using this component</p>
<p><b>Nuget package installation</b></p>
<p>Install the</code> components of <code>BootstrapBlazor.OnScreenKeyboard using <a href='https://www.nuget.org/packages?q-BootstrapBlazor.OnScreenKeyboard' target'_blank'>nuget.org</a></p>
<div class="code-label">.NET CLI</div>
<Pre class="no-highlight">dotnet add package BootstrapBlazor.SignaturePad</Pre>
<div class="code-label">PackageReference</div>
<Pre class="no-highlight"><PackageReference Include="BootstrapBlazor.SignaturePad" /></Pre>
<div class="code-label">Package Manager</div>
<Pre class="no-highlight">Install-Package BootstrapBlazor.SignaturePad</Pre>
<p><b>Basic</b></p>
<div class="code-label">Razor</div>
<Pre class="no-highlight">1. <OnScreenKeyboard /></Pre>
<Pre class="no-highlight">2. <input class="virtualkeyboard" data-kioskboard-type="all" data-kioskboard-specialcharacters="true" /></Pre>
<DemoBlock Title="Basic usage" Introduction="Full Keyboard" Name="Normal">
<OnScreenKeyboard ClassName="@ClassName" KeyboardKeys="KeyboardKeysType.english" />
<input class="form-control @ClassName"
data-kioskboard-type="@KeyboardType.all.ToString()"
data-kioskboard-specialcharacters="true"
placeholder='Full Keyboard' />
</DemoBlock>
<DemoBlock Title="Keyboard" Introduction="" Name="BlockKeyboardTypekeyboard">
<input class="form-control @ClassName"
data-kioskboard-type="@KeyboardType.keyboard.ToString()"
data-kioskboard-placement="@KeyboardPlacement.bottom.ToString()"
placeholder='Keyboard' />
</DemoBlock>
<DemoBlock Title="Numpad" Introduction="" Name="BlockKeyboardTypeNumpadTitle">
<input class="form-control @ClassName"
data-kioskboard-type="@KeyboardType.numpad.ToString()"
data-kioskboard-placement="@(KeyboardPlacement.bottom.ToString())"
placeholder='Numpad' />
</DemoBlock>
<DemoBlock Title="Theme dark" Introduction="" Name="BlockKeyboardThemeDarkTitle">
<input class="form-control @ClassName1"
data-kioskboard-type="@KeyboardType.keyboard.ToString()"
placeholder='Theme dark' />
<OnScreenKeyboard ClassName="@ClassName1" Option="Option1" />
</DemoBlock>
<DemoBlock Title="Special characters europe" Introduction="" Name="BlockSpecialcharactersTitle">
<input class="form-control @ClassName2"
data-kioskboard-specialcharacters="true"
placeholder='Special characters europe' />
<OnScreenKeyboard ClassName="@ClassName2" Option="Option2" />
</DemoBlock>
<DemoBlock Title="Special characters in customer" Introduction="[- + =]" Name="BlockSpecialcharactersCustomerTitle">
<input class="form-control @ClassName3" data-kioskboard-specialcharacters="true" placeholder='Special characters in customer' />
<OnScreenKeyboard ClassName="@ClassName3" Option="Option3" />
Pre>
</DemoBlock>
<DemoBlock Title="BootstrapBlazor component" Introduction="" Name="App">
<p>Bind</p>
<OnScreenKeyboard ClassName="@ClassNameBB" Option="OptionBB" />
<div class="form-control textarea-demo"> @BindValue</div>
<p>BootstrapInput</p>
<BootstrapInput class="@ClassNameBB" data-kioskboard-specialcharacters="true" placeholder="BootstrapInput" @bind-Value="@BindValue" />
<p>BootstrapPassword</p>
<BootstrapPassword class="@ClassNameBB" data-kioskboard-specialcharacters="true" placeholder="BootstrapPassword" @bind-Value="@BindValue" />
<p>Textarea</p>
<Textarea class="@ClassNameBB" data-kioskboard-specialcharacters="true" placeholder="Textarea" rows="4" @bind-Value="@BindValue" />
</DemoBlock>
<Tips class="mt-3">
<p><b>If the performance is not normal, you can add this css to debug :</b></p>
<p><code> .kioskboard-body-padding { padding-top: unset !important;} </code></p>
</Tips>
<AttributeTable Items="@GetAttributes()" />
<AttributeTable Items="@GetKeyboardOptionAttributes()" Title="KeyboardOption" />
<AttributeTable Items="@GetKeyboardEnumAttributes()" Title="KeyboardEnum" />
// 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;
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
/// 屏幕键盘
/// </summary>
public sealed partial class OnScreenKeyboards
{
string BindValue { get; set; } = "virtualkeyboard";
string ClassName { get; set; } = "virtualkeyboard";
string ClassName1 { get; set; } = "virtualkeyboard1";
string ClassName2 { get; set; } = "virtualkeyboard2";
string ClassName3 { get; set; } = "virtualkeyboard3";
string ClassNameBB { get; set; } = "virtualkeyboardbb";
static readonly Dictionary<string, string> Keys1 = new() { { "0", "L" }, { "1", "O" } };
static readonly Dictionary<string, string> Keys2 = new() { { "0", "V" }, { "1", "E" } };
static readonly List<Dictionary<string, string>> KeysArray = new() { Keys1, Keys2 };
static KeyboardOption Option1 => new()
{
keysFontFamily = "Barlow",
keysFontWeight = "500",
Theme = KeyboardTheme.dark,
};
static KeyboardOption Option2 => new()
{
KeyboardSpecialcharacters = KeyboardSpecialcharacters.europe
};
static KeyboardOption Option3 => new()
{
CustomerKeyboardSpecialcharacters = new string[] { "中", "国", "女", "足", "牛啊" }
};
static KeyboardOption OptionBB => new()
{
autoScroll = true
};
/// <summary>
/// 获得属性方法
/// </summary>
/// <returns></returns>
private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem()
{
Name = "ClassName",
Description = "获得/设置 组件class名称",
Type = "string",
ValueList = " — ",
DefaultValue = "virtualkeyboard"
},
new AttributeItem()
{
Name = "KeyboardKeys",
Description = "获得/设置 键盘语言布局",
Type = "KeyboardKeysType?",
ValueList = "arabic|english|french|german|hungarian|persian|russian|spanish|turkish",
DefaultValue = "english"
},
new AttributeItem()
{
Name = "Keyboard",
Description = "获得/设置 键盘类型",
Type = "KeyboardType",
ValueList = "全键盘 all | 字母 keyboard || 小数字键盘 numpad",
DefaultValue = "all"
},
new AttributeItem()
{
Name = "Placement",
Description = "获得/设置 对齐",
Type = "KeyboardPlacement",
ValueList = "顶端 top | 底部 bottom",
DefaultValue = "bottom"
},
new AttributeItem()
{
Name = "Placeholder",
Description = "获得/设置 占位符",
Type = "string",
ValueList = " — ",
DefaultValue = " - "
},
new AttributeItem()
{
Name = "Specialcharacters",
Description = "获得/设置 显示特殊字符切换按钮",
Type = "bool",
ValueList = " - ",
DefaultValue = "true"
},
new AttributeItem()
{
Name = "Option",
Description = "获得/设置 键盘配置",
Type = "KeyboardOption?",
ValueList = " - ",
DefaultValue = " - "
}
};
/// <summary>
/// 获得KeyboardOption属性
/// </summary>
/// <returns></returns>
private static IEnumerable<AttributeItem> GetKeyboardOptionAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem()
{
Name = "keysArrayOfObjects",
Description = "键盘布局数组",
Type = "List<Dictionary<string, string>>?",
ValueList = " — ",
DefaultValue = "英文键盘布局数组"
},
new AttributeItem()
{
Name = "KeyboardKeysType",
Description = "键盘语言布局",
Type = "KeyboardKeysType",
ValueList = "arabic|english|french|german|hungarian|persian|russian|spanish|turkish",
DefaultValue = "english"
},
new AttributeItem()
{
Name = "keysJsonUrl",
Description = "键盘布局.json文件的路径",
Type = "string",
ValueList = " - ",
DefaultValue = " - "
},
new AttributeItem()
{
Name = "KeyboardSpecialcharacters",
Description = "特殊符号键盘类型, 默认|欧洲|自定义",
Type = "KeyboardSpecialcharacters",
ValueList = "all|europe|customer",
DefaultValue = "all"
},
new AttributeItem()
{
Name = "CustomerKeyboardSpecialcharacters",
Description = "自定义特殊符号键盘",
Type = "string[]?",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem()
{
Name = "keysNumpadArrayOfNumbers",
Description = "自定义数字小键盘",
Type = "string?",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem()
{
Name = "language",
Description = "自定义键的语言代码",
Type = "string",
ValueList = "例如 de || en || fr || hu || tr 等...",
DefaultValue = "en"
},
new AttributeItem()
{
Name = "Theme",
Description = "键盘主题",
Type = "KeyboardTheme",
ValueList = "light|dark|flat|material|oldschool",
DefaultValue = " — "
},
new AttributeItem()
{
Name = "allowRealKeyboard",
Description = "允许或阻止物理键盘",
Type = "bool",
ValueList = "true|false",
DefaultValue = "true"
},
new AttributeItem()
{
Name = "allowMobileKeyboard",
Description = "允许或阻止使用移动键盘",
Type = "bool",
ValueList = "true|false",
DefaultValue = "true"
},
new AttributeItem()
{
Name = "cssAnimations",
Description = "打开或关闭键盘的 CSS 动画",
Type = "bool",
ValueList = "true|false",
DefaultValue = "true"
},
new AttributeItem()
{
Name = "cssAnimationsDuration",
Description = "CSS 动画持续时间(毫秒)",
Type = "int",
ValueList = " - ",
DefaultValue = "360"
},
new AttributeItem()
{
Name = "KeyboardCssAnimationsStyle",
Description = "打开或关闭键盘的 CSS 动画样式",
Type = "KeyboardCssAnimationsStyle",
ValueList = "slide|fade|flat|material|oldschool",
DefaultValue = "slide"
},
new AttributeItem()
{
Name = "keysAllowSpacebar",
Description = "启用或禁用空格键",
Type = "bool",
ValueList = "true|false",
DefaultValue = "true"
},
new AttributeItem()
{
Name = "keysSpacebarText",
Description = "空格键文本自定义",
Type = "string",
ValueList = " - ",
DefaultValue = "Space"
},
new AttributeItem()
{
Name = "keysFontFamily",
Description = "按键字体名称",
Type = "string",
ValueList = " - ",
DefaultValue = "sans-serif"
},
new AttributeItem()
{
Name = "keysFontSize",
Description = "按键文字尺寸",
Type = "string",
ValueList = " - ",
DefaultValue = "22px"
},
new AttributeItem()
{
Name = "keysFontWeight",
Description = "按键文字粗细",
Type = "string",
ValueList = " - ",
DefaultValue = "normal"
},
new AttributeItem()
{
Name = "keysIconSize",
Description = "按键图标大小",
Type = "string",
ValueList = " - ",
DefaultValue = "25px"
},
new AttributeItem()
{
Name = "autoScroll",
Description = "自动滚动",
Type = "bool",
ValueList = "true|false",
DefaultValue = "true"
},
};
/// <summary>
/// 获得KeyboardEnum属性
/// </summary>
/// <returns></returns>
private static IEnumerable<AttributeItem> GetKeyboardEnumAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem()
{
Name = "KeyboardKeysType",
Description = "键盘语言布局",
Type = "enum",
ValueList = "arabic|english|french|german|hungarian|persian|russian|spanish|turkish",
DefaultValue = "english"
},
new AttributeItem()
{
Name = "KeyboardType",
Description = "键盘类型, 全键盘 || 字母 || 小数字键盘",
Type = "enum",
ValueList = "all|keyboard|numpad",
DefaultValue = "all"
},
new AttributeItem()
{
Name = "KeyboardPlacement",
Description = "对齐, 顶端 || 底部",
Type = "enum",
ValueList = "bottom|top",
DefaultValue = "bottom"
},
new AttributeItem()
{
Name = "KeyboardSpecialcharacters",
Description = "特殊符号键盘类型, 默认 || 欧洲 || 自定义",
Type = "enum",
ValueList = "all|europe|customer",
DefaultValue = "all"
},
new AttributeItem()
{
Name = "KeyboardTheme",
Description = "键盘主题, 浅色 || 暗黑 || 平板 || material ||oldschool",
Type = "enum",
ValueList = "light|dark|flat|material|oldschool",
DefaultValue = "light"
},
new AttributeItem()
{
Name = "KeyboardCssAnimationsStyle",
Description = "打开或关闭键盘的 CSS 动画样式",
Type = "enum",
ValueList = "slide|fade|flat|material|oldschool",
DefaultValue = "slide"
},
};
}