Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

Card

Aggregate information to display in a card container

Card is a simple example

Demo
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

You can show the content by adding the CardHeader and CardFooter elements

Demo
Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

By setting, IsCenter-true center the content

Demo
Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

By setting, The makes the border and Body color appropriate

Demo
Header
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Attributes

Loading...
@page "/cards"
@inject IStringLocalizer<Cards> Localizer

<h3>Card</h3>

<h4>Aggregate information to display in a card container</h4>

<DemoBlock Title="Card card components" Introduction="Card is a simple example" Name="Normal">
    <Card>
        <CardBody>
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </CardBody>
    </Card>
</DemoBlock>

<DemoBlock Title="Header 和 Footer" Introduction="You can show the content by adding the CardHeader and CardFooter elements" Name="Footer">
    <Card>
        <CardHeader>
            Featured
        </CardHeader>
        <CardBody>
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </CardBody>
        <CardFooter>
            2 days ago
        </CardFooter>
    </Card>
</DemoBlock>

<DemoBlock Title="The content is centered" Introduction="By setting, <code> IsCenter-true </code> center the content" Name="IsCenter">
    <Card IsCenter="true">
        <CardHeader>
            Featured
        </CardHeader>
        <CardBody>
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </CardBody>
        <CardFooter>
            2 days ago
        </CardFooter>
    </Card>
</DemoBlock>

<DemoBlock Title="A card with a border color" Introduction="By setting, <code> The </code> makes the border and Body color appropriate" Name="Color">
    <div class="row g-3">
        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
            <Card Color="Color.Primary" IsCenter="true">
                <CardHeader>
                    Header
                </CardHeader>
                <CardBody>
                    <h5 class="card-title">Primary card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </CardBody>
            </Card>
        </div>
        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
            <Card Color="Color.Secondary" IsCenter="true">
                <CardHeader>
                    Header
                </CardHeader>
                <CardBody>
                    <h5 class="card-title">Secondary card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </CardBody>
            </Card>
        </div>
        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
            <Card Color="Color.Success" IsCenter="true">
                <CardHeader>
                    Header
                </CardHeader>
                <CardBody>
                    <h5 class="card-title">Success card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </CardBody>
            </Card>
        </div>
        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
            <Card Color="Color.Warning" IsCenter="true">
                <CardHeader>
                    Header
                </CardHeader>
                <CardBody>
                    <h5 class="card-title">Warning card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </CardBody>
            </Card>
        </div>
        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
            <Card Color="Color.Danger" IsCenter="true">
                <CardHeader>
                    Header
                </CardHeader>
                <CardBody>
                    <h5 class="card-title">Danger card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </CardBody>
            </Card>
        </div>
        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
            <Card Color="Color.Info" IsCenter="true">
                <CardHeader>
                    Header
                </CardHeader>
                <CardBody>
                    <h5 class="card-title">Info card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </CardBody>
            </Card>
        </div>
        <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
            <Card Color="Color.Dark" IsCenter="true">
                <CardHeader>
                    Header
                </CardHeader>
                <CardBody>
                    <h5 class="card-title">Dark card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </CardBody>
            </Card>
        </div>
    </div>
</DemoBlock>

<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.Shared.Common;
using System.Collections.Generic;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// Card展示组件
/// </summary>
public sealed partial class Cards
{
    /// <summary>
    /// Card属性
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
            new AttributeItem() {
                Name = "CardBody",
                Description = Localizer["CardBody"],
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "CardFooter",
                Description = Localizer["CardFooter"],
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "CardHeader",
                Description = Localizer["CardHeader"],
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Class",
                Description = Localizer["Class"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem{
                Name = "Color",
                Description = Localizer["Color"],
                Type = "Color",
                ValueList = "None / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark",
                DefaultValue = " — "
            },
            new AttributeItem{
                Name = "IsCenter",
                Description = Localizer["IsCenter"],
                Type = "boolean",
                ValueList = "true / false",
                DefaultValue = "false"
            },
    };
}

B 站相关视频链接

暂无

交流群

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