Ionic卡片 _Ionic卡片

本文概述

卡图像
卡中的清单

卡是显示标准UI内容的好方法, 这些内容可以用作更详细信息的入口。它们是显示易于使用的信息的最佳元素。如果需要一次显示更多内容, 并且通常需要一个小屏幕, 那么选择卡片就成为许多公司（例如Google, Twitter, Spotify等）的流行设计模式。
对于移动体验, Ionic卡可轻松在许多不同的屏幕尺寸上显示相同的信息。它们很灵活, 可以控制更多, 还可以设置动画。卡可以是单个组件, 通常可以分解为其他几个子组件。这些子组件是标题, 标题, 字幕和内容。我们可以使用标准的< ion-card> < / ion-card> 元素来访问卡片。
让我们详细查看卡片的子组件：
Ionic卡含量
它是< ion-card> 的子组件, 它添加了一些内容填充。建议为应该添加到Ionic卡内容元素中的卡添加文本内容。
Ionic卡头
它是< ion-card> 的子组件, 用于创建卡的标头。
Ionic卡字幕
它是卡的子组件, 可为卡添加字幕。它以应用程序内的大写形式显示。
【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 =http://www.srcmini.com/“ 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="http://www.srcmini.com/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.srcmini.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>

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