# AntDesign.Mobile.Components.Blazor

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

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-22
- **Last Updated**: 2026-03-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: antdesign, components, blazor

## README

# Ant Design Mobile Blazor

<div align="center">

基于 [Ant Design Mobile](https://mobile.ant.design/) 设计规范的 Blazor 移动端组件库

[![.NET](https://img.shields.io/badge/.NET-10.0-512BD4)](https://dotnet.microsoft.com/)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)

</div>

## ✨ 特性

- 🎨 **企业级设计** - 源自 Ant Design 设计规范，经过大量企业级产品验证
- 📦 **高质量组件** - 提供 60+ 开箱即用的高质量移动端组件
- 🔧 **Blazor 原生** - 使用 C# 和 Razor 语法开发，享受强类型和智能提示
- 📱 **移动优先** - 专为移动端设计，完美适配各种屏幕尺寸
- ⚡ **高性能** - 支持 WebAssembly 和 Server 两种渲染模式
- 🌍 **国际化** - 支持多语言国际化

## 📦 安装

### NuGet 包管理器

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

### Package Manager Console

```powershell
Install-Package AntDesign.Mobile.Components
```

## 🚀 快速开始

### 1. 注册服务

在 `Program.cs` 中注册服务：

```csharp
using AntDesign.Mobile.Components;

var builder = WebApplication.CreateBuilder(args);

// 添加 AntDesign Mobile 服务
builder.Services.AddAntDesignMobile();

var app = builder.Build();
app.Run();
```

### 2. 引入样式

在 `index.html` 或 `App.razor` 中添加 CSS 引用：

```html
<link rel="stylesheet" href="_content/AntDesign.Mobile.Components/ant-design-mobile.css" />
```

### 3. 添加命名空间

在 `_Imports.razor` 中添加：

```razor
@using AntDesign.Mobile.Components
@using AntDesign.Mobile.Components.Core.Enums
```

### 4. 开始使用

```razor
<Button Color="ButtonColor.Primary">主要按钮</Button>
<Icon Type="IconType.Home" Size="24" />
<Tag Color="TagColor.Success">标签</Tag>
```

## 🧩 组件列表

### 通用

| 组件 | 描述 |
| --- | --- |
| [Button](/button) | 按钮 |
| [Icon](/icon) | 图标（700+ 图标） |
| [Space](/space) | 间距 |

### 布局

| 组件 | 描述 |
| --- | --- |
| [AutoCenter](/autocenter) | 自动居中 |
| [Divider](/divider) | 分割线 |
| [FloatingPanel](/floatingpanel) | 浮动面板 |
| [Footer](/footer) | 页脚 |
| [Grid](/grid) | 栅格 |
| [InfiniteScroll](/infinitescroll) | 无限滚动 |
| [List](/list) | 列表 |
| [SafeArea](/safearea) | 安全区 |
| [Space](/space) | 间距 |

### 导航

| 组件 | 描述 |
| --- | --- |
| [CapsuleTabs](/capsulet) | 胶囊选项卡 |
| [IndexBar](/indexbar) | 索引栏 |
| [JumboTabs](/jumbotabs) | 大选项卡 |
| [NavBar](/navbar) | 导航栏 |
| [SideBar](/sidebar) | 侧边导航 |
| [TabBar](/tabbar) | 标签栏 |
| [Tabs](/tabs) | 标签页 |

### 信息展示

| 组件 | 描述 |
| --- | --- |
| [Avatar](/avatar) | 头像 |
| [Badge](/badge) | 徽标 |
| [Card](/card) | 卡片 |
| [Collapse](/collapse) | 折叠面板 |
| [Ellipsis](/ellipsis) | 省略 |
| [Image](/image) | 图片 |
| [ImageViewer](/imageviewer) | 图片查看器 |
| [PageIndicator](/pageindicator) | 分页指示器 |
| [Steps](/steps) | 步骤条 |
| [Swiper](/swiper) | 走马灯 |
| [Tag](/tag) | 标签 |
| [WaterMark](/watermark) | 水印 |

### 信息录入

| 组件 | 描述 |
| --- | --- |
| [Cascader](/cascader) | 级联选择 |
| [CheckList](/checklist) | 可勾选列表 |
| [Checkbox](/checkbox) | 复选框 |
| [Form](/form) | 表单 |
| [Input](/input) | 输入框 |
| [Picker](/picker) | 选择器 |
| [Radio](/radio) | 单选框 |
| [Rate](/rate) | 评分 |
| [SearchBar](/searchbar) | 搜索框 |
| [Segmented](/segmented) | 分段控制器 |
| [Selector](/selector) | 选择组 |
| [Slider](/slider) | 滑动输入条 |
| [Stepper](/stepper) | 步进器 |
| [SwipeAction](/swipeaction) | 滑动操作 |
| [Switch](/switch) | 开关 |
| [TextArea](/textarea) | 文本域 |

### 反馈

| 组件 | 描述 |
| --- | --- |
| [ActionSheet](/actionsheet) | 动作面板 |
| [Dialog](/dialog) | 对话框 |
| [DotLoading](/dotloading) | 点状加载 |
| [Empty](/empty) | 空状态 |
| [ErrorBlock](/errorblock) | 错误块 |
| [Loading](/loading) | 加载中 |
| [Mask](/mask) | 遮罩层 |
| [Modal](/modal) | 模态框 |
| [Popover](/popover) | 气泡弹出框 |
| [Popup](/popup) | 弹出层 |
| [ProgressBar](/progressbar) | 进度条 |
| [ProgressCircle](/progresscircle) | 进度圈 |
| [PullToRefresh](/pulltorefresh) | 下拉刷新 |
| [Result](/result) | 结果 |
| [Skeleton](/skeleton) | 骨架屏 |
| [Toast](/toast) | 轻提示 |

### 引导提示

| 组件 | 描述 |
| --- | --- |
| [NoticeBar](/noticebar) | 通告栏 |

### 其他

| 组件 | 描述 |
| --- | --- |
| [ConfigProvider](/configprovider) | 全局配置 |

## 🛠 本地开发

### 环境要求

- .NET 10.0 SDK 或更高版本
- Node.js（可选，用于样式文件编译）

### 克隆项目

```bash
git clone https://github.com/ant-design-blazor/ant-design-blazor.git
cd ant-design-blazor
```

### 运行演示项目

```bash
cd AntDesign.Mobile.Components.Demo
dotnet run
```

访问 https://localhost:5001 查看演示。

### 构建项目

```bash
dotnet build
```

## 🤝 参与贡献

我们欢迎所有的贡献。如果您想参与贡献，请先阅读 [贡献指南](https://github.com/ant-design-blazor/ant-design-blazor/blob/master/CONTRIBUTING.md)。

### 贡献方式

- 🐛 提交 [Issue](https://github.com/ant-design-blazor/ant-design-blazor/issues) 报告 Bug 或提出功能建议
- 💡 提交 Pull Request 修复 Bug 或添加新功能
- 📝 完善 文档

## 📄 许可证

[MIT License](LICENSE)

## 🔗 相关链接

- [Ant Design Mobile 官方文档](https://mobile.ant.design/)
- [Ant Design Blazor](https://ant-design-blazor.gitee.io/zh-CN/)
- [Blazor 官方文档](https://learn.microsoft.com/zh-cn/aspnet/core/blazor/)

---

<div align="center">

Made with ❤️ by Ant Design Blazor Team

</div>