Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Example Razor C#Video

Collapse

The content area is contained by the collapsed panel

Basic usage

Multiple panels can be expanded at the same time, with no effect between panels

Demo

Consistency

Consistent with real life: consistent with real-life processes, logic, follow the user's habits of language and concepts;

Consistent in the interface: All elements and structures need to be consistent, such as design styles, icons and text, the location of elements, and so on.

Feedback

Control feedback: through the interface style and interactive effect so that users can clearly perceive their own actions;

Page feedback: After the operation, the current state is clearly represented by changes in the page elements.

Efficiency

Simplify the process: design simple and intuitive operating process;

Clear and clear: clear language and clear expression, so that users quickly understand and then make decisions;

Help users identify: The interface is straightforward, allowing users to quickly identify rather than recall, reducing the user's memory burden.

Controllability

User decision-making: according to the scene can give the user action advice or security tips, but can not replace the user to make decisions;

Results controllable: Users are free to perform actions, including undoing, falling back, and terminating the current operation.

@inject IStringLocalizer<CollapseNormal> Localizer

<Collapse OnCollapseChanged="@OnChanged">
    <CollapseItems>
        <CollapseItem Text="@Localizer["Consistency"]">
            <div>@Localizer["ConsistencyItem1"]</div>
            <div>@Localizer["ConsistencyItem2"]</div>
        </CollapseItem>
        <CollapseItem Text="@Localizer["Feedback"]" IsCollapsed="false">
            <div>@Localizer["FeedbackItem1"]</div>
            <div>@Localizer["FeedbackItem2"]</div>
        </CollapseItem>
        <CollapseItem Text="@Localizer["Efficiency"]">
            <div>@Localizer["EfficiencyItem1"]</div>
            <div>@Localizer["EfficiencyItem2"]</div>
            <div>@Localizer["EfficiencyItem3"]</div>
        </CollapseItem>
        <CollapseItem Text="@Localizer["Controllability"]">
            <div>@Localizer["ControllabilityItem1"]</div>
            <div>@Localizer["ControllabilityItem2"]</div>
        </CollapseItem>
    </CollapseItems>
</Collapse>
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    [NotNull]
    private BlockLogger? Trace { get; set; }

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

Accordion effect

Only one panel can be expanded at a time

Demo

Consistency

Consistent with real life: consistent with real-life processes, logic, follow the user's habits of language and concepts;

Consistent in the interface: All elements and structures need to be consistent, such as design styles, icons and text, the location of elements, and so on.

Feedback

Control feedback: through the interface style and interactive effect so that users can clearly perceive their own actions;

Page feedback: After the operation, the current state is clearly represented by changes in the page elements.

Efficiency

Simplify the process: design simple and intuitive operating process;

Clear and clear: clear language and clear expression, so that users quickly understand and then make decisions;

Help users identify: The interface is straightforward, allowing users to quickly identify rather than recall, reducing the user's memory burden.

Controllability

User decision-making: according to the scene can give the user action advice or security tips, but can not replace the user to make decisions;

Results controllable: Users are free to perform actions, including undoing, falling back, and terminating the current operation.

@inject IStringLocalizer<CollapseAccordion> Localizer

<Collapse IsAccordion="true">
    <CollapseItems>
        <CollapseItem Text="@Localizer["Consistency"]">
            <div>@Localizer["ConsistencyItem1"]</div>
            <div>@Localizer["ConsistencyItem2"]</div>
        </CollapseItem>
        <CollapseItem Text="@Localizer["Feedback"]">
            <div>@Localizer["FeedbackItem1"]</div>
            <div>@Localizer["FeedbackItem2"]</div>
        </CollapseItem>
        <CollapseItem Text="@Localizer["Efficiency"]">
            <div>@Localizer["EfficiencyItem1"]</div>
            <div>@Localizer["EfficiencyItem2"]</div>
            <div>@Localizer["EfficiencyItem3"]</div>
        </CollapseItem>
        <CollapseItem Text="@Localizer["Controllability"]">
            <div>@Localizer["ControllabilityItem1"]</div>
            <div>@Localizer["ControllabilityItem2"]</div>
        </CollapseItem>
    </CollapseItems>
</Collapse>

The child title color

Each panel sets a different color

Demo

Consistency

Consistent with real life: consistent with real-life processes, logic, follow the user's habits of language and concepts;

Consistent in the interface: All elements and structures need to be consistent, such as design styles, icons and text, the location of elements, and so on.

Feedback

Control feedback: through the interface style and interactive effect so that users can clearly perceive their own actions;

Page feedback: After the operation, the current state is clearly represented by changes in the page elements.

Efficiency

Simplify the process: design simple and intuitive operating process;

Clear and clear: clear language and clear expression, so that users quickly understand and then make decisions;

Help users identify: The interface is straightforward, allowing users to quickly identify rather than recall, reducing the user's memory burden.

Controllability

User decision-making: according to the scene can give the user action advice or security tips, but can not replace the user to make decisions;

Results controllable: Users are free to perform actions, including undoing, falling back, and terminating the current operation.

@inject IStringLocalizer<CollapseColor> Localizer

<Collapse IsAccordion="true">
    <CollapseItems>
        <CollapseItem Text="@Localizer["Consistency"]" TitleColor="Color.Primary">
            <div>@Localizer["ConsistencyItem1"]</div>
            <div>@Localizer["ConsistencyItem2"]</div>
        </CollapseItem>
        <CollapseItem Text="@Localizer["Feedback"]" TitleColor="Color.Info">
            <div>@Localizer["FeedbackItem1"]</div>
            <div>@Localizer["FeedbackItem2"]</div>
        </CollapseItem>
        <CollapseItem Text="@Localizer["Efficiency"]" TitleColor="Color.Success">
            <div>@Localizer["EfficiencyItem1"]</div>
            <div>@Localizer["EfficiencyItem2"]</div>
            <div>@Localizer["EfficiencyItem3"]</div>
        </CollapseItem>
        <CollapseItem Text="@Localizer["Controllability"]" TitleColor="Color.Warning">
            <div>@Localizer["ControllabilityItem1"]</div>
            <div>@Localizer["ControllabilityItem2"]</div>
        </CollapseItem>
    </CollapseItems>
</Collapse>

Dynamic updates

The CollapseItems is set by conditional logic

Demo

Consistency

Consistent with real life: consistent with real-life processes, logic, follow the user's habits of language and concepts;

Consistent in the interface: All elements and structures need to be consistent, such as design styles, icons and text, the location of elements, and so on.

Feedback

Control feedback: through the interface style and interactive effect so that users can clearly perceive their own actions;

Page feedback: After the operation, the current state is clearly represented by changes in the page elements.

Efficiency

Simplify the process: design simple and intuitive operating process;

Clear and clear: clear language and clear expression, so that users quickly understand and then make decisions;

Help users identify: The interface is straightforward, allowing users to quickly identify rather than recall, reducing the user's memory burden.

Controllability

User decision-making: according to the scene can give the user action advice or security tips, but can not replace the user to make decisions;

Results controllable: Users are free to perform actions, including undoing, falling back, and terminating the current operation.

@inject IStringLocalizer<CollapseItems> Localizer

<Collapse>
    <CollapseItems>
        @if (State)
        {
            <CollapseItem Text="@Localizer["Consistency"]">
                <div>@Localizer["ConsistencyItem1"]</div>
                <div>@Localizer["ConsistencyItem2"]</div>
            </CollapseItem>
            <CollapseItem Text="@Localizer["Feedback"]" IsCollapsed="false">
                <div>@Localizer["FeedbackItem1"]</div>
                <div>@Localizer["FeedbackItem2"]</div>
            </CollapseItem>
        }
        else
        {
            <Collapse>
                <CollapseItems>
                    <CollapseItem Text="@Localizer["Consistency"]">
                        <div>@Localizer["ConsistencyItem1"]</div>
                        <div>@Localizer["ConsistencyItem2"]</div>
                    </CollapseItem>
                    <CollapseItem Text="@Localizer["Feedback"]">
                        <div>@Localizer["FeedbackItem1"]</div>
                        <div>@Localizer["FeedbackItem2"]</div>
                    </CollapseItem>
                    <CollapseItem Text="@Localizer["Efficiency"]">
                        <div>@Localizer["EfficiencyItem1"]</div>
                        <div>@Localizer["EfficiencyItem2"]</div>
                        <div>@Localizer["EfficiencyItem3"]</div>
                    </CollapseItem>
                    <CollapseItem Text="@Localizer["Controllability"]">
                        <div>@Localizer["ControllabilityItem1"]</div>
                        <div>@Localizer["ControllabilityItem2"]</div>
                    </CollapseItem>
                </CollapseItems>
            </Collapse>
        }
    </CollapseItems>
</Collapse>
<Button Text="@Localizer["ButtonText"]" OnClick="OnToggle" class="mt-3" />

@code {
    private bool State { get; set; }

    private void OnToggle()
    {
        State = !State;
    }
}

Icon

Show icon in header

Demo

Consistency

Consistent with real life: consistent with real-life processes, logic, follow the user's habits of language and concepts;

Consistent in the interface: All elements and structures need to be consistent, such as design styles, icons and text, the location of elements, and so on.

Feedback

Control feedback: through the interface style and interactive effect so that users can clearly perceive their own actions;

Page feedback: After the operation, the current state is clearly represented by changes in the page elements.

Controllability

User decision-making: according to the scene can give the user action advice or security tips, but can not replace the user to make decisions;

Results controllable: Users are free to perform actions, including undoing, falling back, and terminating the current operation.

@inject IStringLocalizer<CollapseIcon> Localizer

<Collapse IsAccordion="true">
    <CollapseItems>
        <CollapseItem Text="@Localizer["Consistency"]" Icon="fa-solid fa-people-roof">
            <div>@Localizer["ConsistencyItem1"]</div>
            <div>@Localizer["ConsistencyItem2"]</div>
        </CollapseItem>
        <CollapseItem Text="@Localizer["Feedback"]" Icon="fa-solid fa-users">
            <div>@Localizer["FeedbackItem1"]</div>
            <div>@Localizer["FeedbackItem2"]</div>
        </CollapseItem>
        <CollapseItem Text="@Localizer["Controllability"]" Icon="fa-solid fa-users-gear">
            <div>@Localizer["ControllabilityItem1"]</div>
            <div>@Localizer["ControllabilityItem2"]</div>
        </CollapseItem>
    </CollapseItems>
</Collapse>

Attributes

@page "/collapses"
@inject IStringLocalizer<Collapses> Localizer

<h3>Collapse</h3>

<h4>The content area is contained by the collapsed panel</h4>

<DemoBlock Title="Basic usage" Introduction="Multiple panels can be expanded at the same time, with no effect between panels" Name="Normal" Demo="typeof(Demos.Collapse.CollapseNormal)" />

<DemoBlock Title="Accordion effect" Introduction="Only one panel can be expanded at a time" Name="Accordion" Demo="typeof(Demos.Collapse.CollapseAccordion)" />

<DemoBlock Title="The child title color" Introduction="Each panel sets a different color" Name="Color" Demo="typeof(Demos.Collapse.CollapseColor)" />

<DemoBlock Title="Dynamic updates" Introduction="The <code>CollapseItems</code> is set by conditional logic" Name="Items" Demo="typeof(Demos.Collapse.CollapseItems)" />

<DemoBlock Title="Icon" Introduction="Show icon in header" Name="Icon" Demo="typeof(Demos.Collapse.CollapseIcon)" />

<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/

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// Collapses
/// </summary>
public sealed partial class Collapses
{
    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        // TODO: 移动到数据库中
        new AttributeItem() {
            Name = "CollapseItems",
            Description = Localizer["CollapseItems"],
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "IsAccordion",
            Description = Localizer["IsAccordion"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "OnCollapseChanged",
            Description = Localizer["OnCollapseChanged"],
            Type = "Func<CollapseItem, Task>",
            ValueList = " — ",
            DefaultValue = " — "
        }
    };
}

Collapse

The content area is contained by the collapsed panel

Demo

Demo

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.2.5-beta02