mirror of
https://github.com/AtomUI/AtomUI.git
synced 2026-10-20 23:58:05 +08:00
chinboy
208 lines
6.8 KiB
Markdown
208 lines
6.8 KiB
Markdown
# HyperLinkButton 自定义样式指南
|
||
|
||
HyperLinkButton 的视觉表现通过 `ControlTheme` + Design Token 系统控制。它复用 `ButtonToken` 作用域中的间距和字体 Token，颜色使用 `SharedToken` 中的链接色系（`ColorLink` / `ColorError`）。
|
||
|
||
---
|
||
|
||
## 1. 使用属性直接控制
|
||
|
||
最简单的方式是通过 HyperLinkButton 的公共属性来控制外观：
|
||
|
||
```xml
|
||
<!-- 基本超链接按钮 -->
|
||
<atom:HyperLinkButton NavigateUri="https://github.com/AntDesign/AtomUI">
|
||
Visit AtomUI
|
||
</atom:HyperLinkButton>
|
||
|
||
<!-- 带图标 -->
|
||
<atom:HyperLinkButton Icon="{antdicons:AntDesignIconProvider Kind=LinkOutlined}"
|
||
NavigateUri="https://example.com">
|
||
Open Link
|
||
</atom:HyperLinkButton>
|
||
|
||
<!-- 危险样式 -->
|
||
<atom:HyperLinkButton IsDanger="True">
|
||
Delete Account
|
||
</atom:HyperLinkButton>
|
||
|
||
<!-- 不同尺寸 -->
|
||
<atom:HyperLinkButton SizeType="Large">Large Link</atom:HyperLinkButton>
|
||
<atom:HyperLinkButton SizeType="Small">Small Link</atom:HyperLinkButton>
|
||
|
||
<!-- 加载状态 -->
|
||
<atom:HyperLinkButton IsLoading="True">Loading...</atom:HyperLinkButton>
|
||
```
|
||
|
||
> 📖 实际使用参考：`controlgallery/AtomUIGallery/ShowCases/Views/General/AboutUsPage.axaml`
|
||
|
||
---
|
||
|
||
## 2. 通过 Style 覆盖样式
|
||
|
||
可以在 AXAML 中使用 `Style` 对 HyperLinkButton 进行全局或局部样式覆盖：
|
||
|
||
### 统一链接样式
|
||
|
||
```xml
|
||
<Window.Styles>
|
||
<Style Selector="atom|HyperLinkButton">
|
||
<Setter Property="SizeType" Value="Small" />
|
||
<Setter Property="Margin" Value="0,0,8,0" />
|
||
</Style>
|
||
</Window.Styles>
|
||
```
|
||
|
||
### 已访问状态的视觉区分
|
||
|
||
```xml
|
||
<!-- 已访问的链接使用紫色 -->
|
||
<Style Selector="atom|HyperLinkButton:visited">
|
||
<Setter Property="Foreground" Value="#531dab" />
|
||
</Style>
|
||
<Style Selector="atom|HyperLinkButton:visited:pointerover">
|
||
<Setter Property="Foreground" Value="#722ed1" />
|
||
</Style>
|
||
```
|
||
|
||
### 自定义危险链接的悬浮效果
|
||
|
||
```xml
|
||
<Style Selector="atom|HyperLinkButton:danger:not(:disabled):pointerover">
|
||
<Setter Property="Foreground" Value="#ff7875" />
|
||
<Setter Property="FontWeight" Value="SemiBold" />
|
||
</Style>
|
||
```
|
||
|
||
### 自定义模板内部元素
|
||
|
||
```xml
|
||
<!-- 自定义图标颜色 -->
|
||
<Style Selector="atom|HyperLinkButton /template/ atom|IconPresenter#PART_ButtonIcon">
|
||
<Setter Property="IconBrush" Value="#1677FF" />
|
||
</Style>
|
||
|
||
<!-- 加载图标的自定义样式 -->
|
||
<Style Selector="atom|HyperLinkButton:loading /template/ atom|Icon#PART_LoadingIcon">
|
||
<Setter Property="FillBrush" Value="#faad14" />
|
||
</Style>
|
||
```
|
||
|
||
---
|
||
|
||
## 3. 颜色体系
|
||
|
||
HyperLinkButton 使用链接色系，与 Button 的颜色体系完全不同。不同状态下的颜色映射：
|
||
|
||
### 默认链接
|
||
|
||
| 状态 | 前景色 | 图标色 | 背景色 |
|
||
|---|---|---|---|
|
||
| 正常 | `ColorLink` | `ColorLink` | 透明 |
|
||
| 悬浮（`:pointerover`） | `ColorLinkHover` | `ColorLinkHover` | 透明 |
|
||
| 按下（`:pressed`） | `ColorLinkActive` | `ColorLinkActive` | 透明 |
|
||
| 禁用（`:disabled`） | `ColorTextDisabled` | `ColorTextDisabled` | 透明 |
|
||
|
||
### 危险链接（`:danger`）
|
||
|
||
| 状态 | 前景色 | 图标色 | 背景色 |
|
||
|---|---|---|---|
|
||
| 正常 | `ColorError` | `ColorError` | 透明 |
|
||
| 悬浮（`:pointerover`） | `ColorErrorHover` | `ColorErrorHover` | 透明 |
|
||
| 按下（`:pressed`） | `ColorErrorActive` | `ColorErrorActive` | 透明 |
|
||
| 禁用（`:disabled`） | `ColorTextDisabled` | `ColorTextDisabled` | 透明 |
|
||
|
||
---
|
||
|
||
## 4. 通过 ControlTheme 完全替换主题
|
||
|
||
```xml
|
||
<ControlTheme x:Key="MyCustomHyperLink" TargetType="atom:HyperLinkButton">
|
||
<Setter Property="Template">
|
||
<ControlTemplate>
|
||
<Border Padding="{TemplateBinding Padding}">
|
||
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
|
||
<atom:IconPresenter Icon="{TemplateBinding Icon}"
|
||
IsVisible="{TemplateBinding Icon,
|
||
Converter={x:Static ObjectConverters.IsNotNull}}" />
|
||
<ContentPresenter Content="{TemplateBinding Content}" />
|
||
</StackPanel>
|
||
</Border>
|
||
</ControlTemplate>
|
||
</Setter>
|
||
<Setter Property="Foreground" Value="Blue" />
|
||
<Setter Property="Cursor" Value="Hand" />
|
||
</ControlTheme>
|
||
|
||
<!-- 使用 -->
|
||
<atom:HyperLinkButton Theme="{StaticResource MyCustomHyperLink}"
|
||
NavigateUri="https://example.com">
|
||
Custom Link
|
||
</atom:HyperLinkButton>
|
||
```
|
||
|
||
> ⚠️ 注意：完全替换 ControlTheme 将丢失内置的加载图标切换、图标间距适配等功能。建议优先使用 Style 覆盖。
|
||
|
||
---
|
||
|
||
## 5. 控制动画行为
|
||
|
||
```xml
|
||
<!-- 禁用过渡动画 -->
|
||
<atom:HyperLinkButton IsMotionEnabled="False"
|
||
NavigateUri="https://example.com">
|
||
No Animation
|
||
</atom:HyperLinkButton>
|
||
```
|
||
|
||
---
|
||
|
||
## 样式选择器速查
|
||
|
||
> 说明：Avalonia 样式选择器中使用 `atom|HyperLinkButton` 语法引用 `atom` XML 命名空间下的 `HyperLinkButton` 类型，其中 `|` 是命名空间分隔符。
|
||
|
||
### 按控件类型选择
|
||
|
||
| 选择器 | 说明 |
|
||
|---|---|
|
||
| `atom\|HyperLinkButton` | 匹配所有 HyperLinkButton 实例 |
|
||
|
||
### 按属性选择
|
||
|
||
| 选择器 | 说明 |
|
||
|---|---|
|
||
| `atom\|HyperLinkButton[SizeType=Large]` | 匹配大号链接按钮 |
|
||
| `atom\|HyperLinkButton[SizeType=Small]` | 匹配小号链接按钮 |
|
||
| `atom\|HyperLinkButton[IsDanger=True]` | 匹配危险链接按钮 |
|
||
| `atom\|HyperLinkButton[IsGhost=True]` | 匹配幽灵链接按钮 |
|
||
|
||
### 按伪类选择
|
||
|
||
| 选择器 | 说明 |
|
||
|---|---|
|
||
| `atom\|HyperLinkButton:visited` | 已访问状态（`IsVisited == true`） |
|
||
| `atom\|HyperLinkButton:icononly` | 仅图标模式（`Icon` 不为 null 且 `Content` 为 null） |
|
||
| `atom\|HyperLinkButton:loading` | 加载中状态（`IsLoading == true`） |
|
||
| `atom\|HyperLinkButton:danger` | 危险样式（`IsDanger == true`） |
|
||
| `atom\|HyperLinkButton:pointerover` | 鼠标悬浮 |
|
||
| `atom\|HyperLinkButton:pressed` | 按下 |
|
||
| `atom\|HyperLinkButton:disabled` | 禁用（`IsEnabled == false`） |
|
||
|
||
### 模板部件选择器
|
||
|
||
| 选择器 | 说明 |
|
||
|---|---|
|
||
| `atom\|HyperLinkButton /template/ Border#Frame` | 主框架 Border |
|
||
| `atom\|HyperLinkButton /template/ StackPanel#PART_MainInfoLayout` | 内容布局面板 |
|
||
| `atom\|HyperLinkButton /template/ atom\|IconPresenter#PART_ButtonIcon` | 按钮图标展示器 |
|
||
| `atom\|HyperLinkButton /template/ atom\|Icon#PART_LoadingIcon` | 加载旋转图标 |
|
||
| `atom\|HyperLinkButton /template/ ContentPresenter#PART_ContentPresenter` | 内容展示器 |
|
||
|
||
### 组合选择器示例
|
||
|
||
| 选择器 | 说明 |
|
||
|---|---|
|
||
| `atom\|HyperLinkButton:not(:disabled)` | 非禁用状态的链接按钮 |
|
||
| `atom\|HyperLinkButton:danger:not(:disabled):pointerover` | 悬浮状态的非禁用危险链接 |
|
||
| `atom\|HyperLinkButton:visited:not(:danger)` | 已访问但非危险的链接 |
|
||
| `atom\|HyperLinkButton[SizeType=Large]:icononly` | 大号仅图标链接按钮 |
|