quasar/dist/api/QFab.json

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

{"type":"component","meta":{"docsUrl":"https://v2.quasar.dev/vue-components/floating-action-button"},"props":{"type":{"type":"String","desc":"Define the button HTML DOM type","default":"'a'","values":["'a'","'submit'","'button'","'reset'"],"category":"general","required":false},"outline":{"type":"Boolean","desc":"Use 'outline' design for Fab button","category":"style"},"push":{"type":"Boolean","desc":"Use 'push' design for Fab button","category":"style"},"flat":{"type":"Boolean","desc":"Use 'flat' design for Fab button","category":"style"},"unelevated":{"type":"Boolean","desc":"Remove shadow","category":"style"},"padding":{"type":"String","desc":"Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set","examples":["'16px'","'10px 5px'","'2rem'","'xs'","'md lg'"],"category":"style"},"color":{"type":"String","tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"text-color":{"type":"String","tsType":"NamedColor","desc":"Overrides text color (if needed); Color name from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"glossy":{"type":"Boolean","desc":"Apply the glossy effect over the button","category":"style"},"external-label":{"type":"Boolean","desc":"Display label besides the FABs, as external content","category":"style|content"},"label":{"type":["String","Number"],"desc":"The label that will be shown when Fab is extended","examples":["'Button Label'"],"default":"''","category":"content","required":false},"label-position":{"type":"String","desc":"Position of the label around the icon","values":["'top'","'right'","'bottom'","'left'"],"default":"'right'","category":"style|content","required":false},"hide-label":{"type":["Boolean","null"],"desc":"Hide the label; Useful for animation purposes where you toggle the visibility of the label","category":"style|content","default":"null","required":false},"label-class":{"type":["String","Array","Object"],"tsType":"VueClassProp","desc":"Class definitions to be attributed to the label container","examples":["'my-special-class'","{ 'my-special-class': true }"],"category":"style"},"label-style":{"type":["String","Array","Object"],"tsType":"VueStyleProp","desc":"Style definitions to be attributed to the label container","examples":["'background-color: #ff0000'","{ backgroundColor: '#ff0000' }"],"category":"style"},"square":{"type":"Boolean","desc":"Apply a rectangle aspect to the FAB","category":"style"},"disable":{"type":"Boolean","desc":"Put component in disabled mode","category":"state"},"tabindex":{"type":["Number","String"],"desc":"Tabindex HTML attribute value","examples":["100","'0'"],"category":"general"},"model-value":{"type":["Boolean","null"],"desc":"Controls state of fab actions (showing/hidden); Works best with v-model directive, otherwise use along listening to 'update:modelValue' event","default":"null","category":"model","examples":["# v-model=\"state\""],"required":false},"icon":{"type":"String","desc":"Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)","examples":["'map'","'ion-add'","'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'","'img:path/to/some_image.png'"],"category":"content"},"active-icon":{"type":"String","desc":"Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)","examples":["'map'","'ion-add'","'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'","'img:path/to/some_image.png'"],"category":"content"},"hide-icon":{"type":"Boolean","desc":"Hide the icon (don't use any)","category":"style|content"},"direction":{"type":"String","desc":"Direction to expand Fab Actions to","default":"'right'","values":["'up'","'right'","'down'","'left'"],"category":"behavior","required":false},"vertical-actions-align":{"type":"String","desc":"The side of the Fab where Fab Actions will expand (only when direction is 'up' or 'down')","default":"'center'","values":["'left'","'center'","'right'"],"category":"style|content","required":false},"persistent":{"type":"Boolean","desc":"By default, Fab Actions are hidden when user navigates to another route and this prop disables this behavior","category":"behavior"}},"slots":{"default":{"desc":"This is where QFabActions may go into"},"tooltip":{"desc":"Slot specifically designed for a QTooltip"},"icon":{"desc":"Slot for icon shown when FAB is closed; Suggestion: QIcon","scope":{"opened":{"type":"Boolean","desc":"FAB is opened"}},"addedIn":"v2.4"},"active-icon":{"desc":"Slot for icon shown when FAB is opened; Suggestion: QIcon","scope":{"opened":{"type":"Boolean","desc":"FAB is opened"}},"addedIn":"v2.4"},"label":{"desc":"Slot for label","scope":{"opened":{"type":"Boolean","desc":"FAB is opened"}},"addedIn":"v2.4"}},"events":{"update:model-value":{"desc":"Emitted when fab actions are shown/hidden; Captured by v-model directive","params":{"value":{"type":"Boolean","desc":"New state (showing/hidden)"}}},"show":{"desc":"Emitted after component has triggered show()","params":{"evt":{"type":"Event","desc":"JS event object","required":true}}},"before-show":{"desc":"Emitted when component triggers show() but before it finishes doing it","params":{"evt":{"type":"Event","desc":"JS event object","required":true}}},"hide":{"desc":"Emitted after component has triggered hide()","params":{"evt":{"type":"Event","desc":"JS event object","required":true}}},"before-hide":{"desc":"Emitted when component triggers hide() but before it finishes doing it","params":{"evt":{"type":"Event","desc":"JS event object","required":true}}}},"methods":{"show":{"desc":"Expands fab actions list","params":{"evt":{"type":"Event","desc":"JS event object","required":false}},"returns":null},"hide":{"desc":"Collapses fab actions list","params":{"evt":{"type":"Event","desc":"JS event object","required":false}},"returns":null},"toggle":{"desc":"Triggers component to toggle between show/hide","params":{"evt":{"type":"Event","desc":"JS event object","required":false}},"returns":null}}}