Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Dividing line

The dividing line that separates the content.

Basic usage

Split text paragraphs in different chapters.

Demo

Youth is a short dream, when you wake up, it has long since disappeared.

A small amount of evil is enough to cancel out all the noble qualities, causing people to be infamous.

@inject IStringLocalizer<DividerNormal> Localizer

<div>
    <p>@Localizer["Content1"]</p>
    <Divider />
    <p>@Localizer["Content2"]</p>
</div>

Set copy

You can customize the content of the copy on the dividing line.

Demo

Content1

Young Bao Qingtian

Content2

League of Legends

A cute icon

Learning Quotations

Learning makes me happy

@inject IStringLocalizer<DividerAlignment> Localizer

<div>
    <p>@Localizer["Content1"]</p>
    <Divider Text="@Localizer["Divider1"]" Alignment="Alignment.Left"/>
    <p>@Localizer["Content2"]</p>
    <Divider Text="@Localizer["Divider2"]"/>
    <p>@Localizer["Content3"]</p>
    <Divider Text="@Localizer["Divider3"]" Alignment="Alignment.Right"/>
    <p>@Localizer["Content4"]</p>
</div>

Settings icon

You can customize the content of the copy on the dividing line.

Demo

A sunny day above my head, I missed one in my heart

When the knight returns, the day the broken sword is reforged

A cute icon

Bookmarks

Learning makes me happy

@inject IStringLocalizer<DividerIcon> Localizer

<div>
    <p>@Localizer["Content1"]</p>
    <Divider Icon="fa-fw fa-solid fa-at" Alignment="Alignment.Left" />
    <p>@Localizer["Content2"]</p>
    <Divider Icon="fa-fw fa-solid fa-chart-bar" />
    <p>@Localizer["Content3"]</p>
    <Divider Icon="fa-fw fa-solid fa-bookmark" Text="@Localizer["Bookmark"]" Alignment="Alignment.Right" />
    <p>@Localizer["Content4"]</p>
</div>

Vertical split

Display dividing line vertically

Demo

Rain

Old hometown

Deep vegetation

Dividing line

@inject IStringLocalizer<DividerVertical> Localizer

<div>
    <div class="d-flex">
        <span>@Localizer["Content1"]</span>
        <Divider IsVertical="true" />
        <span>@Localizer["Content2"]</span>
        <Divider IsVertical="true" />
        <span>@Localizer["Content3"]</span>
    </div>
    <Divider Text="@Localizer["Divider"]" />
    <div class="d-flex" style="height: 100px;">
        <div class="border border-primary" style="width:100px; height:100%;"></div>
        <Divider IsVertical="true" Alignment="Alignment.Left" />
        <div class="border border-success" style="width:100px; height:100%;"></div>
        <Divider IsVertical="true"></Divider>
        <div class="border border-info" style="width:100px; height:100%;"></div>
        <Divider IsVertical="true" Alignment="Alignment.Right" />
        <div class="border border-warning" style="width:100px; height:100%;"></div>
    </div>
    <Divider Text="@Localizer["Divider"]" />
    <div class="d-flex" style="height: 200px;">
        <div class="border border-primary" style="width:100px; height:100%;"></div>
        <Divider IsVertical="true" Text="@Localizer["Divider"]" Alignment="Alignment.Left" />
        <div class="border border-success" style="width:100px; height:100%;"></div>
        <Divider IsVertical="true" Text="@Localizer["Divider"]" />
        <div class="border border-info" style="width:100px; height:100%;"></div>
        <Divider IsVertical="true" Text="@Localizer["Divider"]" Alignment="Alignment.Right" />
        <div class="border border-warning" style="width:100px; height:100%;" />
    </div>
</div>

Custom content

Any content can be customized by setting the content of ChildContent

Demo

A sunny day above my head, I missed one in my heart

I am a custom content div element

When the knight returns, the day the broken sword is reforged

@inject IStringLocalizer<DividerChildContent> Localizer

<div>
    <p>@Localizer["Content1"]</p>
    <Divider>
        <div class="text-dagner">@((MarkupString)Localizer["DividerContent"].Value)</div>
    </Divider>
    <p>@Localizer["Content2"]</p>
</div>

Attributes

B station related video link

交流群

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

Dividing line

The dividing line that separates the content.

Demo

Demo

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.4.5-beta01