Blazor 组件库 BootstrapBlazor 中Card组件介绍


一个较为完整的Card样子

card.png

Card组件介绍

Card组件分为三部分,CardHeader、CardBody、CardFooter。

代码格式如下:

<Card>
    <CardHeader>
        Featured
    </CardHeader>
    <CardBody>
        <h5>Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a class="btn btn-primary">Go somewhere</a>
    </CardBody>
    <CardFooter>
        2 days ago
    </CardFooter>
</Card>

其中CardBody为必须有的部分,即使不写,也会有一个空的。CardHeader和CardFooter如果不想要,则可以不写。一个最小的Card组件代码可以是这样的

<Card>
    <CardBody>
        <h5>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 class="btn btn-primary">Go somewhere</a>
    </CardBody>
</Card>

Card的其他属性

IsCenter:卡片中内容居中,设置后即为上图的效果。

Color:设置卡片边框颜色,可选颜色有 None / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark

cardcolor.png

IsCollapsible:是否允许伸缩。这里需要注意的是如果设置了true则<CardHeader>的Template会失效,只能使用Text来设置文本的卡片头。

cardcollapsible.png

IsShadow:是否有阴影,设置后卡片会带有阴影效果。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM