# Input 使用文档
本文档介绍 AtomUI Input 控件族的各种使用方式,示例代码摘自 Gallery 演示程序。
> 📖 Gallery 源码位置:`controlgallery/AtomUIGallery/ShowCases/Views/DataEntry/LineEditShowCase.axaml`
---
## 前置准备
在 AXAML 中使用 Input 控件,需要引入以下命名空间:
```xml
xmlns:atom="https://atomui.net"
xmlns:antdicons="https://atomui.net/icons/antdesign"
```
在 C# 代码中引入:
```csharp
using AtomUI.Desktop.Controls; // LineEdit, SearchEdit, TextArea 控件
using AtomUI.Controls; // SizeType 等共享类型
```
---
## 1. 基本用法
最基础的 LineEdit 用法——单行文本输入:
```xml
```
---
## 2. 三种尺寸
通过 `SizeType` 属性设置尺寸,支持 `Large`(40px)、`Middle`(32px,默认)、`Small`(24px)三种:
```xml
```
---
## 3. 样式变体
通过 `StyleVariant` 属性切换四种样式变体:
```xml
```
样式变体也适用于带 AddOn 的输入框:
```xml
```
---
## 4. 前置/后置标签(AddOn)
通过 `LeftAddOn` 和 `RightAddOn` 属性添加输入框外侧的附加组件:
```xml
```
---
## 5. 前缀/后缀图标
通过 `InnerLeftContent` 和 `InnerRightContent` 添加输入框内侧的装饰元素:
```xml
```
---
## 6. 清除按钮
通过 `IsAllowClear="True"` 启用清除按钮,点击后清空输入内容:
```xml
```
---
## 7. 密码输入框
通过 `PasswordChar` + `IsEnableRevealButton` 组合实现密码输入功能:
```xml
```
---
## 8. 验证状态
通过 `Status` 属性设置验证反馈状态:
```xml
```
---
## 9. 搜索框(SearchEdit)
SearchEdit 提供内置搜索按钮的输入框:
### 基础搜索框
```xml
```
### 主色调搜索按钮
```xml
```
### 带清除按钮和自定义内容
```xml
```
### 搜索框加载状态
```xml
```
### 不同变体的搜索框
```xml
```
### 搜索按钮事件处理
```csharp
// AXAML
//
public void OnSearchButtonClick(object? sender, RoutedEventArgs args)
{
if (sender is SearchEdit searchEdit)
{
var searchText = searchEdit.Text;
// 执行搜索逻辑...
}
}
```
---
## 10. 多行文本域(TextArea)
### 基本用法
```xml
```
### 自适应高度
```xml
```
### 字符计数
```xml
```
### TextArea 验证状态
```xml
```
---
## 11. 禁用状态
通过 `IsEnabled="False"` 禁用输入框,所有控件和变体均支持:
```xml
```
---
## 12. MVVM 数据绑定
Input 控件完整支持 Avalonia 的数据绑定:
```xml
```
```csharp
// ViewModel(使用 ReactiveUI)
public class FormViewModel : ReactiveObject
{
[Reactive] public string? Username { get; set; }
[Reactive] public string? Email { get; set; }
[Reactive] public string? Description { get; set; }
[Reactive] public InputControlStatus EmailStatus { get; set; }
}
```
---
## 常见组合模式
### 登录表单
```xml
Log in
```
### 搜索栏
```xml
```
### 网址输入
```xml
```
### 带前缀符号的输入
```xml
```