Notification

滑入并淡出的通知卡片，即 Avalonia 的 WindowNotificationManager。

示例可交互

Notification — Avalonia UIKit

Live demo unavailable

<Panel MinWidth="480" MinHeight="240">
  <Button Classes="outline" Content="Show notification" HorizontalAlignment="Left" VerticalAlignment="Top" Click="OnShow" />
</Panel>

用法

使用 Avalonia 的 WindowNotificationManager；主题负责它显示的 NotificationCard。为顶层创建一次管理器，然后调用 Show。在上面的演示中，按钮的 Click 处理程序正是如此，并设置了 MaxItems = 3。

_manager ??= new WindowNotificationManager(TopLevel.GetTopLevel(this)) { MaxItems = 10 };
_manager.Show(new Notification("Saved", "Your changes have been saved.", NotificationType.Success),
    NotificationType.Success, expiration: TimeSpan.FromSeconds(5.4));

卡片宽 382px，位于浮出层背景上，带 1px 边框与阴影：类型图标在左上角，标题为半粗体，消息的行高为 22.5px，悬停卡片时显示一个 ghost 关闭按钮。管理器的 Position 决定这一叠卡片的位置：距顶部 50px（在 34px 的标题栏之下）或距底部 16px，距侧边 16px，最新的最靠近边缘，彼此相隔 14px。卡片从所在边缘滑入 96px，用 400ms 淡入；关闭时用 200ms 淡出。推荐的上限是 MaxItems = 10 与 5.4 秒的 expiration。没有类型、也没有图标的通知使用 plain 样式类：Show(..., classes: ["plain"])。

若要按放置位置堆叠多张卡片，并带有 id 与操作，请使用 uikit:NotificationList。

示例

四种类型与 plain 卡片；每个按钮的 Click 处理程序都会为顶层创建一次管理器，并用其 Tag 中的类型调用 Show。

类型可交互

Live demo unavailable

<Panel MinWidth="600" MinHeight="260">
  <WrapPanel ItemSpacing="8" LineSpacing="8" HorizontalAlignment="Left" VerticalAlignment="Top">
    <Button Classes="outline" Content="Information" Tag="information" Click="OnShow" />
    <Button Classes="outline" Content="Success" Tag="success" Click="OnShow" />
    <Button Classes="outline" Content="Warning" Tag="warning" Click="OnShow" />
    <Button Classes="outline" Content="Error" Tag="error" Click="OnShow" />
    <Button Classes="outline" Content="Plain" Tag="plain" Click="OnShow" />
  </WrapPanel>
</Panel>

卡片外观的模拟，用主题的令牌绘制，以便放在页面上；真实卡片来自 WindowNotificationManager 并会滑入。

卡片可交互

Live demo unavailable

<!--
  The look of a notification card, drawn from the theme's tokens: a 382px
  popover surface with the type's icon at the top left, the title in
  semibold and the message on 22.5px lines. A real NotificationCard is shown
  by WindowNotificationManager and slides in (see the Demo).
-->
<StackPanel Spacing="14" Margin="16" HorizontalAlignment="Left">
  <Border Width="382" CornerRadius="7.5" BorderThickness="1" BackgroundSizing="OuterBorderEdge"
          Background="{DynamicResource UIKit.Popover}" BorderBrush="{DynamicResource UIKit.Border}"
          BoxShadow="0 10 24.2487 -3 #1A000000, 0 4 8.6603 -4 #1A000000">
    <Panel>
      <PathIcon Data="{StaticResource UIKit.Icon.Info}" Foreground="{DynamicResource UIKit.Info}" Width="16" Height="16"
                Margin="16,18,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" />
      <StackPanel Margin="40,14,16,14">
        <TextBlock Text="Update available" FontSize="14" FontWeight="SemiBold" LineHeight="22.5" />
        <TextBlock Text="A new version is ready to install." FontSize="14" LineHeight="22.5" TextWrapping="Wrap" />
      </StackPanel>
    </Panel>
  </Border>
  <Border Width="382" CornerRadius="7.5" BorderThickness="1" BackgroundSizing="OuterBorderEdge"
          Background="{DynamicResource UIKit.Popover}" BorderBrush="{DynamicResource UIKit.Border}"
          BoxShadow="0 10 24.2487 -3 #1A000000, 0 4 8.6603 -4 #1A000000">
    <Panel>
      <PathIcon Data="{StaticResource UIKit.Icon.CircleCheck}" Foreground="{DynamicResource UIKit.Success}" Width="16" Height="16"
                Margin="16,18,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" />
      <TextBlock Text="Your changes have been saved." Margin="40,14,16,14" FontSize="14" LineHeight="22.5" TextWrapping="Wrap" />
    </Panel>
  </Border>
  <Border Width="382" CornerRadius="7.5" BorderThickness="1" BackgroundSizing="OuterBorderEdge"
          Background="{DynamicResource UIKit.Popover}" BorderBrush="{DynamicResource UIKit.Border}"
          BoxShadow="0 10 24.2487 -3 #1A000000, 0 4 8.6603 -4 #1A000000">
    <Panel>
      <PathIcon Data="{StaticResource UIKit.Icon.TriangleAlert}" Foreground="{DynamicResource UIKit.Warning}" Width="16" Height="16"
                Margin="16,18,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" />
      <TextBlock Text="Network connection is unstable. Changes will sync when it recovers." Margin="40,14,16,14"
                 FontSize="14" LineHeight="22.5" TextWrapping="Wrap" />
    </Panel>
  </Border>
  <Border Width="382" CornerRadius="7.5" BorderThickness="1" BackgroundSizing="OuterBorderEdge"
          Background="{DynamicResource UIKit.Popover}" BorderBrush="{DynamicResource UIKit.Border}"
          BoxShadow="0 10 24.2487 -3 #1A000000, 0 4 8.6603 -4 #1A000000">
    <Panel>
      <PathIcon Data="{StaticResource UIKit.Icon.CircleX}" Foreground="{DynamicResource UIKit.Danger}" Width="16" Height="16"
                Margin="16,18,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" />
      <TextBlock Text="The upload failed." Margin="40,14,16,14" FontSize="14" LineHeight="22.5" TextWrapping="Wrap" />
    </Panel>
  </Border>
</StackPanel>

Notification

#用法

#示例

用法

示例