我的书签
添加书签
移除书签
List Index Vue Component
List Index Vue component represents List Index component.
List Index Components
There are following components included:
**f7-list-index**
List Index Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| <f7-list-index> properties | |||
| --- | --- | --- | --- |
| init | boolean | true | Initializes List Index |
| list-el | object string | Related List View element. HTMLElement or string with CSS selector of List View element | |
| indexes | array string | auto | Array with indexes. If not passed then it will automatically generate it based on item-divider and list-group-title elements inside of passed List View element in listEl parameter |
| scroll-list | boolean | true | Will automatically scroll related List View to the selected index |
| label | boolean | false | Enables label bubble with selected index when you swipe over list index |
| ios-item-height | number | 14 | Single index item height. It is required to calculate dynamic index and how many indexes fit on the screen. For iOS theme |
| md-item-height | number | 14 | Single index item height. It is required to calculate dynamic index and how many indexes fit on the screen. For MD theme |
| aurora-item-height | number | 14 | Single index item height. It is required to calculate dynamic index and how many indexes fit on the screen. For Aurora theme |
List Index Events
| Event | Arguments | Description |
|---|---|---|
| <f7-list-index> events | ||
| --- | --- | --- |
| listindex:select | (itemContent) | Event will be triggered on index select rather by click or swiping. As an argument event handler receives selected index item content |
List Index Methods
| Event | Description |
|---|---|
| <f7-list-index> methods | |
| --- | --- |
| .update() | Recalculates indexes, sizes and rerenders list index |
| .scrollListToIndex(itemContent) | Scrolls related list to specified index content |
Examples
1. <template>
2. <f7-page>
3. <f7-navbar title="List Index"></f7-navbar>
5. <f7-list-index
6. indexes="auto"
7. list-el=".list.contacts-list"
8. :scroll-list="true"
9. :label="true"
10. @listindex:select="onIndexSelect"
11. ></f7-list-index>
13. <f7-list contacts-list>
14. <f7-list-group>
15. <f7-list-item title="A" group-title></f7-list-item>
16. <f7-list-item title="Aaron"></f7-list-item>
17. <f7-list-item title="Adam"></f7-list-item>
18. <f7-list-item title="Aiden"></f7-list-item>
19. <f7-list-item title="Albert"></f7-list-item>
20. <f7-list-item title="Alex"></f7-list-item>
21. <f7-list-item title="Alexander"></f7-list-item>
22. <f7-list-item title="Alfie"></f7-list-item>
23. <f7-list-item title="Archie"></f7-list-item>
24. <f7-list-item title="Arthur"></f7-list-item>
25. <f7-list-item title="Austin"></f7-list-item>
26. </f7-list-group>
27. <f7-list-group>
28. <f7-list-item title="B" group-title></f7-list-item>
29. <f7-list-item title="Benjamin"></f7-list-item>
30. <f7-list-item title="Blake"></f7-list-item>
31. <f7-list-item title="Bobby"></f7-list-item>
32. </f7-list-group>
33. <f7-list-group>
34. <f7-list-item title="C" group-title></f7-list-item>
35. <f7-list-item title="Caleb"></f7-list-item>
36. <f7-list-item title="Callum"></f7-list-item>
37. <f7-list-item title="Cameron"></f7-list-item>
38. <f7-list-item title="Charles"></f7-list-item>
39. <f7-list-item title="Charlie"></f7-list-item>
40. <f7-list-item title="Connor"></f7-list-item>
41. </f7-list-group>
42. <f7-list-group>
43. <f7-list-item title="D" group-title></f7-list-item>
44. <f7-list-item title="Daniel"></f7-list-item>
45. <f7-list-item title="David"></f7-list-item>
46. <f7-list-item title="Dexter"></f7-list-item>
47. <f7-list-item title="Dylan"></f7-list-item>
48. </f7-list-group>
49. <f7-list-group>
50. <f7-list-item title="E" group-title></f7-list-item>
51. <f7-list-item title="Edward"></f7-list-item>
52. <f7-list-item title="Elijah"></f7-list-item>
53. <f7-list-item title="Elliot"></f7-list-item>
54. <f7-list-item title="Elliott"></f7-list-item>
55. <f7-list-item title="Ethan"></f7-list-item>
56. <f7-list-item title="Evan"></f7-list-item>
57. </f7-list-group>
58. <f7-list-group>
59. <f7-list-item title="F" group-title></f7-list-item>
60. <f7-list-item title="Felix"></f7-list-item>
61. <f7-list-item title="Finlay"></f7-list-item>
62. <f7-list-item title="Finley"></f7-list-item>
63. <f7-list-item title="Frankie"></f7-list-item>
64. <f7-list-item title="Freddie"></f7-list-item>
65. <f7-list-item title="Frederick"></f7-list-item>
66. </f7-list-group>
67. <f7-list-group>
68. <f7-list-item title="G" group-title></f7-list-item>
69. <f7-list-item title="Gabriel"></f7-list-item>
70. <f7-list-item title="George"></f7-list-item>
71. </f7-list-group>
72. <f7-list-group>
73. <f7-list-item title="H" group-title></f7-list-item>
74. <f7-list-item title="Harley"></f7-list-item>
75. <f7-list-item title="Harrison"></f7-list-item>
76. <f7-list-item title="Harry"></f7-list-item>
77. <f7-list-item title="Harvey"></f7-list-item>
78. <f7-list-item title="Henry"></f7-list-item>
79. <f7-list-item title="Hugo"></f7-list-item>
80. </f7-list-group>
81. <f7-list-group>
82. <f7-list-item title="I" group-title></f7-list-item>
83. <f7-list-item title="Ibrahim"></f7-list-item>
84. <f7-list-item title="Isaac"></f7-list-item>
85. </f7-list-group>
86. <f7-list-group>
87. <f7-list-item title="J" group-title></f7-list-item>
88. <f7-list-item title="Jack"></f7-list-item>
89. <f7-list-item title="Jacob"></f7-list-item>
90. <f7-list-item title="Jake"></f7-list-item>
91. <f7-list-item title="James"></f7-list-item>
92. <f7-list-item title="Jamie"></f7-list-item>
93. <f7-list-item title="Jayden"></f7-list-item>
94. <f7-list-item title="Jenson"></f7-list-item>
95. <f7-list-item title="Joseph"></f7-list-item>
96. <f7-list-item title="Joshua"></f7-list-item>
97. <f7-list-item title="Jude"></f7-list-item>
98. </f7-list-group>
99. <f7-list-group>
100. <f7-list-item title="K" group-title></f7-list-item>
101. <f7-list-item title="Kai"></f7-list-item>
102. <f7-list-item title="Kian"></f7-list-item>
103. </f7-list-group>
104. <f7-list-group>
105. <f7-list-item title="L" group-title></f7-list-item>
106. <f7-list-item title="Leo"></f7-list-item>
107. <f7-list-item title="Leon"></f7-list-item>
108. <f7-list-item title="Lewis"></f7-list-item>
109. <f7-list-item title="Liam"></f7-list-item>
110. <f7-list-item title="Logan"></f7-list-item>
111. <f7-list-item title="Louie"></f7-list-item>
112. <f7-list-item title="Louis"></f7-list-item>
113. <f7-list-item title="Luca"></f7-list-item>
114. <f7-list-item title="Lucas"></f7-list-item>
115. <f7-list-item title="Luke"></f7-list-item>
116. </f7-list-group>
117. <f7-list-group>
118. <f7-list-item title="M" group-title></f7-list-item>
119. <f7-list-item title="Mason"></f7-list-item>
120. <f7-list-item title="Matthew"></f7-list-item>
121. <f7-list-item title="Max"></f7-list-item>
122. <f7-list-item title="Michael"></f7-list-item>
123. <f7-list-item title="Mohammad"></f7-list-item>
124. <f7-list-item title="Mohammed"></f7-list-item>
125. <f7-list-item title="Muhammad"></f7-list-item>
126. </f7-list-group>
127. <f7-list-group>
128. <f7-list-item title="N" group-title></f7-list-item>
129. <f7-list-item title="Nathan"></f7-list-item>
130. <f7-list-item title="Noah"></f7-list-item>
131. </f7-list-group>
132. <f7-list-group>
133. <f7-list-item title="O" group-title></f7-list-item>
134. <f7-list-item title="Oliver"></f7-list-item>
135. <f7-list-item title="Ollie"></f7-list-item>
136. <f7-list-item title="Oscar"></f7-list-item>
137. <f7-list-item title="Owen"></f7-list-item>
138. </f7-list-group>
139. <f7-list-group>
140. <f7-list-item title="R" group-title></f7-list-item>
141. <f7-list-item title="Reuben"></f7-list-item>
142. <f7-list-item title="Riley"></f7-list-item>
143. <f7-list-item title="Robert"></f7-list-item>
144. <f7-list-item title="Ronnie"></f7-list-item>
145. <f7-list-item title="Rory"></f7-list-item>
146. <f7-list-item title="Ryan"></f7-list-item>
147. </f7-list-group>
148. <f7-list-group>
149. <f7-list-item title="S" group-title></f7-list-item>
150. <f7-list-item title="Samuel"></f7-list-item>
151. <f7-list-item title="Sebastian"></f7-list-item>
152. <f7-list-item title="Seth"></f7-list-item>
153. <f7-list-item title="Sonny"></f7-list-item>
154. <f7-list-item title="Stanley"></f7-list-item>
155. </f7-list-group>
156. <f7-list-group>
157. <f7-list-item title="T" group-title></f7-list-item>
158. <f7-list-item title="Teddy"></f7-list-item>
159. <f7-list-item title="Theo"></f7-list-item>
160. <f7-list-item title="Theodore"></f7-list-item>
161. <f7-list-item title="Thomas"></f7-list-item>
162. <f7-list-item title="Toby"></f7-list-item>
163. <f7-list-item title="Tommy"></f7-list-item>
164. <f7-list-item title="Tyler"></f7-list-item>
165. </f7-list-group>
166. <f7-list-group>
167. <f7-list-item title="W" group-title></f7-list-item>
168. <f7-list-item title="William"></f7-list-item>
169. </f7-list-group>
170. <f7-list-group>
171. <f7-list-item title="Z" group-title></f7-list-item>
172. <f7-list-item title="Zachary"></f7-list-item>
173. </f7-list-group>
174. </f7-list>
175. </f7-page>
176. </template>
177. <script>
178. export default {
179. methods: {
180. onIndexSelect(itemContent) {
181. console.log(itemContent);
182. },
183. },
184. };
185. </script>
