卡片

简介

abp-card是基于Bootstrap卡片元素衍生的内容容器。

基本用法：

<abp-card style="width: 18rem;">
  <img src="https://files.koudingke.cn/docs/abp-docs/zh-Hans/framework/ui/mvc-razor-pages/tag-helpers/~/imgs/demo/300x200.png"/>
  <abp-card-body>
    <abp-card-title>卡片标题</abp-card-title>
    <abp-card-text>一些示例文本，用于构建卡片标题并构成卡片内容的主体。</abp-card-text>
    [前往某处](/docs/zh-Hans/abp-docs/latest/framework/ui/mvc-razor-pages/tag-helpers/#)
  </abp-card-body>
</abp-card>

使用标题、文本和链接

在主要abp-card标签下可使用以下标签：

• abp-card-title
• abp-card-subtitle
• a abp-card-link

示例：

<abp-card style="width: 18rem;">
    <abp-card-body>
       <abp-card-title>卡片标题</abp-card-title>
       <abp-card-subtitle class="mb-2 text-muted">卡片副标题</abp-card-subtitle>
       <abp-card-text>一些示例文本，用于构建卡片标题并构成卡片内容的主体。</abp-card-text>
       [卡片链接](/docs/zh-Hans/abp-docs/latest/framework/ui/mvc-razor-pages/tag-helpers/#)
       [另一个链接](/docs/zh-Hans/abp-docs/latest/framework/ui/mvc-razor-pages/tag-helpers/#)
    </abp-card-body>
</abp-card>

使用列表组

• abp-list-group flush="true"：flush属性会渲染为Bootstrap的list-group-flush类，用于移除边框和圆角，使列表组项在父容器中边到边显示。
• abp-list-group-item

综合示例：

<abp-card style="width: 18rem;">
    <img src="https://files.koudingke.cn/docs/abp-docs/zh-Hans/framework/ui/mvc-razor-pages/tag-helpers/~/imgs/demo/300x200.png"/>
    <abp-card-body>
       <abp-card-title>卡片标题</abp-card-title>
       <abp-card-text>一些示例文本，用于构建卡片标题并构成卡片内容的主体。</abp-card-text>
    </abp-card-body>
    <abp-list-group flush="true">
       <abp-list-group-item>Cras justo odio</abp-list-group-item>
       <abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item>
       <abp-list-group-item>Vestibulum at eros</abp-list-group-item>
    </abp-list-group>
    <abp-card-body>
       [卡片链接](/docs/zh-Hans/abp-docs/latest/framework/ui/mvc-razor-pages/tag-helpers/#)
       [另一个链接](/docs/zh-Hans/abp-docs/latest/framework/ui/mvc-razor-pages/tag-helpers/#)
    </abp-card-body>
</abp-card>

使用页眉、页脚和引用块

• abp-card-header
• abp-card-footer
• abp-blockquote

示例：

<abp-card style="width: 18rem;">
    <abp-card-header>特色内容</abp-card-header>
    <abp-card-body>
       <abp-card-title>特殊标题处理</abp-card-title>
       <abp-card-text>附带支持文本，自然地引导至附加内容。</abp-card-text>
       [前往某处](/docs/zh-Hans/abp-docs/latest/framework/ui/mvc-razor-pages/tag-helpers/#)
    </abp-card-body>
</abp-card>

引用示例：

<abp-card>
    <abp-card-header>引用</abp-card-header>
    <abp-card-body>
<abp-blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <footer>来源标题中的某位名人</footer>
</abp-blockquote>
    </abp-card-body>
</abp-card>

页脚示例：

<abp-card class="text-center">
    <abp-card-header>特色内容</abp-card-header>
    <abp-card-body>
        <abp-blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer>来源标题中的某位名人</footer>
        </abp-blockquote>
    </abp-card-body>
    <abp-card-footer class="text-muted">2天前</abp-card-footer>
</abp-card>

演示

查看卡片演示页面以查看实际效果。

abp-card 属性

• background： 指定卡片背景颜色的值。
• text-color： 指定卡片内文本颜色的值。
• border： 指定卡片边框颜色的值。

应为以下值之一：

• Default（默认值）
• Primary
• Secondary
• Success
• Danger
• Warning
• Info
• Light
• Dark

示例：

<abp-card background="Success" text-color="Danger" border="Dark">

尺寸调整

卡片默认宽度为100%，可通过自定义CSS、网格类、网格Sass混合或实用工具进行更改。

<abp-card style="width: 18rem;">

卡片组和卡片列

abp-card也可在card-deck或card-columns内部使用。

<div class="card-deck">
    <abp-card background="Primary">
        <abp-card-header>第一组</abp-card-header>
        <abp-card-body>
            <abp-card-title>Ace</abp-card-title>
            <abp-card-text>这是Ace的内容。</abp-card-text>
        </abp-card-body>
    </abp-card>
    <abp-card background="Info">
        <abp-card-header>第二组</abp-card-header>
        <abp-card-body>
            <abp-card-title>Beta</abp-card-title>
            <abp-card-text>Beta的内容。</abp-card-text>
        </abp-card-body>
    </abp-card>
    <abp-card background="Warning">
        <abp-card-header>第三组</abp-card-header>
        <abp-card-body>
            <abp-card-title>Epsilon</abp-card-title>
            <abp-card-text>Epsilon的内容。</abp-card-text>
        </abp-card-body>
    </abp-card>
</div>