我的书签
添加书签
移除书签
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
| Prop | Type | Default | Description |
|---|---|---|---|
| <f7-card> properties | |||
| --- | --- | --- | --- |
| title | string | Card header content | |
| content | string | Card content | |
| footer | string | Card footer content | |
| padding | boolean | true | Adds additional inner padding on card content |
| outline | boolean | false | Makes Card outline |
| no-shadow | boolean | false | Disables card shadow |
| no-border | boolean | false | Disables card border (for outline cards) |
| expandable | boolean | false | Enables expandable card |
| expandable-animate-width | boolean | false | Enables card content width also animatable and responsive, but can affect performance |
| expandable-opened | boolean | false | Boolean property indicating whether the expandable card opened or not |
| animate | boolean | true | Specifies to open expandable card with animation or not |
| hide-navbar-on-open | boolean | Will hide Navbar on expandable card open. By default inherits same app card parameter. | |
| hide-toolbar-on-open | boolean | Will hide Toolbar on expandable card open. By default inherits same app card parameter. | |
| swipe-to-close | boolean | Allows to close expandable card with swipe. By default inherits same app card parameter. | |
| backdrop | boolean | Enables expandable card backdrop layer. By default inherits same app card parameter. | |
| backdrop-el | string | Allows 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-click | boolean | When enabled, expandable card will be closed on its backdrop click. By default inherits same app card parameter. | |
| <f7-card-content> properties | |||
| padding | boolean | true | Adds additional inner padding |
Card Events
| Event | Description |
|---|---|
| <f7-card> events | |
| --- | --- |
| card:beforeopen | Event 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:open | Event will be triggered when expandable card starts its opening animation |
| card:opened | Event will be triggered after expandable card completes its opening animation |
| card:close | Event will be triggered when expandable card starts its closing animation |
| card:closed | Event 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 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="close_round_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="close_round_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>
