Browse Source

feat(docs): 添加菜单导航模块文档

pull/1049/head
feijie 1 year ago
parent
commit
966f47185e
  1. 109
      aspnet-core/framework/navigation/LINGYUN.Abp.UI.Navigation/README.EN.md
  2. 70
      aspnet-core/framework/navigation/LINGYUN.Abp.UI.Navigation/README.md

109
aspnet-core/framework/navigation/LINGYUN.Abp.UI.Navigation/README.EN.md

@ -0,0 +1,109 @@
# LINGYUN.Abp.UI.Navigation
[简体中文](./README.md) | English
Menu navigation module that provides extensible custom menu items.
## Features
* Support for custom menu item definitions and extensions
* Multi-tenancy support
* Support for menu item hierarchy
* Support for menu item ordering
* Support for menu item visibility and disabled state
* Support for menu item icons and redirects
* Support for menu seed data initialization
## Module Dependencies
```csharp
[DependsOn(typeof(AbpUINavigationModule))]
public class YouProjectModule : AbpModule
{
// other
}
```
## Basic Usage
### 1. Define Menu Provider
Implement the `INavigationDefinitionProvider` interface to define menu items:
```csharp
public class FakeNavigationDefinitionProvider : NavigationDefinitionProvider
{
public override void Define(INavigationDefinitionContext context)
{
context.Add(GetNavigationDefinition());
}
private static NavigationDefinition GetNavigationDefinition()
{
var dashboard = new ApplicationMenu(
name: "Vben Dashboard",
displayName: "Dashboard",
url: "/dashboard",
component: "",
description: "Dashboard",
icon: "ion:grid-outline",
redirect: "/dashboard/analysis");
dashboard.AddItem(
new ApplicationMenu(
name: "Analysis",
displayName: "Analysis Page",
url: "/dashboard/analysis",
component: "/dashboard/analysis/index",
description: "Analysis Page"));
return new NavigationDefinition(dashboard);
}
}
```
### 2. Initialize Menu Data
Implement the `INavigationSeedContributor` interface to initialize menu seed data:
```csharp
public class YourNavigationDataSeeder : INavigationSeedContributor
{
public async Task SeedAsync(NavigationSeedContext context)
{
// Initialize menu data here
}
}
```
## Menu Item Properties
* Name - Menu item name (unique identifier)
* DisplayName - Display name
* Description - Description
* Url - Path
* Component - Component path
* Redirect - Redirect path
* Icon - Icon
* Order - Order (default 1000)
* IsDisabled - Whether disabled
* IsVisible - Whether visible
* Items - Child menu items collection
* ExtraProperties - Extension properties
* MultiTenancySides - Multi-tenancy options
## Best Practices
1. Use meaningful names for menu items for better management and maintenance
2. Use menu item ordering appropriately to keep the interface clean
3. Use icons to enhance user experience
4. Use redirect functionality appropriately to optimize navigation experience
5. Control menu item visibility and disabled state based on actual requirements
## Notes
1. Menu item Name must be unique
2. Child menu items inherit multi-tenant settings from parent menu items
3. Menu items with smaller order values appear first
4. Disabled menu items are still visible but cannot be clicked
5. Component paths should be consistent with front-end routing configuration

70
aspnet-core/framework/navigation/LINGYUN.Abp.UI.Navigation/README.md

@ -1,14 +1,20 @@
# LINGYUN.Abp.UI.Navigation # LINGYUN.Abp.UI.Navigation
菜单导航模块,提供可扩展自定义的菜单项 简体中文 | [English](./README.EN.md)
## 配置使用 菜单导航模块,提供可扩展自定义的菜单项
应用初始化时扫描所有实现 **INavigationDefinitionProvider** 接口的用户定义菜单项 ## 功能特性
通过 **INavigationDataSeeder** 接口初始化菜单种子数据 * 支持自定义菜单项定义和扩展
* 支持多租户
* 支持菜单项的层级结构
* 支持菜单项的排序
* 支持菜单项的可见性和禁用状态
* 支持菜单项的图标和重定向
* 支持菜单种子数据的初始化
**INavigationDataSeeder** 的实现交给具体的实现 ## 模块引用
```csharp ```csharp
[DependsOn(typeof(AbpUINavigationModule))] [DependsOn(typeof(AbpUINavigationModule))]
@ -18,11 +24,16 @@ public class YouProjectModule : AbpModule
} }
``` ```
```csharp ## 基本用法
### 1. 定义菜单提供者
通过实现 `INavigationDefinitionProvider` 接口来定义菜单项:
```csharp
public class FakeNavigationDefinitionProvider : NavigationDefinitionProvider public class FakeNavigationDefinitionProvider : NavigationDefinitionProvider
{ {
public override void Define(INavigationDefinitionContext context) public override void Define(INavigationDefinitionContext context)
{ {
context.Add(GetNavigationDefinition()); context.Add(GetNavigationDefinition());
} }
@ -49,7 +60,50 @@ public class FakeNavigationDefinitionProvider : NavigationDefinitionProvider
return new NavigationDefinition(dashboard); return new NavigationDefinition(dashboard);
} }
} }
```
### 2. 初始化菜单数据
通过实现 `INavigationSeedContributor` 接口来初始化菜单种子数据:
```csharp
public class YourNavigationDataSeeder : INavigationSeedContributor
{
public async Task SeedAsync(NavigationSeedContext context)
{
// 在这里初始化菜单数据
}
}
``` ```
## 其他 ## 菜单项属性说明
* Name - 菜单项名称(唯一标识)
* DisplayName - 显示名称
* Description - 说明
* Url - 路径
* Component - 组件路径
* Redirect - 重定向路径
* Icon - 图标
* Order - 排序(默认1000)
* IsDisabled - 是否禁用
* IsVisible - 是否可见
* Items - 子菜单项集合
* ExtraProperties - 扩展属性
* MultiTenancySides - 多租户选项
## 最佳实践
1. 菜单项命名建议使用有意义的名称,便于管理和维护
2. 合理使用菜单项的排序,保持界面的整洁
3. 使用图标增强用户体验
4. 适当使用重定向功能优化导航体验
5. 根据实际需求控制菜单项的可见性和禁用状态
## 注意事项
1. 菜单项的Name必须唯一
2. 子菜单项会继承父菜单项的多租户设置
3. 菜单项的排序值越小越靠前
4. 禁用的菜单项仍然可见,但无法点击
5. 组件路径应与前端路由配置保持一致

Loading…
Cancel
Save