ng-ytl-zorro-antd/src/showcase/nz-demo-card/nz-demo-card.html

An enterprise-class UI components based on Ant Design and Angular

<article>
  <section class="markdown"><h1>Card 卡片</h1>
    <section class="markdown"><p>通用卡片容器。</p>
      <h2 id="何时使用"><span>何时使用</span>
        <a  class="anchor">#</a>
      </h2>
      <p>最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。</p>
    </section>
    <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
  </section>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="24">
      <nz-code-box [nzTitle]="'典型卡片'" id="components-card-demo-basic" [nzCode]="NzDemoCardBasicCode">
        <nz-demo-card-basic demo></nz-demo-card-basic>
        <div intro>
          <p>包含标题、内容、操作区域。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'无边框'" id="components-card-demo-border" [nzCode]="NzDemoCardBorderCode">
        <nz-demo-card-border demo></nz-demo-card-border>
        <div intro>
          <p>在灰色背景上使用无边框的卡片。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'简洁卡片'" id="components-card-demo-simple" [nzCode]="NzDemoCardSimpleCode">
        <nz-demo-card-simple demo></nz-demo-card-simple>
        <div intro>
          <p>只包含内容区域。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'更灵活的内容展示'" id="components-card-demo-flex" [nzCode]="NzDemoCardFlexCode">
        <nz-demo-card-flex demo></nz-demo-card-flex>
        <div intro>
          <p>可以调整默认边距，设定宽度。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'栅格卡片'" id="components-card-demo-grid" [nzCode]="NzDemoCardGridCode">
        <nz-demo-card-grid demo></nz-demo-card-grid>
        <div intro>
          <p>在系统概览页面常常和栅格进行配合。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'预加载的卡片'" id="components-card-demo-loading" [nzCode]="NzDemoCardLoadingCode">
        <nz-demo-card-loading demo></nz-demo-card-loading>
        <div intro>
          <p>数据读入前会有文本块样式。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'网格型内嵌卡片'" id="components-card-demo-inner" [nzCode]="NzDemoCardInnerCode">
        <nz-demo-card-inner demo></nz-demo-card-inner>
        <div intro>
          <p>一种常见的卡片内容区隔模式。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <section class="markdown api-container">
    <h2 id="API"><span>API</span>
      <!-- <a class="anchor">#</a> -->
    </h2>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzBordered</td>
          <td>是否有边框</td>
          <td>Boolean</td>
          <td>true</td>
        </tr>
        <tr>
          <td>nzNoHovering</td>
          <td>取消鼠标移过浮起	</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzLoading</td>
          <td>是否显示加载状态</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>#title</td>
          <td>卡片标题标识</td>
          <td>ng-template</td>
          <td></td>
        </tr>
        <tr>
          <td>#extra</td>
          <td>卡片右上角的操作区域</td>
          <td>ng-template</td>
          <td></td>
        </tr>
        <tr>
          <td>#body</td>
          <td>卡片内容区域</td>
          <td>ng-template</td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </section>
</article>