@page "/layouts"

<h3>Layout 布局</h3>

<h4>用于布局的容器组件，方便快速搭建页面的基本结构：</h4>

<p>
    <code>Container</code>：外层容器。当子元素中包含 <code>Header</code> 或 <code>Footer</code> 时，全部子元素会垂直上下排列，否则会水平左右排列。<br />
    <code>Header</code>：顶栏容器<br />
    <code>Side</code>：侧边栏容器<br />
    <code>Main</code>：主要区域容器<br />
    <code>Footer</code>：底栏容器
</p>

<h4>组件概述</h4>
<p>
    <code>Layout</code>：布局容器，其下可嵌套 <code>Header</code> <code>Sider</code> <code>Main</code> <code>Footer</code> 或 <code>Layout</code> 本身，可以放在任何父容器中<br />
    <code>Header</code>：顶部布局，自带默认样式，其下可嵌套任何元素<br />
    <code>Sider</code>：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素<br />
    <code>Main</code>：内容部分，自带默认样式，其下可嵌套任何元素<br />
    <code>Footer</code>：底部布局，自带默认样式，其下可嵌套任何元素
</p>

<Tips>
    <p>
        以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<code>Layout</code> 的子元素只能是后四者，后四者的父元素也只能是 <code>Layout</code>
    </p>

    <b>注意事项</b>

    <p>为了方便大家利用这套组件快速搭建项目，作者制作了 <b>项目模板（<code>Project Templates</code>）</b>，使用 <code>dotnet new</code> 命令行，与 <code>Bootstrap Blazor App Extension 扩展插件</code> 通过 <code>Visual Studio 2019</code> 新建项目创建，具体使用方法与步骤请点击 <a href="template" target="_blank">传送门</a></p>
</Tips>

<h4>常见页面布局</h4>

<Block Title="上中下布局" Introduction="常见于互联网网站布局">
    <Layout ShowFooter="true">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
        <Main>
            <div class="text-center main">Main</div>
        </Main>
        <Footer>
            <div class="text-center footer">Footer</div>
        </Footer>
    </Layout>
</Block>

<Block Title="中部左右结构布局" Introduction="中部采用左右结构，多用于后台管理网站布局，当布局模板中增加 <code>Side</code> 组件时默认采用上中下，中部采用左右结构布局">
    <Layout ShowFooter="true">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
        <Side>
            <div class="text-center side">Side</div>
        </Side>
        <Main>
            <div class="text-center main">Main</div>
        </Main>
        <Footer>
            <div class="text-center footer">Footer</div>
        </Footer>
    </Layout>
</Block>

<Block Title="左右结构" Introduction="右侧采用上中下结构，多用于后台管理网站布局，通过设置 <code>IsFullSide</code> 属性值来控制布局为左右结构">
    <Layout ShowFooter="true" IsFullSide="true">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
        <Side>
            <div class="text-center side">Side</div>
        </Side>
        <Main>
            <div class="text-center main">Main</div>
        </Main>
        <Footer>
            <div class="text-center footer">Footer</div>
        </Footer>
    </Layout>
</Block>

<Block Title="自定义侧边栏宽度支持百分比" Introduction="通过设置 <code>SideWidth</code> 属性控制侧边栏宽度，支持百分比写法，设置 <code>0</code> 时关闭设置宽度功能，采用内部子控件撑满宽度特性">
    <Layout ShowFooter="true" SideWidth="200">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
        <Side>
            <div class="text-center side">Side</div>
        </Side>
        <Main>
            <div class="text-center main">Main</div>
        </Main>
        <Footer>
            <div class="text-center footer">Footer</div>
        </Footer>
    </Layout>
</Block>

<Block Title="实战应用" Introduction="">
    <div>实际使用过程中，侧边栏一般有两种用法</div>
    <ul class="mt-2">
        <li>
            <div>侧边栏充满整个屏幕，当菜单总体高度超出屏幕后出现滚动条</div>
        </li>
        <li>
            <div>侧边栏不做处理高度由内容自动撑开</div>
        </li>
    </ul>
    <div>由于存在多种运用方式，所以本组件未进行封装，由自己决定如何进行布局，下面是实际运用中的实战示例</div>
    <p>
        为了方便大家学习与比较以下实战示例中尽量使用 <code>style</code> 内联样式
    </p>
    <p>
        本例点击左侧菜单展开后出现滚动条
    </p>
    <Tips>
        右侧面板中可用区域默认为全部，适用于带 <code>Tab</code> 组件的布局，本例中为了美观 <code>Main</code> 模板中内置了一个 <code>div</code> 并且设置样式为 <code>style="padding: 1rem;"</code>
    </Tips>
    <div style="width: 100%; height: 300px; border: 1px solid rgba(0,0,0,.125);">
        <Layout ShowFooter="true" SideWidth="160px">
            <Header>
                <div class="d-flex justify-content-center align-items-center" style="height: 50px; color: #fff; margin: 0 -1px;">Header</div>
            </Header>
            <Side>
                <div style="position: absolute; top: 0; left:0; right: 0; bottom: 0; overflow: auto; border-right: 1px solid rgba(0,0,0,.125); padding: 6px 0;">
                    <Menu Items="@GetIconSideMenuItems()" IsVertical="true"></Menu>
                </div>
            </Side>
            <Main>
                <div style="padding: 1rem;">Main</div>
            </Main>
            <Footer>
                <div class="d-flex justify-content-center align-items-center" style="height: 30px; color: #fff; background-color: #5b6e84; margin: 0 -1px;">Footer</div>
            </Footer>
        </Layout>
    </div>
    <p class="mt-3">
        本例点击左侧菜单展开后不出现滚动条会撑开父容器高度
    </p>
    <div style="width: 100%; border: 1px solid rgba(0,0,0,.125);">
        <Layout ShowFooter="true" SideWidth="160px">
            <Header>
                <div class="d-flex justify-content-center align-items-center" style="height: 50px; color: #fff; margin: 0 -1px;">Header</div>
            </Header>
            <Side>
                <div style="border-right: 1px solid rgba(0,0,0,.125); padding: 6px 0;">
                    <Menu Items="@GetIconSideMenuItems()" IsVertical="true"></Menu>
                </div>
            </Side>
            <Main>
                <div style="padding: 1rem;">Main</div>
            </Main>
            <Footer>
                <div class="d-flex justify-content-center align-items-center" style="height: 30px; color: #fff; background-color: #5b6e84; margin: 0 -1px;">Footer</div>
            </Footer>
        </Layout>
    </div>
    <p class="mt-3">
        <code>Layout</code> 组件与 <code>Tab</code> 组件配合使用实战示例请参阅 <a href="/tabs">Tab 组件</a>
    </p>
</Block>

<Block Title="整页面级别的组件" Introduction="">
    <Tips>通过设置 <code>IsPage</code> 属性设置 <code>Layout</code> 组件是否掌控正页面级别的布局方式，设置为 <code>true</code> 后，本组件采用整屏布局</Tips>

    <ul class="page-layout-demo-list">
        <li><a href="layout-page" target="_blank">整页面组件生成器</a></li>
    </ul>
</Block>

<AttributeTable Items="@GetAttributes()" />

// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using System.Collections.Generic;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Layouts
    {

        private IEnumerable<MenuItem> GetIconSideMenuItems()
        {
            var ret = new List<MenuItem>
            {
                new MenuItem() { Text = "系统设置", IsActive = true, Icon = "fa fa-fw fa-gears" },
                new MenuItem() { Text = "权限设置", Icon = "fa fa-fw fa-users" },
                new MenuItem() { Text = "日志设置", Icon = "fa fa-fw fa-database" }
            };

            ret[0].AddItem(new MenuItem() { Text = "网站设置", Icon = "fa fa-fw fa-fa" });
            ret[0].AddItem(new MenuItem() { Text = "任务设置", Icon = "fa fa-fw fa-tasks" });

            ret[1].AddItem(new MenuItem() { Text = "用户设置", Icon = "fa fa-fw fa-user" });
            ret[1].AddItem(new MenuItem() { Text = "菜单设置", Icon = "fa fa-fw fa-dashboard" });
            ret[1].AddItem(new MenuItem() { Text = "角色设置", Icon = "fa fa-fw fa-sitemap" });

            ret[2].AddItem(new MenuItem() { Text = "访问日志", Icon = "fa fa-fw fa-bars" });
            ret[2].AddItem(new MenuItem() { Text = "登录日志", Icon = "fa fa-fw fa-user-circle-o" });
            ret[2].AddItem(new MenuItem() { Text = "操作日志", Icon = "fa fa-fw fa-edit" });

            return ret;
        }

        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Header",
                Description = "页头组件模板",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Side",
                Description = "侧边栏组件模板",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "SideWidth",
                Description = "侧边栏宽度，支持百分比，设置 0 时关闭宽度功能",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "300px"
            },
            new AttributeItem() {
                Name = "Main",
                Description = "内容组件模板",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Footer",
                Description = "页脚组件模板",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Menus",
                Description = "整页面布局时侧边栏菜单数据集合",
                Type = "IEnumerable<MenuItem>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "IsFullSide",
                Description = "侧边栏是否占满整个左边",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsPage",
                Description = "是否为整页面布局",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsFixedFooter",
                Description = "是否固定 Footer 组件",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsDark",
                Description = "是否为暗黑模式",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsFixedHeader",
                Description = "是否固定 Header 组件",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ShowCollapseBar",
                Description = "是否显示收缩展开 Bar",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ShowFooter",
                Description = "是否显示 Footer 模板",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ShowGotoTop",
                Description = "是否显示返回顶端按钮",
                Type = "bool",
                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 = "收缩展开回调委托",
                Type = "Func<bool, Task>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "OnClickMenu",
                Description = "点击菜单项时回调委托",
                Type = "Func<bool, MenuItem>",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };
    }
}