Alert

带标题与图标的提示条，使用 info、success、warning 与 error 配色。

示例可交互

Alert — Avalonia UIKit

Live demo unavailable

<uikit:Alert Classes="info" Title="Heads up!" Content="You can add components to your app using the CLI."
            IsClosable="True" CloseRequested="OnClose" Width="420" HorizontalAlignment="Left" />

用法

uikit:Alert 把内容作为提示文字显示，上方可有 Title，文字前可有 Icon（一个 Geometry，未设置时使用 info 图标）。变体由样式类决定；不加样式类时，提示条使用前景色与背景色。变体颜色用于文字与图标，填充为 4%，边框为 30%。IsClosable="True" 在右上角添加关闭按钮；它只触发 CloseRequested，隐藏提示条由应用自行处理。在上面的演示中，处理器把 IsVisible 设为 false。

分组	样式类
变体	`info`、`success`、`warning`、`error`
尺寸	`xsmall`、`small`、`large`（默认为 medium）
布局	`banner`：占满宽度，无圆角、无标题，整行居中

示例

默认外观与四个变体，各自带图标。

变体可交互

Live demo unavailable

<StackPanel Spacing="12" Width="420" HorizontalAlignment="Left">
  <uikit:Alert Title="Default" Content="This is an alert message." />
  <uikit:Alert Classes="info" Title="Info" Content="A new version is available." />
  <uikit:Alert Classes="success" Title="Success" Content="Your changes have been saved." Icon="{StaticResource UIKit.Icon.CircleCheck}" />
  <uikit:Alert Classes="warning" Title="Warning" Content="Your session is about to expire." Icon="{StaticResource UIKit.Icon.TriangleAlert}" />
  <uikit:Alert Classes="error" Title="Error" Content="The upload failed. Please try again." Icon="{StaticResource UIKit.Icon.CircleX}" />
</StackPanel>

四种尺寸，内边距从 12×6 到 20×14；large 使用更大的圆角半径。

尺寸可交互

Live demo unavailable

<StackPanel Spacing="12" Width="420" HorizontalAlignment="Left">
  <uikit:Alert Classes="info xsmall" Title="Extra small" Content="You can add components to your app using the CLI." IsClosable="True" />
  <uikit:Alert Classes="info small" Title="Small" Content="You can add components to your app using the CLI." IsClosable="True" />
  <uikit:Alert Classes="info" Title="Medium" Content="You can add components to your app using the CLI." IsClosable="True" />
  <uikit:Alert Classes="info large" Title="Large" Content="You can add components to your app using the CLI." IsClosable="True" />
</StackPanel>

banner 去掉圆角与标题并让整行居中；它可与变体、尺寸及 IsClosable 组合使用。

Banner可交互

Live demo unavailable

<StackPanel Spacing="12" Width="480" HorizontalAlignment="Left">
  <uikit:Alert Classes="info banner" Content="A new version is available." />
  <uikit:Alert Classes="warning banner" Content="Scheduled maintenance starts in 30 minutes." Icon="{StaticResource UIKit.Icon.TriangleAlert}" IsClosable="True" />
  <uikit:Alert Classes="success banner small" Content="Your changes have been saved." Icon="{StaticResource UIKit.Icon.CircleCheck}" />
</StackPanel>

Alert

#用法

#示例

用法

示例