Skip to content

Input 输入框 ​

单行文本输入。支持类型、尺寸、禁用、只读、清除与最大字符数。

契约源:lh-ui-core/specs/input.json · 黄金用例:lh-ui-core/cases/input.json(8 条,已翻译为 xUnit 测试)

基础用法 ​

受控组件:宿主监听 ValueChange 并把新值回写 Value。

9:41Input 基础
青花瓷
请输入关键字

HTML 模拟预览(Windows / WinUI 3 外观),非真机渲染

csharp
var input = new LhInput
{
    Placeholder = "请输入关键字",
};
input.ValueChange += value => { /* 受控:回写 Value */ };

尺寸 ​

三档尺寸映射到 input.height / paddingHorizontal / fontSize 令牌。

9:41Input 尺寸
小型
中型
大型

HTML 模拟预览(Windows / WinUI 3 外观),非真机渲染

类型与状态 ​

Password 以圆点掩码显示;Disabled 与 Readonly 都不触发 ValueChange, 但只有 Disabled 呈现禁用样式;聚焦时描边取 color.focus + input.focusRingWidth。

9:41Input 状态
●●●●●●●●
禁用
聚焦描边

HTML 模拟预览(Windows / WinUI 3 外观),非真机渲染

清除与字数 ​

Clearable 为 true 且值非空时显示清除按钮,点击触发 ValueChange(""); Maxlength 超出时截断新输入。

9:41清除与字数
青花瓷
✕

HTML 模拟预览(Windows / WinUI 3 外观),非真机渲染

API ​

属性 ​

属性说明类型默认值
ValueChange值变化回调(受控);disabled / readonly 时不触发event Action<string>—
Focus获得焦点时触发event Action—
Blur失去焦点时触发event Action—
Value当前文本值(受控)string""
Placeholder占位提示文字,取 color.text.placeholder 令牌string""
Type输入类型;password 时以圆点掩码显示LhInputTypeText
Size输入框尺寸,映射到尺寸令牌LhInputSizeMedium
Disabled是否禁用(不响应输入、呈现禁用样式)boolfalse
Readonly是否只读(可聚焦但不接受输入)boolfalse
Clearable是否显示清除按钮boolfalse
Maxlength最大字符数;超出时截断新输入int?null

LhInputSize ​

值heightpaddingHorizontalfontSize
Smallinput.height.small(32epx)input.paddingHorizontal.small(12epx)input.fontSize.small(13)
Mediuminput.height.medium(40epx)input.paddingHorizontal.medium(16epx)input.fontSize.medium(14)
Largeinput.height.large(48epx)input.paddingHorizontal.large(20epx)input.fontSize.large(16)

令牌对照 ​

令牌用途
input.height.{small,medium,large}三档高度
input.paddingHorizontal.{small,medium,large}三档横向内边距
input.fontSize.{small,medium,large}三档字号
input.borderRadius / input.borderWidth圆角与失焦描边宽度
input.focusRingWidth / color.focus聚焦描边宽度与颜色
input.clearIconSize清除按钮图标尺寸
color.background.default / color.text.primary容器底/文字色
color.text.placeholder占位文字色
color.border.base失焦描边色
color.disabled.{bg,text}禁用态底/文字
typography.fontFamily国风衬线字体栈

黄金用例对照 ​

cases/input.json 的 8 条断言与 xUnit 测试的对应关系(tests/LhInputTests.cs):

case id断言本地测试
input-emits-onvaluechange输入触发 onValueChangeInput_Emits_OnValueChange
clearable-emits-empty-value清除触发 onValueChange("")Clearable_Emits_Empty_Value
disabled-blocks-input禁用态不触发且呈现禁用样式Disabled_Blocks_Input
readonly-blocks-input只读不触发但不呈现禁用样式Readonly_Blocks_Input
placeholder-uses-placeholder-token占位文字取占位令牌Placeholder_Uses_Placeholder_Token
focus-uses-focus-token聚焦描边取 focus 令牌Focus_Uses_Focus_Token
small-size-uses-small-tokens小号消费 small 尺寸令牌Small_Size_Uses_Small_Tokens
maxlength-truncates-input超出 maxlength 截断Maxlength_Truncates_Input

另有暗色专项:Dark_Colors_Come_From_Dark_Tokens / Dimensions_Are_Identical_In_Dark_Mode。 运行:cd lh-ui-windows && dotnet test。