我的书签
添加书签
移除书签
Button Vue Component
Button Vue component represents Framework7’s Button elements.
Button Components
There are following components included:
**f7-button**- single button**f7-segmented**- segmented wrapper for buttons
Button Properties
Button component has almost the same properties as the Link component but with few additional button-specific properties:
| Prop | Type | Default | Description |
|---|---|---|---|
| <f7-segmented> properties | |||
| --- | --- | --- | --- |
| raised | boolean | false | Makes segmented raised |
| raised-ios | boolean | false | Makes segmented raised only in iOS theme |
| raised-md | boolean | false | Makes segmented raised only in MD theme |
| raised-aurora | boolean | false | Makes segmented raised only in Aurora theme |
| round | boolean | false | Makes segmented round |
| round-ios | boolean | false | Makes segmented round only in iOS theme |
| round-md | boolean | false | Makes segmented round only in MD theme |
| round-aurora | boolean | false | Makes segmented round only in Aurora theme |
| tag | string | div | Tag used to render Segmented element |
| <f7-button> properties | |||
| type | string | If it is one of submit, button or reset then it will be rendered as <button> element with same type attribute |
|
| tab-link | string boolean | Enables tab link and specify CSS selector of the target tab (if specified as a string) | |
| tab-link-active | boolean | false | Makes this tab link active |
| active | boolean | false | Makes this button active state when used in Segmented. Must be used instead of tab-link-active |
| text | string | Button text label | |
| no-fast-click | boolean | Disables fast click | |
| tooltip | string | Button tooltip text to show on button hover/press | |
| round | boolean | false | Makes button round |
| round-ios | boolean | false | Makes button round for iOS theme only |
| round-md | boolean | false | Makes button round for MD theme only |
| round-aurora | boolean | false | Makes button round for Aurora theme only |
| large | boolean | false | Makes large button |
| large-ios | boolean | false | Makes large button for iOS theme only |
| large-md | boolean | false | Makes large button for MD theme only |
| large-aurora | boolean | false | Makes large button for Aurora theme only |
| small | boolean | false | Makes small button |
| small-ios | boolean | false | Makes small button for iOS theme only |
| small-md | boolean | false | Makes small button for MD theme only |
| small-aurora | boolean | false | Makes small button for Aurora theme only |
| fill | boolean | false | Makes button filled color |
| fill-ios | boolean | false | Makes button filled color for iOS theme only |
| fill-md | boolean | false | Makes button filled color for MD theme only |
| fill-aurora | boolean | false | Makes button filled color for Aurora theme only |
| raised | boolean | false | Makes button raised |
| raised-ios | boolean | false | Makes button raised only in iOS theme |
| raised-md | boolean | false | Makes button raised only in MD theme |
| raised-aurora | boolean | false | Makes button raised only in Aurora theme |
| outline | boolean | false | Makes button outline |
| outline-ios | boolean | false | Makes button outline only in iOS theme |
| outline-md | boolean | false | Makes button outline only in MD theme |
| outline-aurora | boolean | false | Makes button outline only in Aurora theme |
| <f7-button> icon related properties | |||
| icon-size | string number | Icon size in px | |
| icon-color | string | Icon color. One of the default colors | |
| icon | string | Custom icon class | |
| icon-f7 | string | Name of F7 Icons font icon | |
| icon-material | string | Name of Material Icons font icon | |
| icon-fa | string | Name of Font Awesome font icon | |
| icon-ion | string | Name of Ionicons font icon | |
| icon-ios | string | Icon to be used in case of iOS theme is used. Consists of icon family and icon name divided by colon, e.g. f7:home or ion:home |
|
| icon-md | string | Icon to be used in case of MD theme is used. Consists of icon family and icon name divided by colon, e.g. material:home or fa:home |
|
| icon-aurora | string | Icon to be used in case of Aurora theme is used. Consists of icon family and icon name divided by colon, e.g. material:home or fa:home |
|
| <f7-button> navigation/router related properties | |||
| href | string boolean | # | URL of the page to load. In case of boolean href=”false” it won’t add href tag |
| target | string | Value of link target attribute, e.g. _blank, _self, etc. |
|
| view | string | CSS selector of the View to load the page | |
| external | boolean | Enable to bypass Framework7’s link click handler | |
| back | boolean | Enables back navigation link | |
| force | boolean | Force page to load and ignore previous page in history (use together with back prop) |
|
| reload-current | boolean | Reloads new page instead of the currently active one | |
| reload-previous | boolean | Replace the previous page in history with the new one from route | |
| reload-all | boolean | Load new page and remove all previous pages from history and DOM | |
| reload-detail | boolean | Reload Detail page in Master Detail view | |
| animate | boolean | Disables pages animation | |
| ignore-cache | boolean | Ignores caching | |
| route-tab-id | string | Routable Tab id | |
| route-props | object | Object with additional props that will be passed to target route component | |
| prevent-router | boolean | false | If set, then it won’t be processed by Framework7 router |
| <f7-button> action related properties | |||
| panel-open | string boolean | Defines panel to open. Can be left or right |
|
| panel-close | boolean | Closes panel on click | |
| panel-toggle | boolean | Toggle (open/close) panel on click | |
| actions-open | string boolean | CSS selector of the action sheet to open on click | |
| actions-close | string boolean | CSS selector of the action sheet to close on click. Or boolean property to close currently opened action sheet | |
| popup-open | string boolean | CSS selector of the popup to open on click | |
| popup-close | string boolean | CSS selector of the popup to close on click. Or boolean property to close currently opened popup | |
| popover-open | string boolean | CSS selector of the popover to open on click | |
| popover-close | string boolean | CSS selector of the popover to close on click. Or boolean property to close currently opened popover | |
| sheet-open | string boolean | CSS selector of the sheet modal to open on click | |
| sheet-close | string boolean | CSS selector of the sheet modal to close on click. Or boolean property to close currently opened sheet modal | |
| login-screen-open | string boolean | CSS selector of the login screen to open on click | |
| login-screen-close | string boolean | CSS selector of the login screen to close on click. Or boolean property to close currently opened login screen | |
| sortable-enable | string boolean | CSS selector of the Sortable list to open on click | |
| sortable-disable | string boolean | CSS selector of the Sortable list to close on click. Or boolean property to close currently opened Sortable list | |
| sortable-toggle | string boolean | CSS selector of the Sortable list to toggle on click. Or boolean property to toggle currently opened/closed Sortable list | |
| searchbar-enable | string boolean | CSS selector of the Expandable Searchbar to be enabled on click. Or boolean property to enable the first found Searchbar | |
| searchbar-disable | string boolean | CSS selector of the Expandable Searchbar to be disabled on click. Or boolean property to disable the first found Searchbar | |
| searchbar-toggle | string boolean | CSS selector of the Expandable Searchbar to toggle on click. Or boolean property to toggle the first found Searchbar | |
| searchbar-clear | string boolean | CSS selector of the Expandable Searchbar to clear on click. Or boolean property to clear the first found Searchbar | |
| card-open | string boolean | CSS selector of the expandable card to open on click. Or boolean to open first found expandable card | |
| card-close | string boolean | CSS selector of the expandable card to close on click. Or boolean property to close currently opened expandable card | |
| card-prevent-open | boolean | Click on element with this prop won’t open its parent expandable card | |
| menu-close | boolean | Closes Menu dropdown on click |
Button Events
| Event | Description |
|---|---|
| <f7-button> events | |
| --- | --- |
| click | Event will be triggered after click on a button |
Examples
1. <f7-block-title>Usual Buttons</f7-block-title>
2. <f7-block>
3. <f7-row>
4. <f7-col>
5. <f7-button>Button</f7-button>
6. </f7-col>
7. <f7-col>
8. <f7-button>Button</f7-button>
9. </f7-col>
10. <f7-col>
11. <f7-button round>Round</f7-button>
12. </f7-col>
13. </f7-row>
14. </f7-block>
16. <f7-block-title>Fill Buttons</f7-block-title>
17. <f7-block>
18. <f7-row>
19. <f7-col>
20. <f7-button fill>Button</f7-button>
21. </f7-col>
22. <f7-col>
23. <f7-button fill>Button</f7-button>
24. </f7-col>
25. <f7-col>
26. <f7-button fill round>Round</f7-button>
27. </f7-col>
28. </f7-row>
29. </f7-block>
31. <f7-block-title>Outline Buttons</f7-block-title>
32. <f7-block>
33. <f7-row>
34. <f7-col>
35. <f7-button outline>Button</f7-button>
36. </f7-col>
37. <f7-col>
38. <f7-button outline>Button</f7-button>
39. </f7-col>
40. <f7-col>
41. <f7-button outline round>Round</f7-button>
42. </f7-col>
43. </f7-row>
44. </f7-block>
46. <f7-block-title>Raised Buttons</f7-block-title>
47. <f7-block>
48. <f7-row tag="p">
49. <f7-col tag="span">
50. <f7-button raised>Button</f7-button>
51. </f7-col>
52. <f7-col tag="span">
53. <f7-button raised fill>Fill</f7-button>
54. </f7-col>
55. <f7-col tag="span">
56. <f7-button raised outline>Outline</f7-button>
57. </f7-col>
58. </f7-row>
59. <f7-row tag="p">
60. <f7-col tag="span">
61. <f7-button raised round>Round</f7-button>
62. </f7-col>
63. <f7-col tag="span">
64. <f7-button raised fill round>Fill</f7-button>
65. </f7-col>
66. <f7-col tag="span">
67. <f7-button raised outline round>Outline</f7-button>
68. </f7-col>
69. </f7-row>
70. </f7-block>
72. <f7-block-title>Segmented</f7-block-title>
73. <f7-block>
74. <f7-segmented raised tag="p">
75. <f7-button>Button</f7-button>
76. <f7-button>Button</f7-button>
77. <f7-button active>Active</f7-button>
78. </f7-segmented>
79. <f7-segmented raised tag="p">
80. <f7-button outline>Outline</f7-button>
81. <f7-button outline>Outline</f7-button>
82. <f7-button outline active>Active</f7-button>
83. </f7-segmented>
84. <f7-segmented raised round tag="p">
85. <f7-button round>Button</f7-button>
86. <f7-button round>Button</f7-button>
87. <f7-button round active>Active</f7-button>
88. </f7-segmented>
89. <f7-segmented round round tag="p">
90. <f7-button round outline>Outline</f7-button>
91. <f7-button round outline>Outline</f7-button>
92. <f7-button round outline active>Active</f7-button>
93. </f7-segmented>
94. </f7-block>
96. <f7-block-title>Large Buttons</f7-block-title>
97. <f7-block>
98. <f7-row tag="p">
99. <f7-col tag="span">
100. <f7-button large>Button</f7-button>
101. </f7-col>
102. <f7-col tag="span">
103. <f7-button large fill>Fill</f7-button>
104. </f7-col>
105. </f7-row>
106. <f7-row tag="p">
107. <f7-col tag="span">
108. <f7-button large raised>Raised</f7-button>
109. </f7-col>
110. <f7-col tag="span">
111. <f7-button large raised fill>Raised Fill</f7-button>
112. </f7-col>
113. </f7-row>
114. </f7-block>
116. <f7-block-title>Small Buttons</f7-block-title>
117. <f7-block>
118. <f7-row tag="p">
119. <f7-col tag="span">
120. <f7-button large small>Button</f7-button>
121. </f7-col>
122. <f7-col tag="span">
123. <f7-button large small outline>Outline</f7-button>
124. </f7-col>
125. <f7-col tag="span">
126. <f7-button large small fill>Fill</f7-button>
127. </f7-col>
128. </f7-row>
129. <f7-row tag="p">
130. <f7-col tag="span">
131. <f7-button large small round>Button</f7-button>
132. </f7-col>
133. <f7-col tag="span">
134. <f7-button large small outline round>Outline</f7-button>
135. </f7-col>
136. <f7-col tag="span">
137. <f7-button large small fill round>Fill</f7-button>
138. </f7-col>
139. </f7-row>
140. </f7-block>
142. <f7-block-title>Color Buttons</f7-block-title>
143. <f7-block>
144. <f7-row>
145. <f7-col>
146. <f7-button color="red">Red</f7-button>
147. </f7-col>
148. <f7-col>
149. <f7-button color="green">Green</f7-button>
150. </f7-col>
151. <f7-col>
152. <f7-button color="blue">Blue</f7-button>
153. </f7-col>
154. </f7-row>
155. </f7-block>
157. <f7-block-title>Color Fill Buttons</f7-block-title>
158. <f7-block>
159. <f7-row>
160. <f7-col>
161. <f7-button fill color="red">Red</f7-button>
162. </f7-col>
163. <f7-col>
164. <f7-button fill color="green">Green</f7-button>
165. </f7-col>
166. <f7-col>
167. <f7-button fill color="blue">Blue</f7-button>
168. </f7-col>
169. </f7-row>
170. </f7-block>
