Cards - 图1

Card Vue Component

Cards, along with List View, is a one more great way to contain and orginize your information. Cards contains unique related data, for example, a photo, text, and link all about a single subject. Cards are typically an entry point to more complex and detailed information.

Card Vue component represents Cards component.

Card Components

There are following components included:

  • f7-card
  • f7-card-header
  • f7-card-content
  • f7-card-footer

Card Properties

PropTypeDefaultDescription
<f7-card> properties
titlestringCard header content
contentstringCard content
footerstringCard footer content
paddingbooleantrueAdds additional inner padding on card content
outlinebooleanfalseMakes Card outline
no-shadowbooleanfalseDisables card shadow
no-borderbooleanfalseDisables card border (for outline cards)
expandablebooleanfalseEnables expandable card
expandable-animate-widthbooleanfalseEnables card content width also animatable and responsive, but can affect performance
expandable-openedbooleanfalseBoolean property indicating whether the expandable card opened or not
animatebooleantrueSpecifies to open expandable card with animation or not
hide-navbar-on-openbooleanWill hide Navbar on expandable card open. By default inherits same app card parameter.
hide-toolbar-on-openbooleanWill hide Toolbar on expandable card open. By default inherits same app card parameter.
swipe-to-closebooleanAllows to close expandable card with swipe. By default inherits same app card parameter.
backdropbooleanEnables expandable card backdrop layer. By default inherits same app card parameter.
backdrop-elstringAllows to specify custom expandable card backdrop element. This should be a CSS selector of backdrop element, e.g. .card-backdrop.custom-backdrop
close-by-backdrop-clickbooleanWhen enabled, expandable card will be closed on its backdrop click. By default inherits same app card parameter.
<f7-card-content> properties
paddingbooleantrueAdds additional inner padding

Card Events

EventDescription
<f7-card> events
card:beforeopenEvent will be triggered right before expandable card starts its opening animation. event.detail.prevent contains function that will prevent card from opening when called
card:openEvent will be triggered when expandable card starts its opening animation
card:openedEvent will be triggered after expandable card completes its opening animation
card:closeEvent will be triggered when expandable card starts its closing animation
card:closedEvent will be triggered after expandable card completes its closing animation

Examples

  1. <f7-block-title>Simple Cards</f7-block-title>
  2. <f7-card
  3.   content="This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element."
  4. ></f7-card>
  5. <f7-card
  6.   title="Card header"
  7.   content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
  8.   footer="Card footer"
  9. ></f7-card>
  10. <f7-card
  11.   content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
  12. ></f7-card>
  14. <f7-block-title>Outline Cards</f7-block-title>
  15. <f7-card
  16.   outline
  17.   content="This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element."
  18. ></f7-card>
  19. <f7-card
  20.   outline
  21.   title="Card header"
  22.   content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
  23.   footer="Card footer"
  24. ></f7-card>
  25. <f7-card
  26.   outline
  27.   content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
  28. ></f7-card>
  30. <f7-block-title>Styled Cards</f7-block-title>
  31. <f7-card class="demo-card-header-pic">
  32.   <f7-card-header
  33.     class="no-border"
  34.     valign="bottom"
  35.     style="background-image:url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)"
  36.   >Journey To Mountains</f7-card-header>
  37.   <f7-card-content>
  38.     <p class="date">Posted on January 21, 2015</p>
  39.     <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit...</p>
  40.   </f7-card-content>
  41.   <f7-card-footer>
  42.     <f7-link>Like</f7-link>
  43.     <f7-link>Read more</f7-link>
  44.   </f7-card-footer>
  45. </f7-card>
  46. <f7-card class="demo-card-header-pic">
  47.   <f7-card-header
  48.     class="no-border"
  49.     valign="bottom"
  50.     style="background-image:url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)"
  51.   >Journey To Mountains</f7-card-header>
  52.   <f7-card-content>
  53.     <p class="date">Posted on January 21, 2015</p>
  54.     <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit...</p>
  55.   </f7-card-content>
  56.   <f7-card-footer>
  57.     <f7-link>Like</f7-link>
  58.     <f7-link>Read more</f7-link>
  59.   </f7-card-footer>
  60. </f7-card>
  62. <f7-block-title>Facebook Cards</f7-block-title>
  63. <f7-card class="demo-facebook-card">
  64.   <f7-card-header class="no-border">
  65.     <div class="demo-facebook-avatar"><img src="https://cdn.framework7.io/placeholder/people-68x68-1.jpg" width="34" height="34"/></div>
  66.     <div class="demo-facebook-name">John Doe</div>
  67.     <div class="demo-facebook-date">Monday at 3:47 PM</div>
  68.   </f7-card-header>
  69.   <f7-card-content :padding="false">
  70.     <img src="https://cdn.framework7.io/placeholder/nature-1000x700-8.jpg" width="100%"/>
  71.   </f7-card-content>
  72.   <f7-card-footer class="no-border">
  73.     <f7-link>Like</f7-link>
  74.     <f7-link>Comment</f7-link>
  75.     <f7-link>Share</f7-link>
  76.   </f7-card-footer>
  77. </f7-card>
  78. <f7-card class="demo-facebook-card">
  79.   <f7-card-header class="no-border">
  80.     <div class="demo-facebook-avatar"><img src="https://cdn.framework7.io/placeholder/people-68x68-1.jpg" width="34" height="34"/></div>
  81.     <div class="demo-facebook-name">John Doe</div>
  82.     <div class="demo-facebook-date">Monday at 2:15 PM</div>
  83.   </f7-card-header>
  84.   <f7-card-content>
  85.     <p>What a nice photo i took yesterday!</p><img src="https://cdn.framework7.io/placeholder/nature-1000x700-8.jpg" width="100%"/>
  86.     <p class="likes">Likes: 112 &nbsp;&nbsp; Comments: 43</p>
  87.   </f7-card-content>
  88.   <f7-card-footer class="no-border">
  89.     <f7-link>Like</f7-link>
  90.     <f7-link>Comment</f7-link>
  91.     <f7-link>Share</f7-link>
  92.   </f7-card-footer>
  93. </f7-card>
  95. <f7-block-title>Cards With List View</f7-block-title>
  96. <f7-card>
  97.   <f7-card-content :padding="false">
  98.     <f7-list>
  99.       <f7-list-item link="#">Link 1</f7-list-item>
  100.       <f7-list-item link="#">Link 2</f7-list-item>
  101.       <f7-list-item link="#">Link 3</f7-list-item>
  102.       <f7-list-item link="#">Link 4</f7-list-item>
  103.       <f7-list-item link="#">Link 5</f7-list-item>
  104.     </f7-list>
  105.   </f7-card-content>
  106. </f7-card>
  107. <f7-card title="New Releases:">
  108.   <f7-card-content :padding="false">
  109.     <f7-list medial-list>
  110.       <f7-list-item
  111.         title="Yellow Submarine"
  112.         subtitle="Beatles"
  113.       >
  114.         <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg" width="44"/>
  115.       </f7-list-item>
  116.       <f7-list-item
  117.         title="Don't Stop Me Now"
  118.         subtitle="Queen"
  119.       >
  120.         <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg" width="44"/>
  121.       </f7-list-item>
  122.       <f7-list-item
  123.         title="Billie Jean"
  124.         subtitle="Michael Jackson"
  125.       >
  126.         <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg" width="44"/>
  127.       </f7-list-item>
  128.     </f7-list>
  129.   </f7-card-content>
  130.   <f7-card-footer>
  131.     <span>January 20, 2015</span>
  132.     <span>5 comments</span>
  133.   </f7-card-footer>
  134. </f7-card>
  136. <f7-block-title>Expandable Cards</f7-block-title>
  137. <f7-card expandable>
  138.   <f7-card-content :padding="false">
  139.     <div class="bg-color-red" :style="{height: '300px'}">
  140.       <f7-card-header text-color="white" class="display-block">
  141.         Framework7
  142.         <br />
  143.         <small :style="{opacity: 0.7}">Build Mobile Apps</small>
  144.       </f7-card-header>
  145.       <f7-link card-close color="white" class="card-opened-fade-in" :style="{position: 'absolute', right: '15px', top: '15px'}" icon-f7="multiply_circle_fill"></f7-link>
  146.     </div>
  147.     <div class="card-content-padding">
  148.       <p>Framework7 - is a free and open source HTML mobile framework to develop hybrid mobile apps or web apps with iOS or Android (Material) native look and feel...</p>
  149.     </div>
  150.   </f7-card-content>
  151. </f7-card>
  153. <f7-card expandable>
  154.   <f7-card-content :padding="false">
  155.     <div class="bg-color-yellow" :style="{height: '300px'}">
  156.       <f7-card-header text-color="black" class="display-block">
  157.         Framework7
  158.         <br/>
  159.         <small :style="{opacity: 0.7}">Build Mobile Apps</small>
  160.       </f7-card-header>
  161.       <f7-link card-close color="black" class="card-opened-fade-in" :style="{position: 'absolute', right: '15px', top: '15px'}" icon-f7="multiply_circle_fill"></f7-link>
  162.     </div>
  163.     <div class="card-content-padding">
  164.       <p>Framework7 - is a free and open source HTML mobile framework to develop hybrid mobile apps or web apps with iOS or Android (Material) native look and feel...</p>
  165.     </div>
  166.   </f7-card-content>
  167. </f7-card>

← Button

Checkbox →