Blazor 組件庫 BootstrapBlazor 中Card組件介紹

一個較為完整的Card樣子

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

IsCollapsible：是否允許伸縮。這里需要注意的是如果設置了true則<CardHeader>的Template會失效，只能使用Text來設置文本的卡片頭。

IsShadow：是否有陰影，設置后卡片會帶有陰影效果。