Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

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

B station related video link

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Collapse

The content area is contained by the collapsed panel

Demo

Demo

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.4.4-beta01