Button Group

连接成一条按钮栏的按钮：共享内侧边缘，只保留外侧圆角。

示例可交互

Button Group — Avalonia UIKit

Live demo unavailable

<StackPanel Classes="button-group" Orientation="Horizontal" HorizontalAlignment="Left">
  <Button Classes="outline" Content="Day" />
  <Button Classes="outline selected" Content="Week" />
  <Button Classes="outline" Content="Month" />
</StackPanel>

用法

把按钮放进 StackPanel Classes="button-group" 中，水平或垂直均可，并让其 Spacing 保持为 0。每个按钮仍是 Button，拥有自己的样式类：颜色、outline、selected、尺寸与圆角类都照常生效，Click 或 Command 也仍位于各个按钮上。

分组后，只有第一个和最后一个按钮保留外侧圆角，之后每个按钮都会去掉与前一个共享的边缘，因此相邻按钮共用一条 1px 分隔线（无边框变体没有可去掉的边缘）。焦点环会贴合各个按钮的圆角。

uikit:ButtonGroup 是同一分组的控件形式，其选中项会由应用应用到各个按钮上。

示例

默认、primary 与 ghost 分组，实心与描边；分组可接受 Button 的任意颜色。

变体可交互

Live demo unavailable

<WrapPanel ItemSpacing="16" LineSpacing="12">
  <StackPanel Classes="button-group" Orientation="Horizontal">
    <Button Content="One" />
    <Button Content="Two" />
    <Button Content="Three" />
  </StackPanel>
  <StackPanel Classes="button-group" Orientation="Horizontal">
    <Button Classes="primary" Content="One" />
    <Button Classes="primary" Content="Two" />
    <Button Classes="primary" Content="Three" />
  </StackPanel>
  <StackPanel Classes="button-group" Orientation="Horizontal">
    <Button Classes="ghost" Content="One" />
    <Button Classes="ghost" Content="Two" />
    <Button Classes="ghost" Content="Three" />
  </StackPanel>
  <StackPanel Classes="button-group" Orientation="Horizontal">
    <Button Classes="outline" Content="One" />
    <Button Classes="outline" Content="Two" />
    <Button Classes="outline" Content="Three" />
  </StackPanel>
  <StackPanel Classes="button-group" Orientation="Horizontal">
    <Button Classes="primary outline" Content="One" />
    <Button Classes="primary outline" Content="Two" />
    <Button Classes="primary outline" Content="Three" />
  </StackPanel>
  <StackPanel Classes="button-group" Orientation="Horizontal">
    <Button Classes="ghost outline" Content="One" />
    <Button Classes="ghost outline" Content="Two" />
    <Button Classes="ghost outline" Content="Three" />
  </StackPanel>
</WrapPanel>

按钮的尺寸类决定组的尺寸；请为每个按钮设置相同的尺寸。

尺寸可交互

Live demo unavailable

<WrapPanel ItemSpacing="16" LineSpacing="12">
  <StackPanel Classes="button-group" Orientation="Horizontal">
    <Button Classes="outline xsmall" Content="One" />
    <Button Classes="outline xsmall" Content="Two" />
    <Button Classes="outline xsmall" Content="Three" />
  </StackPanel>
  <StackPanel Classes="button-group" Orientation="Horizontal">
    <Button Classes="outline small" Content="One" />
    <Button Classes="outline small" Content="Two" />
    <Button Classes="outline small" Content="Three" />
  </StackPanel>
  <StackPanel Classes="button-group" Orientation="Horizontal">
    <Button Classes="outline" Content="One" />
    <Button Classes="outline" Content="Two" />
    <Button Classes="outline" Content="Three" />
  </StackPanel>
  <StackPanel Classes="button-group" Orientation="Horizontal">
    <Button Classes="outline large" Content="One" />
    <Button Classes="outline large" Content="Two" />
    <Button Classes="outline large" Content="Three" />
  </StackPanel>
</WrapPanel>

Orientation="Vertical" 会把按钮纵向堆叠，并改为共享水平边缘。

垂直可交互

Live demo unavailable

<StackPanel Orientation="Horizontal" Spacing="16">
  <StackPanel Classes="button-group" Orientation="Vertical">
    <Button Classes="outline" Content="One" />
    <Button Classes="outline" Content="Two" />
    <Button Classes="outline" Content="Three" />
  </StackPanel>
  <StackPanel Classes="button-group" Orientation="Vertical">
    <Button Classes="primary" Content="One" />
    <Button Classes="primary" Content="Two" />
    <Button Classes="primary" Content="Three" />
  </StackPanel>
</StackPanel>

Button Group

#用法

#示例

用法

示例