Card卡片

  • 形状为矩形。
  • 可包含多种类型的元素,eg:图片、文字、按钮等。

通栏

  1. @Component({
  2. selector: 'demo-card-full',
  3. <Card [full]="true">
  4. <CardHeader [title]="'This is title'"
  5. [thumb]="'https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg'"
  6. [thumbStyle]="thumbStyle"
  7. [extra]="extra"
  8. >
  9. <span>this is extra</span>
  10. </ng-template>
  11. </CardHeader>
  12. <CardBody>
  13. <div>This is content of Card</div>
  14. </CardBody>
  15. <ng-template #footerExtra>
  16. <div>extra footer content</div>
  17. </ng-template>
  18. </Card>
  19. `
  20. })
  21. export class DemoCardFullComponent {
  22. thumbStyle = {
  23. width: '32px',
  24. height: '32px'
  25. };
  26. }

API