InputGroup

输入框与其附加项共用一框，并支持上下两行，即 uikit:InputGroup。

示例可交互

InputGroup — Avalonia UIKit

Live demo unavailable

<StackPanel Spacing="12" Width="280" HorizontalAlignment="Left">
  <uikit:InputGroup>
    <uikit:InputGroupAddon>https://</uikit:InputGroupAddon>
    <TextBox Text="example" />
    <uikit:InputGroupAddon Alignment="InlineEnd">.com</uikit:InputGroupAddon>
  </uikit:InputGroup>
  <uikit:InputGroup IsInvalid="True">
    <TextBox Text="not an email" />
    <uikit:InputGroupAddon Alignment="InlineEnd">
      <Button Classes="icon-only">
        <PathIcon Data="{StaticResource UIKit.Icon.Close}" />
      </Button>
    </uikit:InputGroupAddon>
  </uikit:InputGroup>
  <uikit:InputGroup IsEnabled="False">
    <uikit:InputGroupAddon>
      <PathIcon Data="{StaticResource UIKit.Icon.Search}" />
    </uikit:InputGroupAddon>
    <TextBox PlaceholderText="Disabled" />
  </uikit:InputGroup>
</StackPanel>

用法

uikit:InputGroup 用一个框把 TextBox 与其 uikit:InputGroupAddon 包在一起，外观与输入组一致，并可在输入框上下各加一行。附加项的 Alignment 可为 InlineStart（输入框之前，默认）、InlineEnd（之后）、BlockStart（其上方一行）或 BlockEnd（下方一行）。附加项把其中的条目排成一行，间距 8px，使用弱化的中等字重文本；HorizontalAlignment="Right" 的条目会靠到该行末端。附加项中的按钮采用输入组的按钮外观。

其中的输入框沿用输入组的尺寸样式类，且自身不绘制边框；多行输入框至少 64px 高。输入框获得焦点时显示焦点环。IsInvalid，或输入框、输入组上的校验错误，会显示危险色边框与焦点环。禁用的输入组或禁用的输入框会一并禁用输入框与附加项，并把整个输入组淡化到一半；IsReadOnly 使输入框只读。在附加项上按下（附加项中的按钮除外）会把焦点移到输入框。

演示展示了文本附加项、带按钮的非法输入组，以及一个禁用的输入组。

示例

搜索框上方的一行文本，以及多行输入框下方带计数与 Send 按钮的编辑区。

上下两行可交互

Live demo unavailable

<StackPanel Spacing="12" Width="320" HorizontalAlignment="Left">
  <uikit:InputGroup>
    <uikit:InputGroupAddon Alignment="BlockStart">
      <TextBlock Text="Search the docs" />
    </uikit:InputGroupAddon>
    <uikit:InputGroupAddon>
      <PathIcon Data="{StaticResource UIKit.Icon.Search}" />
    </uikit:InputGroupAddon>
    <TextBox PlaceholderText="Search..." />
  </uikit:InputGroup>
  <uikit:InputGroup>
    <TextBox AcceptsReturn="True" MinLines="2" MaxLines="6" PlaceholderText="Write a message..." />
    <uikit:InputGroupAddon Alignment="BlockEnd">
      <TextBlock Text="0/280" />
      <Button Content="Send" HorizontalAlignment="Right" />
    </uikit:InputGroupAddon>
  </uikit:InputGroup>
</StackPanel>

InputGroup

#用法

#示例

用法

示例