Ionic卡片

本文概述

• 卡图像
• 卡中的清单

卡是显示标准UI内容的好方法, 这些内容可以用作更详细信息的入口。它们是显示易于使用的信息的最佳元素。如果需要一次显示更多内容, 并且通常需要一个小屏幕, 那么选择卡片就成为许多公司（例如Google, Twitter, Spotify等）的流行设计模式。

对于移动体验, Ionic卡可轻松在许多不同的屏幕尺寸上显示相同的信息。它们很灵活, 可以控制更多, 还可以设置动画。卡可以是单个组件, 通常可以分解为其他几个子组件。这些子组件是标题, 标题, 字幕和内容。我们可以使用标准的<ion-card> </ ion-card>元素来访问卡片。

让我们详细查看卡片的子组件：

Ionic卡含量

它是<ion-card>的子组件, 它添加了一些内容填充。建议为应该添加到Ionic卡内容元素中的卡添加文本内容。

Ionic卡头

它是<ion-card>的子组件, 用于创建卡的标头。

Ionic卡字幕

它是卡的子组件, 可为卡添加字幕。它以应用程序内的大写形式显示。

Ionic卡标题

它是纸牌的子组件, 可为纸牌添加标题。

例

以下示例有助于了解Ionic卡及其子组件的工作方式。

<ion-header>
    <ion-toolbar>
      <ion-title>
        Card Example
      </ion-title>
    </ion-toolbar>
  </ion-header>
   
  <ion-content>
    <ion-card>
      <ion-card-header>
        <ion-card-subtitle>Training Institute</ion-card-subtitle>
        <ion-card-title>srcmini</ion-card-title>
        </ion-card-header>
      <ion-card-content>
          Ionic framework is an open-source UI toolkit for building performant, high-quality mobile apps, desktop apps, and progressive web apps using web technologies such as HTML, CSS, and JavaScript.
      </ion-card-content>
    </ion-card>
  </ion-content>

输出量

在终端中执行该应用程序时, 将获得以下输出。

卡图像

你可以在卡中轻松添加应用图像。Ionic卡将为图像提供恒定的宽度和可变的高度。你还可以轻松地将标题, 列表和其他卡组件与图像卡结合在一起。要在你的卡中添加图片, 请使用以下标记<img src =“ assets / jtp_logo.png” />

例

下面的示例有助于了解Ionic卡如何处理图像。

<ion-header>
    <ion-toolbar>
      <ion-title>
        Card Example
      </ion-title>
    </ion-toolbar>
</ion-header>
   
<ion-content>
    <div>
        <ion-card color="light">
          <img src="assets/jtp_logo.png"/>
          <p>srcmini offers Corporate Training, Summer Training, Online Training and Winter Training on Java, Angular, React, PHP, Spark, Python, Oracle, Web Designing, C++ and many more technologies. For more visit srcmini trainingtraining.srcmini02.com</p>
        </ion-card>
    </div>
    <div>
        <ion-card color="light">
          <ion-card-header>
            <ion-card-title>Ionic Framework</ion-card-title>
          </ion-card-header>
          <P>
            Ionic framework is an open-source UI toolkit for building performant, high-quality mobile apps, desktop apps, and progressive web apps using web technologies such as HTML, CSS, and JavaScript.
          </P>
        </ion-card>
    </div>
</ion-content>

输出量

在终端中执行该应用程序时, 将获得以下输出。

卡中的清单

Ionic卡还可以包含项目列表。要在内容内部显示列表, 你需要添加<ion-list>组件。

例

以下示例有助于理解列表如何与Ionic卡组件一起使用。

例

<ion-header>
    <ion-toolbar>
      <ion-title>
        Card List Example
      </ion-title>
    </ion-toolbar>
  </ion-header>
   
  <ion-content>
    <ion-card>
      <ion-card-header>
        Explore Nearby Places
      </ion-card-header>
          
      <ion-list>
        <ion-item>Shopping Mall</ion-item>      
        <ion-item>Hospital</ion-item>        
        <ion-item>Cafe</ion-item>       
        <ion-item>Park</ion-item>        
        <ion-item>Pub</ion-item>        
        <ion-item>Movie Theater</ion-item>       
      </ion-list>
    </ion-card>
  </ion-content>

输出量

在终端中执行该应用程序时, 将获得以下输出。