跳到正文
浏览文档

Input

带焦点环与占位符的输入框,即 Avalonia 的 TextBox。

示例可交互
Input — Avalonia UIKit
Live demo unavailable
<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
  <TextBox PlaceholderText="Enter your name..." />
  <TextBox Text="Hello world" />
</StackPanel>

用法

主题覆盖 TextBox(MaskedTextBox 沿用同一套主题):外框使用输入背景与 1px 的 input 边框;当输入框本身或其中任意元素获得焦点时,边框转为 ring 并显示焦点环带;占位符 PlaceholderText 为弱化色;没有悬停外观。选中内容仅在输入框获得焦点时显示。

InnerLeftContent 与 InnerRightContent 分别是前缀和后缀,与文字相距一个尺寸级的间距;若要在同一个带边框的外框内放置附加内容,请参阅 Input Group。密码可用 PasswordChar="•" 打码,Classes="revealPasswordButton" 会添加一个掩码开关,即一个眼睛按钮,勾选时以明文显示文字。当文字非空且可编辑时,Classes="clearButton" 会添加清除按钮;点击它会清空文字并将焦点移回输入框。文字之后依次是掩码开关、清除按钮和 InnerRightContent。禁用状态用禁用背景填充,其文字、占位符和内部内容以半强度绘制;只读状态没有独立外观。

右键会打开包含剪切、复制、粘贴和全选及其快捷键的菜单。剪切需要可编辑的输入框中有选中内容,复制需要选中内容,粘贴需要可编辑的输入框;已打码的密码不能剪切或复制。这些标签是资源 UIKit.Strings.Cut、UIKit.Strings.Copy、UIKit.Strings.Paste 和 UIKit.Strings.SelectAll;替换它们即可翻译该菜单,或设置自己的 ContextFlyout。

样式类效果
xsmall、small、large高度分别为 20、24 和 44;medium(默认)为 32
revealPasswordButton用于显示已打码密码的眼睛按钮
clearButton用于清空文字的 x 按钮

校验与掩码

uikit:Inputs 附加属性为单行 TextBox 添加规则;在设置其中任何一项之前,外观与行为都不变。

属性效果
Pattern整段文字必须匹配的正则表达式,例如 ^[a-zA-Z0-9]*$
Validate整段文字必须通过的 Func<string, bool>(在代码中设置)
MaskPattern在输入时格式化文字的掩码
CleanOnEscape按 Escape 清空文字

当一次编辑(输入、粘贴、输入法上屏、剪切或删除)会留下的文字无法通过 Validate、掩码或 Pattern,而此前的文字能够通过时,该编辑会被拒绝。空文字始终通过;应用设置的、未通过校验的文字仍可继续编辑。按 Escape 清空与其他编辑一样可以撤销。

字符串形式的 MaskPattern 是模式掩码:9 接受数字,A 接受字母,# 接受字母或数字,* 接受任意字符,其他字符则是掩码自身写出的分隔符。(999)999-9999 会把 1234567890 变成 (123)456-7890,空输入框显示 (___)___-____,除非它有自己的占位符。uikit:NumberMask 接受数字:可选的正负号、数字和一个小数点,输入的全角数字与符号按 ASCII 处理。设置 Separator 后,输入时数字按三位分组,Fraction 限制小数点后的位数。应用设置的文字同样会套用掩码。Inputs.UnmaskValue(textBox) 返回去掉分隔符的文字。

示例

四种尺寸。

尺寸可交互
Live demo unavailable
<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
  <TextBox Classes="xsmall" PlaceholderText="Extra small" />
  <TextBox Classes="small" PlaceholderText="Small" />
  <TextBox PlaceholderText="Medium" />
  <TextBox Classes="large" PlaceholderText="Large" />
</StackPanel>

以小号搜索图标作为 InnerLeftContent,以 xsmall 的 ghost 图标按钮作为 InnerRightContent。

图标可交互
Live demo unavailable
<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
  <TextBox PlaceholderText="Search">
    <TextBox.InnerLeftContent>
      <PathIcon Classes="small" Data="{StaticResource UIKit.Icon.Search}" />
    </TextBox.InnerLeftContent>
  </TextBox>
  <TextBox Text="Hello world">
    <TextBox.InnerRightContent>
      <Button Classes="ghost xsmall icon-only">
        <PathIcon Data="{StaticResource UIKit.Icon.Info}" />
      </Button>
    </TextBox.InnerRightContent>
  </TextBox>
</StackPanel>

带掩码的密码,分别显示和不显示显示按钮。

密码可交互
Live demo unavailable
<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
  <TextBox PasswordChar="•" Text="password123" />
  <TextBox Classes="revealPasswordButton" PasswordChar="•" Text="password123" />
</StackPanel>

单独出现的清除按钮,以及位于显示按钮之后的清除按钮。

清除按钮可交互
Live demo unavailable
<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
  <TextBox Classes="clearButton" Text="Hello world" PlaceholderText="Type something" />
  <TextBox Classes="revealPasswordButton clearButton" PasswordChar="•" Text="password123" />
</StackPanel>

只读与禁用的输入框。

状态可交互
Live demo unavailable
<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
  <TextBox Text="Read only" IsReadOnly="True" />
  <TextBox Text="Disabled" IsEnabled="False" />
  <TextBox PlaceholderText="Disabled placeholder" IsEnabled="False" />
</StackPanel>

电话号码、字母与数字的模式,以及按千位分组并保留两位小数的金额。

掩码可交互
Live demo unavailable
<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
  <TextBox Width="240" uikit:Inputs.MaskPattern="(999)999-9999" />
  <TextBox Width="240" uikit:Inputs.MaskPattern="AAA-###-AAA" />
  <TextBox Width="240" PlaceholderText="Amount">
    <uikit:Inputs.MaskPattern>
      <uikit:NumberMask Separator="," Fraction="2" />
    </uikit:Inputs.MaskPattern>
  </TextBox>
</StackPanel>

仅接受字母与数字的输入框,以及按 Escape 清空的输入框。

校验可交互
Live demo unavailable
<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
  <TextBox Width="240" uikit:Inputs.Pattern="^[a-zA-Z0-9]*$" PlaceholderText="Letters and digits only" />
  <TextBox Width="240" uikit:Inputs.CleanOnEscape="True" Text="Press Escape to clear" />
</StackPanel>