📜  Framework7卡

📅  最后修改于: 2021-01-02 05:53:21             🧑  作者: Mango

Framework7卡

Framework7卡用于包含单个主题的组织信息,例如照片,链接和文本。

卡主要与列表视图一起使用,以包含和组织您的信息。

有7种类型的framework7卡:

  • 卡片HTML布局:基本的卡片HTML布局使用卡片类来安排其项目。
  • 带卡的列表视图:通过将卡列表类添加到
    ,可以将卡用作列表视图元素。

卡片HTML布局

基本的卡片HTML布局:

Header
Card content

这里:

卡片容器

  • 卡标题。主要用于显示卡标题。可选的。
  • 卡片页脚用于一些其他信息或自定义操作/链接。可选的。
  • 卡片内容的主要容器。需要。
  • =

附加的内部包装器。用于为卡片内容添加其他填充。可选的。

卡的HTML布局包含几个类:

Index Class Description
1) cards It is the card container.
2) card-header It is the optional card header that is used to display card title.
3) card-footer It is optional and used for specifying additional information or custom links.
4) card-content It is the main container for content of the card and is required.
5) card-content-inner It is the optional additional inner wrapper that is used for additional padding to content.

注意:卡片页眉和卡片页脚都具有flexbox布局,其中项目具有中心垂直对齐。如果要将项目排序到页眉/页脚的顶部或底部,可以使用valign属性。

卡片HTML布局示例



   
      
      
      
      Card HTML Layout
      
      
      
   

   
      
      
      

卡片列表视图

通过将cards-list类添加到

,可以将卡用作列表视图元素。



   
      
      
      
      List View With Cards