Button Vue Component
Button Vue component represents Framework7's Button elements.
Button Components
There are following components included:
f7-button
- single buttonf7-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 |
strong | boolean | false | Makes strong segmented |
strong-ios | boolean | false | Makes strong segmented only in iOS theme |
strong-md | boolean | false | Makes strong segmented only in MD theme |
strong-aurora | boolean | false | Makes strong segmented 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 | |
tooltip | string | Button tooltip text to show on button hover/press | |
tooltip-trigger | string | hover | Defines how to trigger (open) Tooltip. Can be hover or click . If hover tooltip will be toggled on mouse hover on desktop, and with tap and hold on touch devices |
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-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:house | |
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 | |
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 | |
<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. Or current to load in current view. | |
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 | |
transition | string | Name of the custom page transition | |
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 | CSS selector of panel to open on click. Or can be left or right if there is only left or right panel in DOM. | |
panel-close | string boolean | Closes panel on click | |
panel-toggle | string boolean | CSS selector of panel to toggle on click. Or can be left or right if there is only left or right panel in DOM. | |
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 be enabled on click | |
sortable-disable | string boolean | CSS selector of the Sortable list to be disabled 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
<f7-block-title>Usual Buttons</f7-block-title>
<f7-block>
<f7-row>
<f7-col>
<f7-button>Button</f7-button>
</f7-col>
<f7-col>
<f7-button>Button</f7-button>
</f7-col>
<f7-col>
<f7-button round>Round</f7-button>
</f7-col>
</f7-row>
</f7-block>
<f7-block-title>Fill Buttons</f7-block-title>
<f7-block>
<f7-row>
<f7-col>
<f7-button fill>Button</f7-button>
</f7-col>
<f7-col>
<f7-button fill>Button</f7-button>
</f7-col>
<f7-col>
<f7-button fill round>Round</f7-button>
</f7-col>
</f7-row>
</f7-block>
<f7-block-title>Outline Buttons</f7-block-title>
<f7-block>
<f7-row>
<f7-col>
<f7-button outline>Button</f7-button>
</f7-col>
<f7-col>
<f7-button outline>Button</f7-button>
</f7-col>
<f7-col>
<f7-button outline round>Round</f7-button>
</f7-col>
</f7-row>
</f7-block>
<f7-block-title>Raised Buttons</f7-block-title>
<f7-block>
<f7-row tag="p">
<f7-col tag="span">
<f7-button raised>Button</f7-button>
</f7-col>
<f7-col tag="span">
<f7-button raised fill>Fill</f7-button>
</f7-col>
<f7-col tag="span">
<f7-button raised outline>Outline</f7-button>
</f7-col>
</f7-row>
<f7-row tag="p">
<f7-col tag="span">
<f7-button raised round>Round</f7-button>
</f7-col>
<f7-col tag="span">
<f7-button raised fill round>Fill</f7-button>
</f7-col>
<f7-col tag="span">
<f7-button raised outline round>Outline</f7-button>
</f7-col>
</f7-row>
</f7-block>
<f7-block-title>Segmented</f7-block-title>
<f7-block>
<f7-segmented raised tag="p">
<f7-button>Button</f7-button>
<f7-button>Button</f7-button>
<f7-button active>Active</f7-button>
</f7-segmented>
<f7-segmented strong tag="p">
<f7-button>Button</f7-button>
<f7-button>Button</f7-button>
<f7-button active>Active</f7-button>
</f7-segmented>
<f7-segmented tag="p">
<f7-button outline>Outline</f7-button>
<f7-button outline>Outline</f7-button>
<f7-button outline active>Active</f7-button>
</f7-segmented>
<f7-segmented raised round tag="p">
<f7-button round>Button</f7-button>
<f7-button round>Button</f7-button>
<f7-button round active>Active</f7-button>
</f7-segmented>
<f7-segmented round tag="p">
<f7-button round outline>Outline</f7-button>
<f7-button round outline>Outline</f7-button>
<f7-button round outline active>Active</f7-button>
</f7-segmented>
</f7-block>
<f7-block-title>Large Buttons</f7-block-title>
<f7-block>
<f7-row tag="p">
<f7-col tag="span">
<f7-button large>Button</f7-button>
</f7-col>
<f7-col tag="span">
<f7-button large fill>Fill</f7-button>
</f7-col>
</f7-row>
<f7-row tag="p">
<f7-col tag="span">
<f7-button large raised>Raised</f7-button>
</f7-col>
<f7-col tag="span">
<f7-button large raised fill>Raised Fill</f7-button>
</f7-col>
</f7-row>
</f7-block>
<f7-block-title>Small Buttons</f7-block-title>
<f7-block>
<f7-row tag="p">
<f7-col tag="span">
<f7-button large small>Button</f7-button>
</f7-col>
<f7-col tag="span">
<f7-button large small outline>Outline</f7-button>
</f7-col>
<f7-col tag="span">
<f7-button large small fill>Fill</f7-button>
</f7-col>
</f7-row>
<f7-row tag="p">
<f7-col tag="span">
<f7-button large small round>Button</f7-button>
</f7-col>
<f7-col tag="span">
<f7-button large small outline round>Outline</f7-button>
</f7-col>
<f7-col tag="span">
<f7-button large small fill round>Fill</f7-button>
</f7-col>
</f7-row>
</f7-block>
<f7-block-title>Color Buttons</f7-block-title>
<f7-block>
<f7-row>
<f7-col>
<f7-button color="red">Red</f7-button>
</f7-col>
<f7-col>
<f7-button color="green">Green</f7-button>
</f7-col>
<f7-col>
<f7-button color="blue">Blue</f7-button>
</f7-col>
</f7-row>
</f7-block>
<f7-block-title>Color Fill Buttons</f7-block-title>
<f7-block>
<f7-row>
<f7-col>
<f7-button fill color="red">Red</f7-button>
</f7-col>
<f7-col>
<f7-button fill color="green">Green</f7-button>
</f7-col>
<f7-col>
<f7-button fill color="blue">Blue</f7-button>
</f7-col>
</f7-row>
</f7-block>