Hover Card

悬停时在其内容旁延迟打开、位于浮层表面上的卡片。

示例可交互

Hover Card — Avalonia UIKit

Live demo unavailable

<Panel MinWidth="360" MinHeight="180">
  <StackPanel Spacing="8" HorizontalAlignment="Left" VerticalAlignment="Top">
    <uikit:HoverCard>
      <TextBlock Text="@avaloniaui" Foreground="{DynamicResource UIKit.Primary}" />
      <uikit:HoverCard.Card>
        <StackPanel Spacing="8" Width="260">
          <StackPanel Orientation="Horizontal" Spacing="12">
            <uikit:Avatar UserName="Avalonia UI" />
            <StackPanel VerticalAlignment="Center">
              <TextBlock Text="Avalonia UI" FontWeight="SemiBold" />
              <TextBlock Text="@avaloniaui" Foreground="{DynamicResource UIKit.MutedForeground}" />
            </StackPanel>
          </StackPanel>
          <TextBlock Text="The cross-platform UI framework for .NET." TextWrapping="Wrap" />
        </StackPanel>
      </uikit:HoverCard.Card>
    </uikit:HoverCard>
    <TextBlock Text="Hover the name to open the card." Foreground="{DynamicResource UIKit.MutedForeground}" />
  </StackPanel>
</Panel>

用法

uikit:HoverCard 把触发元素包在其内容中；HoverCard.Card 是要打开的部分。卡片使用浮层表面（背景、边框环与阴影，12px 内边距，距触发器 4px），并且和浮层一样通过滑动保持在屏幕内，而不是翻转。指针进入触发器时安排打开，离开时安排关闭；指针停留在卡片上时，卡片保持打开。

属性	含义
`Card`	卡片的内容。
`Placement`	卡片的打开位置，类型为 `PlacementMode`；默认为 `Bottom`。
`OpenDelay`	指针在触发器上停留多久后打开卡片；600ms。
`CloseDelay`	指针离开触发器与卡片后，卡片保持显示多久；300ms。
`IsOpen`	卡片是否已打开。

示例

每张卡片上的 Placement：顶部、底部、对齐触发器左边缘，以及右侧。

位置可交互

Live demo unavailable

<Panel MinWidth="520" MinHeight="220">
  <StackPanel Orientation="Horizontal" Spacing="32" HorizontalAlignment="Center" VerticalAlignment="Center">
    <uikit:HoverCard Placement="Top">
      <TextBlock Text="Top" Foreground="{DynamicResource UIKit.Primary}" />
      <uikit:HoverCard.Card>
        <TextBlock Text="Opens above the trigger" />
      </uikit:HoverCard.Card>
    </uikit:HoverCard>
    <uikit:HoverCard Placement="Bottom">
      <TextBlock Text="Bottom" Foreground="{DynamicResource UIKit.Primary}" />
      <uikit:HoverCard.Card>
        <TextBlock Text="Opens below the trigger" />
      </uikit:HoverCard.Card>
    </uikit:HoverCard>
    <uikit:HoverCard Placement="BottomEdgeAlignedLeft">
      <TextBlock Text="Bottom start" Foreground="{DynamicResource UIKit.Primary}" />
      <uikit:HoverCard.Card>
        <TextBlock Text="Aligned to the trigger's left edge" />
      </uikit:HoverCard.Card>
    </uikit:HoverCard>
    <uikit:HoverCard Placement="Right">
      <TextBlock Text="Right" Foreground="{DynamicResource UIKit.Primary}" />
      <uikit:HoverCard.Card>
        <TextBlock Text="Opens to the right" />
      </uikit:HoverCard.Card>
    </uikit:HoverCard>
  </StackPanel>
</Panel>

Hover Card

#用法

#示例

用法

示例