Button

沿 Avalonia 的 Button 使用样式类，得到各种颜色、修饰与尺寸的按钮外观。

示例可交互

Button — Avalonia UIKit

Live demo unavailable

<WrapPanel ItemSpacing="8" LineSpacing="8">
  <Button Content="Default" />
  <Button Classes="primary" Content="Primary" />
  <Button Classes="secondary" Content="Secondary" />
  <Button Classes="danger" Content="Danger" />
  <Button Classes="ghost" Content="Ghost" />
  <Button Classes="link" Content="Link" />
  <Button Classes="primary outline" Content="Outline" />
  <Button Classes="icon-only ghost">
    <PathIcon Data="{StaticResource UIKit.Icon.Copy}" />
  </Button>
  <Button Content="Disabled" IsEnabled="False" />
</WrapPanel>

用法

主题覆盖 Button。每种外观都是一个样式类，样式类可以组合，如 Classes="danger outline small"。内容是文本、PathIcon，或二者放在一个水平的 StackPanel 中。

分组	样式类
颜色	`primary`、`secondary`、`danger`、`warning`、`success`、`info`、`ghost`、`link`、`text`（不加则为 Default）
修饰	`outline`、`compact`、`selected`、`icon-only`
尺寸	`xsmall`、`small`、`large`（默认为 medium）
圆角	`rounded-none`、`rounded-small`、`rounded-large`、`rounded-full`

selected 使用选中状态的颜色，浮出层打开的按钮也会这样显示。link 与 text 按钮没有高度与内边距，链接只在普通状态下带下划线。焦点环仅在键盘焦点时显示（:focus-visible），指针按下时不显示。

有两个附加属性补上了 Avalonia 按钮缺少的状态。它们对 Button 及派生控件有效（ToggleButton、RepeatButton、DropDownButton、HyperlinkButton），也包括 TextBox 内的按钮。

属性	作用
`uikit:Buttons.IsLoading`	按钮忽略指针、Enter、空格、访问键、`IsDefault` 与 `IsCancel`，不触发 `Click`，也不执行 `Command`，但仍保持启用且可获得焦点。它会淡出到 80%，指针悬停时保持原本的颜色，图标则变为旋转的加载指示。
`uikit:Buttons.LoadingIcon`	加载指示旋转所用的几何数据（默认为 Lucide 的 loader）。
`uikit:Buttons.TakesFocusOnPointer`	为 `False` 时，用指针按下按钮不会改变原有的焦点，因此 `TextBox` 得以保留焦点与选区。Tab 仍可聚焦按钮。

旋转的图标是作为按钮内容的 PathIcon，或是作为内容的那个面板的第一个子元素；没有图标的按钮只会淡出。LoadingIcon 与 TakesFocusOnPointer 会被继承，因此容器可为其内部的所有按钮统一设置。

示例

所有颜色，包括无内边距的 link 与 text 变体。

变体可交互

Live demo unavailable

<WrapPanel ItemSpacing="8" LineSpacing="8">
  <Button Content="Default" />
  <Button Classes="primary" Content="Primary" />
  <Button Classes="secondary" Content="Secondary" />
  <Button Classes="danger" Content="Danger" />
  <Button Classes="warning" Content="Warning" />
  <Button Classes="success" Content="Success" />
  <Button Classes="info" Content="Info" />
  <Button Classes="ghost" Content="Ghost" />
  <Button Classes="link" Content="Link" />
  <Button Classes="text" Content="Text" />
</WrapPanel>

四种尺寸；medium 无需样式类。

尺寸可交互

Live demo unavailable

<WrapPanel ItemSpacing="8" LineSpacing="8">
  <Button Classes="xsmall" Content="Extra small" />
  <Button Classes="small" Content="Small" />
  <Button Content="Medium" />
  <Button Classes="large" Content="Large" />
</WrapPanel>

outline 为每种颜色提供描边外观。

Outline可交互

Live demo unavailable

<WrapPanel ItemSpacing="8" LineSpacing="8">
  <Button Classes="outline" Content="Default" />
  <Button Classes="primary outline" Content="Primary" />
  <Button Classes="secondary outline" Content="Secondary" />
  <Button Classes="danger outline" Content="Danger" />
  <Button Classes="warning outline" Content="Warning" />
  <Button Classes="success outline" Content="Success" />
  <Button Classes="info outline" Content="Info" />
  <Button Classes="ghost outline" Content="Ghost" />
</WrapPanel>

icon-only 为 PathIcon 生成方形按钮（按尺寸为 20、24 或 32px），可用于任何颜色；图标与文字并排时，把水平的 StackPanel 作为内容。

图标可交互

Live demo unavailable

<StackPanel Spacing="8">
  <WrapPanel ItemSpacing="8" LineSpacing="8">
    <Button Classes="icon-only">
      <PathIcon Data="{StaticResource UIKit.Icon.Copy}" />
    </Button>
    <Button Classes="icon-only primary">
      <PathIcon Data="{StaticResource UIKit.Icon.Plus}" />
    </Button>
    <Button Classes="icon-only secondary">
      <PathIcon Data="{StaticResource UIKit.Icon.Search}" />
    </Button>
    <Button Classes="icon-only danger">
      <PathIcon Data="{StaticResource UIKit.Icon.Close}" />
    </Button>
    <Button Classes="icon-only ghost">
      <PathIcon Data="{StaticResource UIKit.Icon.Ellipsis}" />
    </Button>
    <Button Classes="icon-only outline">
      <PathIcon Data="{StaticResource UIKit.Icon.Info}" />
    </Button>
  </WrapPanel>
  <WrapPanel ItemSpacing="8" LineSpacing="8">
    <Button Classes="icon-only xsmall">
      <PathIcon Data="{StaticResource UIKit.Icon.Copy}" />
    </Button>
    <Button Classes="icon-only small">
      <PathIcon Data="{StaticResource UIKit.Icon.Copy}" />
    </Button>
    <Button Classes="icon-only">
      <PathIcon Data="{StaticResource UIKit.Icon.Copy}" />
    </Button>
    <Button Classes="icon-only large">
      <PathIcon Data="{StaticResource UIKit.Icon.Copy}" />
    </Button>
  </WrapPanel>
  <WrapPanel ItemSpacing="8" LineSpacing="8">
    <Button Classes="primary">
      <StackPanel Orientation="Horizontal" Spacing="6">
        <PathIcon Data="{StaticResource UIKit.Icon.Plus}" />
        <TextBlock Text="New file" />
      </StackPanel>
    </Button>
    <Button Classes="outline">
      <StackPanel Orientation="Horizontal" Spacing="6">
        <TextBlock Text="Open" />
        <PathIcon Data="{StaticResource UIKit.Icon.ExternalLink}" />
      </StackPanel>
    </Button>
  </WrapPanel>
</StackPanel>

compact 在每种尺寸下都收窄内边距与最小宽度。

Compact可交互

Live demo unavailable

<WrapPanel ItemSpacing="8" LineSpacing="8">
  <Button Classes="compact xsmall" Content="OK" />
  <Button Classes="compact small" Content="OK" />
  <Button Classes="compact" Content="OK" />
  <Button Classes="compact large" Content="OK" />
  <Button Classes="compact primary" Content="Compact primary" />
  <Button Classes="compact outline" Content="Compact outline" />
</WrapPanel>

圆角样式类替换主题的圆角半径，从直角到胶囊形。

圆角可交互

Live demo unavailable

<StackPanel Spacing="8">
  <WrapPanel ItemSpacing="8" LineSpacing="8">
    <Button Classes="rounded-none" Content="None" />
    <Button Classes="rounded-small" Content="Small" />
    <Button Content="Medium" />
    <Button Classes="rounded-large" Content="Large" />
    <Button Classes="rounded-full" Content="Full" />
  </WrapPanel>
  <WrapPanel ItemSpacing="8" LineSpacing="8">
    <Button Classes="primary rounded-none" Content="None" />
    <Button Classes="primary rounded-small" Content="Small" />
    <Button Classes="primary" Content="Medium" />
    <Button Classes="primary rounded-large" Content="Large" />
    <Button Classes="primary rounded-full" Content="Full" />
  </WrapPanel>
</StackPanel>

IsEnabled="False" 把每种变体都切换到禁用的颜色。

禁用可交互

Live demo unavailable

<WrapPanel ItemSpacing="8" LineSpacing="8">
  <Button Content="Default" IsEnabled="False" />
  <Button Classes="primary" Content="Primary" IsEnabled="False" />
  <Button Classes="secondary" Content="Secondary" IsEnabled="False" />
  <Button Classes="danger" Content="Danger" IsEnabled="False" />
  <Button Classes="ghost" Content="Ghost" IsEnabled="False" />
  <Button Classes="link" Content="Link" IsEnabled="False" />
  <Button Classes="primary outline" Content="Outline" IsEnabled="False" />
</WrapPanel>

uikit:Buttons.IsLoading 分别用于带图标的按钮、只有图标的按钮和只有文字的按钮，另有一个使用 LoadingIcon 的按钮；最后一个按钮在被点击后加载两秒。

加载可交互

Live demo unavailable

<StackPanel Spacing="8">
  <WrapPanel ItemSpacing="8" LineSpacing="8">
    <Button Classes="primary" uikit:Buttons.IsLoading="True">
      <StackPanel Orientation="Horizontal" Spacing="8">
        <PathIcon Data="{StaticResource UIKit.Icon.Check}" />
        <TextBlock Text="Saving" VerticalAlignment="Center" />
      </StackPanel>
    </Button>
    <Button Classes="outline" uikit:Buttons.IsLoading="True">
      <StackPanel Orientation="Horizontal" Spacing="8">
        <PathIcon Data="{StaticResource UIKit.Icon.Copy}" />
        <TextBlock Text="Copying" VerticalAlignment="Center" />
      </StackPanel>
    </Button>
    <Button Classes="ghost icon-only" uikit:Buttons.IsLoading="True">
      <PathIcon Data="{StaticResource UIKit.Icon.Search}" />
    </Button>
    <Button Content="Submit" uikit:Buttons.IsLoading="True" />
  </WrapPanel>
  <WrapPanel ItemSpacing="8" LineSpacing="8">
    <Button Classes="secondary" uikit:Buttons.IsLoading="True"
            uikit:Buttons.LoadingIcon="{StaticResource UIKit.Icon.LoaderCircle}">
      <StackPanel Orientation="Horizontal" Spacing="8">
        <PathIcon Data="{StaticResource UIKit.Icon.Check}" />
        <TextBlock Text="Syncing" VerticalAlignment="Center" />
      </StackPanel>
    </Button>
    <Button Classes="primary" Click="OnSave">
      <StackPanel Orientation="Horizontal" Spacing="8">
        <PathIcon Data="{StaticResource UIKit.Icon.Check}" />
        <TextBlock Text="Save" VerticalAlignment="Center" />
      </StackPanel>
    </Button>
  </WrapPanel>
</StackPanel>

在其所在面板上设置 uikit:Buttons.TakesFocusOnPointer="False" 后，按钮会改变 TextBox 中选中的文本，而不夺走它的焦点。

保持焦点可交互

Live demo unavailable

<StackPanel Orientation="Horizontal" Spacing="8" uikit:Buttons.TakesFocusOnPointer="False">
  <TextBox Name="Note" Width="220" Text="Select a word, press Upper" />
  <Button Classes="outline" Content="Upper" Click="OnUpper" />
  <Button Classes="outline" Content="Lower" Click="OnLower" />
</StackPanel>

Button

#用法

#示例

用法

示例