!782 docs(#I2A340): update docs for layout/tab/menu react in chain

* refactor: 重命名 ClickTabToNavigator * docs: 更新 Tabs 组件文档补充 ClickTabToNavigator 说明 * fix: 修复移除按钮工作不正常问题 * docs: 更新 Tabs 文档 * docs: Menus 组件增加 DisableNavigation 说明
2024-12-05 13:39:39 +08:00 · 2020-12-20 17:06:24 +08:00 · 2020-12-20 17:06:24 +08:00 · a8735b4a77
commit a8735b4a77
parent 7906eadef8
6 changed files with 90 additions and 33 deletions
--- a/src/BootstrapBlazor.Shared/Pages/Menus.razor
+++ b/src/BootstrapBlazor.Shared/Pages/Menus.razor
@ -4,6 +4,10 @@

 <h4>为页面和功能提供导航的菜单列表。</h4>

+<Tips class="mt-3">
+    <p><code>Menu</code> 组件一般用法为菜单导航，即点击菜单后地址栏进行重定向导航，但是在实战中有时候不需要导航，通过设置 <code>OnClick</code> 回调委托，自定义处理逻辑，此时通过设置属性 <code>DisableNavigation</code> 即可，本例中由于都是模拟菜单点击并未真正的进行地址栏跳转导航所以所有 <code>Menu</code> 均设置为 <code>true</code> 禁止导航</p>
+</Tips>
+
 <Block Title="顶栏" Introduction="适用广泛的基础用法。" CodeFile="menu.1.html">
    <Menu Items="@Items" DisableNavigation="true" OnClick="@OnClickMenu" />
    <Logger @ref="Trace" class="mt-3" />
--- a/src/BootstrapBlazor.Shared/Pages/Menus.razor.cs
+++ b/src/BootstrapBlazor.Shared/Pages/Menus.razor.cs
@ -304,6 +304,13 @@ namespace BootstrapBlazor.Shared.Pages
                    ValueList = "true|false",
                    DefaultValue = "false"
                },
+                new AttributeItem() {
+                    Name = "DisableNavigation",
+                    Description = "是否禁止地址栏导航",
+                    Type = "bool",
+                    ValueList = "true|false",
+                    DefaultValue = "false"
+                },
                new AttributeItem() {
                    Name = "OnClick",
                    Description = "菜单项被点击时回调此方法",
--- a/src/BootstrapBlazor.Shared/Pages/Tabs.razor
+++ b/src/BootstrapBlazor.Shared/Pages/Tabs.razor
@ -6,7 +6,17 @@

 <p>Tab 组件从设计上采用模板的设计形式，使用本组件时通过将 <code>TabItem</code> 子组件添加到 <code>TabItems</code> 模板中即可</p>

-<p>本组件会根据宽度高度等进行自适应适配，适当的时候可以出现左右或者上下的滚动箭头</p>
+<Tips>
+    <p>
+        <code>Tab</code> 组件一般有两种用法：
+        <ul class="ul-demo">
+            <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>
+    </p>
+    <p>本组件会根据宽度高度等进行自适应适配，适当的时候可以出现左右或者上下的滚动箭头</p>
+</Tips>

 <Block Title="基础用法" Introduction="基础的、简洁的标签页。" CodeFile="tabs.1.html">
    <Tab>
@ -223,7 +233,7 @@
        </Header>
        <Side>
            <div style="border-right: 1px solid #e6e6e6; height: 100%; overflow: auto; padding: 1rem 0; background-color: #f8f9fa;">
-                <Menu Items="@GetSideMenuItems()" IsVertical="true" OnClick="@OnClickMenuItem" />
+                <Menu Items="@GetSideMenuItems()" IsVertical="true" OnClick="@OnClickMenuItem" @ref="TabMenu" />
            </div>
        </Side>
        <Main>
@ -242,7 +252,7 @@
            <i class="fa fa-plus-circle"></i>
            <span>添加</span>
        </button>
-        <button type="button" class="btn btn-outline-danger" disabled="@RemoveEndableString" @onclick="@(e => RemoveTab(TabSet2))">
+        <button type="button" class="btn btn-outline-danger" disabled="@((TabSet2?.Items.Count() > 4) ? null : "true")" @onclick="@(e => RemoveTab(TabSet2!))">
            <i class="fa fa-minus-circle"></i>
            <span>移除</span>
        </button>
--- a/src/BootstrapBlazor.Shared/Pages/Tabs.razor.cs
+++ b/src/BootstrapBlazor.Shared/Pages/Tabs.razor.cs
@ -28,6 +28,26 @@ namespace BootstrapBlazor.Shared.Pages
        [NotNull]
        private Tab? TabSet2 { get; set; }

+        /// <summary>
+        /// OnInitialized 方法
+        /// </summary>
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            await base.OnAfterRenderAsync(firstRender);
+
+            if (firstRender)
+            {
+                var menuItem = TabMenu?.Items.FirstOrDefault();
+                if (menuItem != null)
+                {
+                    await InvokeAsync(() =>
+                    {
+                        var _ = TabMenu?.OnClick?.Invoke(menuItem);
+                    });
+                }
+            }
+        }
+
        private async Task AddTab(Tab tabset)
        {
            var text = $"Tab {tabset.Items.Count() + 1}";
@ -50,12 +70,12 @@ namespace BootstrapBlazor.Shared.Pages

        private string? RemoveEndableString => (TabSet?.Items.Count() > 4) ? null : "true";

-        private async Task RemoveTab(Tab tabset)
+        private void RemoveTab(Tab tabset)
        {
            if (tabset.Items.Count() > 4)
            {
                var item = tabset.Items.Last();
-                await tabset.Remove(item);
+                tabset.Remove(item);
            }
        }

@ -78,6 +98,9 @@ namespace BootstrapBlazor.Shared.Pages
        [NotNull]
        private Tab? TabSetMenu { get; set; }

+        [NotNull]
+        private Menu? TabMenu { get; set; }
+
        private async Task OnClickMenuItem(MenuItem item)
        {
            var text = item.Text;
@ -110,21 +133,21 @@ namespace BootstrapBlazor.Shared.Pages
                Name = "IsBorderCard",
                Description = "是否为带边框卡片样式",
                Type = "boolean",
-                ValueList = " — ",
+                ValueList = "true/false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsCard",
                Description = "是否为卡片样式",
                Type = "boolean",
-                ValueList = " — ",
+                ValueList = "true/false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ShowClose",
                Description = "是否显示关闭按钮",
                Type = "boolean",
-                ValueList = " — ",
+                ValueList = "true/false",
                DefaultValue = "false"
            },
            new AttributeItem() {
@ -134,6 +157,13 @@ namespace BootstrapBlazor.Shared.Pages
                ValueList = " — ",
                DefaultValue = "false"
            },
+            new AttributeItem() {
+                Name = "ClickTabToNavigation",
+                Description = "点击标题时是否导航",
+                Type = "boolean",
+                ValueList = "true/false",
+                DefaultValue = "false"
+            },
            new AttributeItem() {
                Name = "Placement",
                Description = "设置标签位置",
@ -161,6 +191,20 @@ namespace BootstrapBlazor.Shared.Pages
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "AdditionalAssemblies",
+                Description = "额外程序集合",
+                Type = "IEnumerable<Assembly>",
+                ValueList = " — ",
+                DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "OnClickTab",
+                Description = "点击 TabItem 标题时回调委托方法",
+                Type = "Func<TabItem, Task>",
+                ValueList = " — ",
+                DefaultValue = " — "
            }
        };

@ -184,10 +228,10 @@ namespace BootstrapBlazor.Shared.Pages
                ReturnValue = " — "
            },
            new MethodItem() {
-                Name = "ReActiveTab",
-                Description = "切换后回调此方法",
-                Parameters = " — ",
-                ReturnValue = " — "
+                Name = "ActiveTab",
+                Description = "设置指定 TabItem 为激活状态",
+                Parameters = "TabItem",
+                ReturnValue = "Task"
            }
        };
    }
--- a/src/BootstrapBlazor/Components/Layout/Layout.razor
+++ b/src/BootstrapBlazor/Components/Layout/Layout.razor
@ -80,7 +80,7 @@ RenderFragment RenderMain =>
    @if (UseTabSet)
    {
        <CascadingValue Value="this" IsFixed="true">
-            <Tab ClickTabToNavigator="true" ShowExtendButtons="true" ShowClose="true"
+            <Tab ClickTabToNavigation="true" ShowExtendButtons="true" ShowClose="true"
                 AdditionalAssemblies="@AdditionalAssemblies"></Tab>
        </CascadingValue>
    }
--- a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs
+++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs
@ -110,13 +110,6 @@ namespace BootstrapBlazor.Components
        [Parameter]
        public int Height { get; set; }

-        /// <summary>
-        /// 获得/设置 默认首页 Tab 显示文本 默认为 Index
-        /// </summary>
-        [Parameter]
-        [NotNull]
-        public string? DefaultIndexText { get; set; } = "Index";
-
        /// <summary>
        /// 获得/设置 组件标签显示位置 默认显示在 Top 位置
        /// </summary>
@ -139,7 +132,7 @@ namespace BootstrapBlazor.Components
        /// 获得/设置 点击 TabItem 时是否自动导航 默认为 false 不导航
        /// </summary>
        [Parameter]
-        public bool ClickTabToNavigator { get; set; }
+        public bool ClickTabToNavigation { get; set; }

        /// <summary>
        /// 获得/设置 TabItems 模板
@ -181,7 +174,7 @@ namespace BootstrapBlazor.Components

        private Task InitRouteTable() => Task.Run(() =>
        {
-            if (ClickTabToNavigator)
+            if (ClickTabToNavigation)
            {
                var apps = AdditionalAssemblies == null ? new[] { Assembly.GetEntryAssembly()! } : new[] { Assembly.GetEntryAssembly()! }.Concat(AdditionalAssemblies);
                var componentTypes = apps.SelectMany(a => a.ExportedTypes.Where(t => typeof(IComponent).IsAssignableFrom(t)));
@ -257,7 +250,7 @@ namespace BootstrapBlazor.Components
        {
            Items.ToList().ForEach(i => i.SetActive(false));
            if (OnClickTab != null) await OnClickTab(item);
-            if (ClickTabToNavigator)
+            if (ClickTabToNavigation)
            {
                Navigator.NavigateTo(item.Url ?? "");
            }
@ -280,10 +273,10 @@ namespace BootstrapBlazor.Components
                {
                    index--;
                    if (index < 0) index = _items.Count - 1;
-                    if (!ClickTabToNavigator) item.SetActive(false);
+                    if (!ClickTabToNavigation) item.SetActive(false);

                    item = Items.ElementAt(index);
-                    if (ClickTabToNavigator)
+                    if (ClickTabToNavigation)
                    {
                        Navigator.NavigateTo(item.Url!);
                    }
@ -306,13 +299,13 @@ namespace BootstrapBlazor.Components
                var index = _items.IndexOf(item);
                if (index < _items.Count)
                {
-                    if (!ClickTabToNavigator) item.SetActive(false);
+                    if (!ClickTabToNavigation) item.SetActive(false);

                    index++;
                    if (index + 1 > _items.Count) index = 0;
                    item = Items.ElementAt(index);

-                    if (ClickTabToNavigator)
+                    if (ClickTabToNavigation)
                    {
                        Navigator.NavigateTo(item.Url!);
                    }
@ -335,10 +328,10 @@ namespace BootstrapBlazor.Components
        /// <summary>
        /// 关闭当前标签页方法
        /// </summary>
-        private async Task CloseCurrentTab()
+        private void CloseCurrentTab()
        {
            var tab = _items.FirstOrDefault(t => t.IsActive);
-            if (tab != null && tab.Closable) await Remove(tab);
+            if (tab != null && tab.Closable) Remove(tab);
        }

        /// <summary>
@ -376,7 +369,7 @@ namespace BootstrapBlazor.Components
        /// 添加 TabItem 方法
        /// </summary>
        /// <param name="parameters"></param>
-        public void AddTab(Dictionary<string, object> parameters)
+        public void Add(Dictionary<string, object> parameters)
        {
            var item = TabItem.Create(parameters);
            _items.Add(item);
@ -387,7 +380,7 @@ namespace BootstrapBlazor.Components
        /// 移除 TabItem 方法
        /// </summary>
        /// <param name="item"></param>
-        public Task Remove(TabItem item)
+        public void Remove(TabItem item)
        {
            var index = _items.IndexOf(item);
            _items.Remove(item);
@ -407,7 +400,6 @@ namespace BootstrapBlazor.Components
                }
                if (activeItem != null) activeItem.SetActive(true);
            }
-            return Task.CompletedTask;
        }

        /// <summary>
@ -431,7 +423,7 @@ namespace BootstrapBlazor.Components
        {
            if (disposing)
            {
-                if (ClickTabToNavigator) Navigator.LocationChanged -= Navigator_LocationChanged;
+                if (ClickTabToNavigation) Navigator.LocationChanged -= Navigator_LocationChanged;
            }

            base.Dispose(disposing);