📌  相关文章
📜  离子卡

📅  最后修改于: 2021-01-03 04:35:41             🧑  作者: Mango

离子卡

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

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

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

离子卡含量

它是的子组件，它添加了一些内容填充。建议为应该添加到离子卡内容元素中的卡添加文本内容。

离子卡头

它是的子组件，用于创建卡的标头。

离子卡字幕

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

离子卡标题

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

例

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


    
      
        Card Example
      
    
  
   
  
    
      
        Training Institute
        JavaTpoint
        
      
          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.

输出量

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

卡图像

您可以在卡中轻松添加应用图像。离子卡将为图像提供恒定的宽度和可变的高度。您还可以轻松地将标题，列表和其他卡组件与图像卡结合在一起。要在您的卡中添加图片，请使用以下标记

例

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


    
      
        Card Example
      
    

   

    

        
          
          
JavaTpoint 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 javatpoint trainingtraining.javatpoint.com

        
    

    

        
          
            Ionic Framework
          
          

            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.

输出量

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

卡中的清单

离子卡还可以包含项目列表。在列表中显示列表内容，则需要添加组件。

例

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

例


    
      
        Card List Example
      
    
  
   
  
    
      
        Explore Nearby Places
      
          
      
        Shopping Mall      
        Hospital        
        Cafe       
        Park        
        Pub        
        Movie Theater

输出量

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