卡片

介绍

abp-card 是从bootstrap card元素派生的内容容器.

基本用法:

  1. <abp-card style="width: 18rem;">
  2.   <img abp-card-image="Top" src="~/imgs/demo/300x200.png"/>
  3.   <abp-card-body>
  4.     <abp-card-title>Card Title</abp-card-title>
  5.     <abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
  6.     [ Go somewhere](/zh-Hans/abp/latest/UI/AspNetCore/Tag-Helpers/#)
  7.   </abp-card-body>
  8. </abp-card>
使用标题,文本和链接:

abp-card 可以使用以下标签

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

示例:

  1. <abp-card style="width: 18rem;">
  2.     <abp-card-body>
  3.        <abp-card-title>Card title</abp-card-title>
  4.        <abp-card-subtitle class="mb-2 text-muted">Card subtitle</abp-card-subtitle>
  5.        <abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
  6.        [Card link](/zh-Hans/abp/latest/UI/AspNetCore/Tag-Helpers/#)
  7.        [Another link](/zh-Hans/abp/latest/UI/AspNetCore/Tag-Helpers/#)
  8.     </abp-card-body>
  9. </abp-card>
使用列表组:
  • abp-list-group flush="true" : flush 属性渲染到 bootstrap list-group-flush 的 calss 中,该类用于删除边界和圆角以使列表组项在父容器中并排显示.
  • abp-list-group-item

示例:

  1. <abp-card style="width: 18rem;">
  2.     <img abp-card-image="Top" src="~/imgs/demo/300x200.png" />
  3.     <abp-card-body>
  4.        <abp-card-title>Card Title</abp-card-title>
  5.        <abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
  6.     </abp-card-body>
  7.     <abp-list-group flush="true">
  8.        <abp-list-group-item>Cras justo odio</abp-list-group-item>
  9.        <abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item>
  10.        <abp-list-group-item>Vestibulum at eros</abp-list-group-item>
  11.     </abp-list-group>
  12.     <abp-card-body>
  13.        [Card link](/zh-Hans/abp/latest/UI/AspNetCore/Tag-Helpers/#)
  14.        [Another link](/zh-Hans/abp/latest/UI/AspNetCore/Tag-Helpers/#)
  15.     </abp-card-body>
  16. </abp-card>
使用页眉,页脚和块引用:
  • abp-card-header
  • abp-card-footer
  • abp-blockquote

示例:

  1. <abp-card style="width: 18rem;">
  2.     <abp-card-header>Featured</abp-card-header>
  3.     <abp-card-body>
  4.        <abp-card-title> Special title treatment</abp-card-title>
  5.        <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
  6.        [ Go somewhere](/zh-Hans/abp/latest/UI/AspNetCore/Tag-Helpers/#)
  7.     </abp-card-body>
  8. </abp-card>

引用示例:

  1. <abp-card>
  2.     <abp-card-header>Quote</abp-card-header>
  3.     <abp-card-body>
  4. <abp-blockquote>
  5.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  6.     <footer>Someone famous in Source Title</footer>
  7. </abp-blockquote>
  8.     </abp-card-body>
  9. </abp-card>

页脚示例:

  1. <abp-card class="text-center">
  2.     <abp-card-header>Featured</abp-card-header>
  3.     <abp-card-body>
  4.         <abp-blockquote>
  5.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  6.             <footer>Someone famous in Source Title</footer>
  7.         </abp-blockquote>
  8.     </abp-card-body>
  9.     <abp-card-footer class="text-muted"> 2 days ago</abp-card-footer>
  10. </abp-card>

Demo

参阅卡片demo页面查看示例.

abp-card Attributes

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

应为以下值之一:

  • Default (默认值)
  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Light
  • Dark

示例:

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

sizing

卡片的默认值为100%,可以使用自定义CSS,栅格类,栅格Sass mixins或utilities进行更改.

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

card-deck 和 card-columns

abp-card 可以在 card-deck 或 card-columns 里使用.

  1. <div class="card-deck">
  2.     <abp-card background="Primary">
  3.         <abp-card-header>First Deck</abp-card-header>
  4.         <abp-card-body>
  5.             <abp-card-title> Ace </abp-card-title>
  6.             <abp-card-text>Here is the content for Ace.</abp-card-text>
  7.         </abp-card-body>
  8.     </abp-card>
  9.     <abp-card background="Info">
  10.         <abp-card-header>Second Deck</abp-card-header>
  11.         <abp-card-body>
  12.             <abp-card-title> Beta </abp-card-title>
  13.             <abp-card-text>Beta content.</abp-card-text>
  14.         </abp-card-body>
  15.     </abp-card>
  16.     <abp-card background="Warning">
  17.         <abp-card-header>Third Deck</abp-card-header>
  18.         <abp-card-body>
  19.             <abp-card-title> Epsilon </abp-card-title>
  20.             <abp-card-text>Content for Epsilon.</abp-card-text>
  21.         </abp-card-body>
  22.     </abp-card>
  23. </div>