Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Collapse 折叠面板

通过折叠面板收纳内容区域

可同时展开多个面板,面板之间不影响

Demo
与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
简化流程:设计简洁直观的操作流程;
清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。

每次只能展开一个面板

Demo
与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
简化流程:设计简洁直观的操作流程;
清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。

每个面板设置不同颜色

Demo
与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
简化流程:设计简洁直观的操作流程;
清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。

Attributes

Loading...
@page "/collapses"

<h3>Collapse 折叠面板</h3>

<h4>通过折叠面板收纳内容区域</h4>

<Block Title="基础用法" Introduction="可同时展开多个面板,面板之间不影响">
    <Collapse OnCollapseChanged="@OnChanged">
        <CollapseItems>
            <CollapseItem Text="一致性 Consistency">
                <div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div>
                <div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div>
            </CollapseItem>
            <CollapseItem Text="反馈 Feedback" IsCollapsed="false">
                <div>控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;</div>
                <div>页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。</div>
            </CollapseItem>
            <CollapseItem Text="效率 Efficiency">
                <div>简化流程:设计简洁直观的操作流程;</div>
                <div>清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;</div>
                <div>帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。</div>
            </CollapseItem>
            <CollapseItem Text="可控 Controllability">
                <div>用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;</div>
                <div>结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。</div>
            </CollapseItem>
        </CollapseItems>
    </Collapse>
    <BlockLogger @ref="Trace" class="mt-3" />
</Block>

<Block Title="手风琴效果" Introduction="每次只能展开一个面板">
    <Collapse IsAccordion="true">
        <CollapseItems>
            <CollapseItem Text="一致性 Consistency">
                <div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div>
                <div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div>
            </CollapseItem>
            <CollapseItem Text="反馈 Feedback">
                <div>控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;</div>
                <div>页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。</div>
            </CollapseItem>
            <CollapseItem Text="效率 Efficiency">
                <div>简化流程:设计简洁直观的操作流程;</div>
                <div>清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;</div>
                <div>帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。</div>
            </CollapseItem>
            <CollapseItem Text="可控 Controllability">
                <div>用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;</div>
                <div>结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。</div>
            </CollapseItem>
        </CollapseItems>
    </Collapse>
</Block>

<Block Title="子项标题颜色" Introduction="每个面板设置不同颜色">
    <Collapse IsAccordion="true">
        <CollapseItems>
            <CollapseItem Text="一致性 Consistency" TitleColor="Color.Primary">
                <div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div>
                <div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div>
            </CollapseItem>
            <CollapseItem Text="反馈 Feedback" TitleColor="Color.Info">
                <div>控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;</div>
                <div>页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。</div>
            </CollapseItem>
            <CollapseItem Text="效率 Efficiency" TitleColor="Color.Success">
                <div>简化流程:设计简洁直观的操作流程;</div>
                <div>清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;</div>
                <div>帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。</div>
            </CollapseItem>
            <CollapseItem Text="可控 Controllability" TitleColor="Color.Warning">
                <div>用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;</div>
                <div>结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。</div>
            </CollapseItem>
        </CollapseItems>
    </Collapse>
</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 BootstrapBlazor.Shared.Pages.Components;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Collapses
    {
        [NotNull]
        private BlockLogger? Trace { get; set; }

        private Task OnChanged(CollapseItem item)
        {
            Trace.Log($"{item.Text}: {item.IsCollapsed}");
            return Task.CompletedTask;
        }

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "CollapseItems",
                Description = "内容",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "IsAccordion",
                Description = "是否手风琴效果",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload