Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Card 卡片

将信息聚合在卡片容器中展示

Card简单示例

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

通过添加 CardHeader 与 CardFooter 元素即可展示相关内容

Demo
Featured
Special title treatment

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

Go somewhere

通过设置,IsCenter=true 使内容居中

Demo
Featured
Special title treatment

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

Go somewhere

通过设置,Color 使border和Body具有相应的颜色

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
Success 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
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"

<h3>Card 卡片</h3>

<h4>将信息聚合在卡片容器中展示</h4>

<Block Title="Card 卡片组件" Introduction="Card简单示例">
    <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>
</Block>

<Block Title="Header 和 Footer" Introduction="通过添加 CardHeader 与 CardFooter 元素即可展示相关内容">
    <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>
</Block>

<Block Title="内容居中" Introduction="通过设置,<code>IsCenter=true</code> 使内容居中">
    <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>
</Block>

<Block Title="带有边框颜色的卡片" Introduction="通过设置,<code>Color</code> 使border和Body具有相应的颜色">
    <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">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.Success" 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.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>
</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.Shared.Common;
using System.Collections.Generic;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// Card展示组件
    /// </summary>
    public sealed partial class Cards
    {
        /// <summary>
        /// Card属性
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            new AttributeItem() {
                Name = "CardBody",
                Description = "获得/设置 CardBody",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "CardFooter",
                Description = "获得/设置 CardFooter",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "CardHeader",
                Description = "获得/设置 CardHeader",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Class",
                Description = "样式",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem{
                Name = "Color",
                Description = "设置卡片边框颜色",
                Type = "Color",
                ValueList = "None / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark",
                DefaultValue = " — "
            },
            new AttributeItem{
                Name = "IsCenter",
                Description = "通过设置,IsCenter=true 使内容居中",
                Type = "boolean",
                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