Input Group

在同一个外框内包含前后缀附加内容的文本框。

示例可交互

Input Group — Avalonia UIKit

Live demo unavailable

<TextBox Classes="group" PlaceholderText="Search..." Width="280" HorizontalAlignment="Left">
  <TextBox.InnerLeftContent>
    <PathIcon Data="{StaticResource UIKit.Icon.Search}" />
  </TextBox.InnerLeftContent>
</TextBox>

用法

TextBox Classes="group" 就是输入组：InnerLeftContent 与 InnerRightContent 是附加内容，位于外框内，距边框 6px、距文字 8px。文字附加内容使用弱化色与中等字重；PathIcon 或 Button 同样可用。组内的 Button 会自动获得该组的按钮外观：一个紧凑的 ghost 按钮，悬停和按下时染上 muted 色，配合 icon-only 时为方形。外框的边框与背景在 120ms 内过渡到新颜色。

多行输入组使用 AcceptsReturn="True"，与 Textarea 相同。无效的输入组（Avalonia 的 :error，通过 DataValidationErrors 设置）会显示危险色边框和焦点环，即使未获得焦点或已禁用；禁用时整个输入组淡化至半强度。尺寸：xsmall、small、large（默认为 medium）。

uikit:InputGroup 是把输入组做成控件，可在输入框上下添加行。

示例

两侧都是文字附加内容，以及带后缀的只读输入框。

附加内容可交互

Live demo unavailable

<StackPanel Spacing="12" Width="280" HorizontalAlignment="Left">
  <TextBox Classes="group" Text="example" InnerLeftContent="https://" InnerRightContent=".com" />
  <TextBox Classes="group" Text="Read only" InnerRightContent="Saving" IsReadOnly="True" />
</StackPanel>

以按钮作为后缀：一个文字按钮、一个 icon-only 按钮，以及带 Send 按钮的多行输入组。

按钮可交互

Live demo unavailable

<StackPanel Spacing="12" Width="280" HorizontalAlignment="Left">
  <TextBox Classes="group" Text="avalonia">
    <TextBox.InnerRightContent>
      <Button Content="Clear" />
    </TextBox.InnerRightContent>
  </TextBox>
  <TextBox Classes="group" Text="avalonia">
    <TextBox.InnerRightContent>
      <Button Classes="icon-only">
        <PathIcon Data="{StaticResource UIKit.Icon.Close}" />
      </Button>
    </TextBox.InnerRightContent>
  </TextBox>
  <TextBox Classes="group" AcceptsReturn="True" MinLines="3" MaxLines="3" PlaceholderText="Write a message">
    <TextBox.InnerRightContent>
      <Button Content="Send" />
    </TextBox.InnerRightContent>
  </TextBox>
</StackPanel>

无效的输入组和禁用的输入组。演示通过一个持有单条校验消息的静态辅助方法设置 DataValidationErrors.Errors；实际应用则从绑定的校验中获取错误。

状态可交互

Live demo unavailable

<StackPanel Spacing="12" Width="280" HorizontalAlignment="Left">
  <TextBox Classes="group" Text="not an email"
           DataValidationErrors.Errors="{x:Static demos:ValidationErrors.InvalidEmail}">
    <TextBox.InnerLeftContent>
      <PathIcon Data="{StaticResource UIKit.Icon.Search}" />
    </TextBox.InnerLeftContent>
  </TextBox>
  <TextBox Classes="group" PlaceholderText="Search..." IsEnabled="False">
    <TextBox.InnerLeftContent>
      <PathIcon Data="{StaticResource UIKit.Icon.Search}" />
    </TextBox.InnerLeftContent>
  </TextBox>
</StackPanel>

Input Group

#用法

#示例

用法

示例