!788 docs(#I2A3Q9): update layout/tab AdditionalAssemblies doc

* Merge branch 'dev-tab-add' into dev-docs
* fix: 修复 Tab Add 方法
* docs: Tab 组件增加 AdditionalAssembies 说明
* docs: 增加 AdditionalAssemblies 文档说明
* Merge branch 'dev-tab-wasm' into dev-docs
* fix: 修复 wasm 模式无法获取 GetEntryAssembly() 程序集问题
* docs: 更新 Tabs 示例文档
* Merge branch 'dev-tab' into dev-docs
* refactor: 移除 Task 返回值
* fix: 修复点击关闭小按钮时事件冒泡问题
* fix: 修复关闭 Tab 时更新地址栏
* refactor: 移除 Task.Run
* docs: 增加 UseTabSet 与 AdditionalAssemblies 属性介绍
* docs: 更新 Tab 组件 AdditionalAssemblies 属性
* docs: 移除繁体与德语文化索引
* docs: 移除首页繁体汉字
This commit is contained in:
Argo 2020-12-21 00:19:44 +08:00
parent 81d1715036
commit 97f5992477
7 changed files with 35 additions and 19 deletions

View File

@ -27,15 +27,13 @@
};
}
private async Task OnClickMenuItem(MenuItem item)
private Task OnClickMenuItem(MenuItem item)
{
if (TabSetMenu != null)
{
var text = item.Text;
var tabItem = TabSetMenu.Items.FirstOrDefault(i => i.Text == text);
if (tabItem == null) await AddTabItem(text ?? "");
else await TabSetMenu.ActiveTab(tabItem);
}
var text = item.Text;
var tabItem = TabSetMenu.Items.FirstOrDefault(i => i.Text == text);
if (tabItem == null) AddTabItem(text ?? "");
else TabSetMenu.ActiveTab(tabItem);
return Task.CompletedTask;
}
private void AddTabItem(string text) => TabSetMenu.Add(new Dictionary<string, object>

View File

@ -62,10 +62,8 @@
CultureStorageMode.Webapi => culture.NativeName,
_ => culture.Name switch
{
"zh-CN" => "中文(中国)",
"zh-TW" => "中文(台灣)",
"zh-CN" => "中文(中国)",
"en-US" => "English (United States)",
"de-DE" => "Deutsch (Deutschland)",
_ => ""
}
};

View File

@ -2,7 +2,14 @@
<h4>整页面级别组件</h4>
<Tips class="mt-3">通过内置组件 <code>Layout</code> 进行整页面布局,可通过 <code>dotnet new bbapp</code> 或者安装 <code>Visual Studio 2019</code> 项目插件选择 <code>Bootstrap Blazor 项目模板</code> 即可自动生成,详细文档请点击 <a href="template" target="_blank">[传送门]</a></Tips>
<Tips class="mt-3">
<p>通过内置组件 <code>Layout</code> 进行整页面布局,可通过 <code>dotnet new bbapp</code> 或者安装 <code>Visual Studio 2019</code> 项目插件选择 <code>Bootstrap Blazor 项目模板</code> 即可自动生成,详细文档请点击 <a href="template" target="_blank">[传送门]</a></p>
<div>
<b>特别注意:</b>
<br />
<code>Layout</code> 组件开启<code>多标签</code>模式后,如果有 <code>Razor 组件</code> 在额外的程序集中时,请正确设置 <code>AdditionalAssemblies</code> 属性值,以便标签组件内路由正确解析,相关文档 <a href="https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-3.1#route-to-components-from-multiple-assemblies" target="_blank">[传送门]</a>
</div>
</Tips>
<div class="page-layout-demo-option">
<p>布局调整</p>

View File

@ -143,6 +143,20 @@ namespace BootstrapBlazor.Shared.Pages
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "UseTabSet",
Description = "是否开启多标签模式",
Type = "bool",
ValueList = "true|false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "AdditionalAssemblies",
Description = "额外程序集合,传递给 Tab 组件使用",
Type = "IEnumerable<Assembly>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "OnCollapsed",
Description = "收缩展开回调委托",

View File

@ -13,7 +13,7 @@
<li>作为数据分割</li>
<li>页面导航</li>
</ul>
<div>本组件默认行为为数据分割,点击 <code>TabItem</code> 标题时并不会进行导航行为,如果需要进行地址栏导航时请设置 <code>ClickTabToNavigation</code> 属性为 <code>true</code>,此时点击 <code>TabItem</code> 标题时地址栏将会重定向导航,多用于后台管理系统与 <code>Menu</code> 组件进行联动使用,实战可参考 <a href="layout-page" target="_blank">后台模板模拟器</a> 中的 <code>多标签</code> 模式</div>
<div>本组件默认行为为数据分割,点击 <code>TabItem</code> 标题时并不会进行导航行为,如果需要进行地址栏导航时请设置 <code>ClickTabToNavigation</code> 属性为 <code>true</code>,此时点击 <code>TabItem</code> 标题时地址栏将会重定向导航,多用于后台管理系统与 <code>Menu</code> 组件进行联动使用,实战可参考 <a href="layout-page" target="_blank">后台模板模拟器</a> 中的 <code>多标签</code> 模式,如果有 <code>Razor 组件</code> 在额外的程序集中时,请正确设置 <code>AdditionalAssemblies</code> 属性值,以便标签组件内路由正确解析,相关文档 <a href="https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-3.1#route-to-components-from-multiple-assemblies" target="_blank">[传送门]</a></div>
</p>
<p>本组件会根据宽度高度等进行自适应适配,适当的时候可以出现左右或者上下的滚动箭头</p>
</Tips>

View File

@ -98,12 +98,13 @@ namespace BootstrapBlazor.Shared.Pages
[NotNull]
private Menu? TabMenu { get; set; }
private async Task OnClickMenuItem(MenuItem item)
private Task OnClickMenuItem(MenuItem item)
{
var text = item.Text;
var tabItem = TabSetMenu.Items.FirstOrDefault(i => i.Text == text);
if (tabItem == null) AddTabItem(text ?? "");
else await TabSetMenu.ActiveTab(tabItem);
else TabSetMenu.ActiveTab(tabItem);
return Task.CompletedTask;
}
private void AddTabItem(string text) => TabSetMenu.Add(new Dictionary<string, object>
@ -185,7 +186,7 @@ namespace BootstrapBlazor.Shared.Pages
},
new AttributeItem() {
Name = "AdditionalAssemblies",
Description = "额外程序集合",
Description = "额外程序集合,用于初始化路由",
Type = "IEnumerable<Assembly>",
ValueList = " — ",
DefaultValue = " — "
@ -222,7 +223,7 @@ namespace BootstrapBlazor.Shared.Pages
Name = "ActiveTab",
Description = "设置指定 TabItem 为激活状态",
Parameters = "TabItem",
ReturnValue = "Task"
ReturnValue = ""
}
};
}

View File

@ -83,8 +83,6 @@
<img alt="global" class="footer-lang" src="_content/BootstrapBlazor.Shared/images/global.svg" />
<a @onclick:preventDefault @onclick="@(e => SetLang("zh-CN"))">简 体</a>
/
<a @onclick:preventDefault @onclick="@(e => SetLang("zh-TW"))">繁 體</a>
/
<a @onclick:preventDefault @onclick="@(e => SetLang("en-US"))">English</a>
</div>
</div>