# AntDesign.Mini.Components.Blazor

**Repository Path**: fan0217_admin/AntDesign.Mini.Components

## Basic Information

- **Project Name**: AntDesign.Mini.Components.Blazor
- **Description**: 基于 Ant Design Mini 设计规范的 Blazor 移动端组件库。支持Server和WebAssembly、MAUI blazor。
- **Primary Language**: C#
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2026-03-25
- **Last Updated**: 2026-04-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: antdesign, blazor, components

## README

# AntDesign.Mini.Components

基于 Ant Design Mobile 的 Blazor 移动端组件库，为 .NET 开发者提供高质量的移动端 UI 组件。

## 特性

- 🎨 **丰富的组件** - 提供 60+ 个高质量的移动端组件
- 📱 **移动优先** - 专为移动端设计，完美适配各种移动设备
- 🚀 **Blazor 原生** - 基于 Blazor 技术栈，支持 WebAssembly 和 Server 模式
- 💪 **TypeScript 类型支持** - 完整的 C# 类型定义
- 🎯 **易于使用** - 简洁的 API 设计，快速上手

![AntDesign.Mini](AntDesign.Mini.Demo/wwwroot/mini.png)

## 组件列表

### 基础组件
- Button 按钮
- Icon 图标
- ImageIcon 图片图标
- Typography 排版

### 布局组件
- Container 容器
- Grid 栅格
- Space 间距
- Divider 分割线
- PageContainer 页面容器
- SafeArea 安全区域
- Sticky 吸顶容器

### 导航组件
- TabBar 标签栏
- Tabs 标签页
- Navigation 导航栏
- IndexBar 索引栏
- Pagination 分页

### 数据录入
- Checkbox 复选框
- Checklist 复选框列表
- Radio 单选框
- Switch 开关
- Stepper 步进器
- Slider 滑动条
- Rate 评分
- Input 输入框
- NumberInput 数字输入框
- NumberKeyboard 数字键盘
- TextArea 文本域
- Picker 选择器
- DatePicker 日期选择
- Selector 选择器
- Form 表单
- ImageUpload 图片上传

### 数据展示
- Avatar 头像
- Badge 徽标
- Card 卡片
- Collapse 折叠面板
- List 列表
- Tag 标签
- Progress 进度条
- Steps 步骤条
- Skeleton 骨架屏
- Empty 空状态
- Result 结果页
- Countdown 倒计时
- NoticeBar 通知栏

### 反馈组件
- Dialog 对话框
- Modal 模态框
- Toast 轻提示
- ActionSheet 动作面板
- Popup 弹出层
- Popover 气泡弹窗
- PopoverList 气泡菜单
- Loading 加载
- Mask 遮罩
- Feedback 反馈

### 引导组件
- GuideTour 漫游式引导

### 特色组件
- AutoResize 自适应尺寸
- SwipeAction 滑动操作
- Alphabet 字母表
- Calendar 日历
- Postscript 附言
- Terms 条款
- Voucher 凭证

### AI 组件 (Copilot)
- Bubble 气泡
- Prompts 提示集
- Sender 发送框
- Conversations 对话列表
- Welcome 欢迎
- Actions 操作
- ThoughtChain 思维链

### 其他
- ConfigProvider 全局配置
- Footer 页脚

## 安装

### NuGet 包安装

```bash
dotnet add package AntDesign.Mini.Components
```

### 项目引用

在 `_Imports.razor` 文件中添加：

```razor
@using AntDesign.Mini.Components
```

## 快速开始

### 1. 创建 Blazor WebAssembly 项目

```bash
dotnet new blazorwasm -n YourApp
cd YourApp
```

### 2. 添加组件库引用

```bash
dotnet add package AntDesign.Mini.Components
```

### 3. 在页面中使用组件

```razor
@page "/"
@using AntDesign.Mini.Components.Components.Button

<PageTitle>首页</PageTitle>

<Button Type="@ButtonType.Primary" OnClick="HandleClick">
    点击我
</Button>

@code {
    private void HandleClick()
    {
        Console.WriteLine("按钮被点击了！");
    }
}
```

## 示例项目

本项目包含一个完整的演示应用 `AntDesign.Mini.Demo`，展示了所有组件的使用示例。

### 运行演示项目

```bash
cd AntDesign.Mini.Demo
dotnet run
```

然后在浏览器中打开 `https://localhost:5001` 或 `http://localhost:5000`。

## 组件使用示例

### AutoResize 自适应尺寸

```razor
@using AntDesign.Mini.Components.Components.AutoResize

<AutoResize>
    <div class="autoresize-content">
        这是一段自适应内容
    </div>
</AutoResize>
```

### Button 按钮

```razor
@using AntDesign.Mini.Components.Components.Button

<Button Type="@ButtonType.Primary">主要按钮</Button>
<Button Type="@ButtonType.Default">默认按钮</Button>
<Button Type="@ButtonType.Danger">危险按钮</Button>
```

### Dialog 对话框

```razor
@using AntDesign.Mini.Components.Components.Dialog

<Dialog @bind-Visible="dialogVisible"
        Title="提示"
        Content="确定要删除吗？"
        OnConfirm="HandleConfirm" />

<Button OnClick="() => dialogVisible = true">打开对话框</Button>

@code {
    private bool dialogVisible = false;
    
    private void HandleConfirm()
    {
        dialogVisible = false;
    }
}
```

### Form 表单

```razor
@using AntDesign.Mini.Components.Components.Form

<Form Model="@model" OnFinish="HandleSubmit">
    <Input @bind-Value="model.Username" Placeholder="用户名" />
    <Input @bind-Value="model.Password" Type="@InputType.Password" Placeholder="密码" />
    <Button Type="@ButtonType.Primary" HtmlType="submit">登录</Button>
</Form>

@code {
    private LoginModel model = new();
    
    private void HandleSubmit()
    {
        Console.WriteLine($"用户名: {model.Username}");
    }
    
    class LoginModel
    {
        public string Username { get; set; }
        public string Password { get; set; }
    }
}
```

## 开发指南

### 环境要求

- .NET 10.0 SDK 或更高版本
- 支持 Blazor 的浏览器

### 项目结构

```
AntDesign.Mini.Components/
├── AntDesign.Mini.Components/          # 组件库项目
│   ├── Components/                     # 组件目录
│   │   ├── Button/                     # 按钮组件
│   │   │   ├── Button.razor            # 组件视图
│   │   │   ├── Button.razor.cs         # 组件逻辑
│   │   │   ├── Button.razor.css        # 组件样式
│   │   │   ├── ButtonProps.cs          # 组件属性
│   │   │   └── ButtonType.cs           # 枚举类型
│   │   └── ...                         # 其他组件
│   └── AntDesign.Mini.Components.csproj
├── AntDesign.Mini.Demo/                # 演示项目
│   ├── Pages/                          # 示例页面
│   ├── Shared/                         # 共享组件
│   └── wwwroot/                        # 静态资源
└── README.md                           # 项目文档
```

### 构建项目

```bash
dotnet build
```

### 运行测试

```bash
dotnet test
```

## 技术栈

- **框架**: Blazor (.NET 10.0)
- **设计**: Ant Design Mobile
- **语言**: C# 13.0
- **样式**: CSS Isolation

## 贡献指南

欢迎贡献代码、报告问题或提出建议！

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

## 版本历史

- **v1.0.0** - 初始版本，包含 60+ 个基础组件

## 许可证

本项目基于 MIT 许可证开源。

## 致谢

- [Ant Design Mobile](https://mobile.ant.design/) - 设计规范和灵感来源
- [Blazor](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor) - 强大的 Web 框架

## 联系方式

如有问题或建议，欢迎提交 Issue。