quasar
Version:
Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
197 lines • 6.28 kB
JSON
{
"type": "component",
"meta": {
"docsUrl": "https://v1.quasar.dev/vue-components/scroll-area"
},
"props": {
"dark": {
"type": "Boolean",
"desc": "Notify the component that the background is a dark color",
"category": "style",
"addedIn": "v1.9.0"
},
"bar-style": {
"type": [
"Array",
"String",
"Object"
],
"desc": "Object with CSS properties and values for styling the custom scrollbar",
"examples": [
":bar-style=\"{ right: '4px', borderRadius: '5px', background: 'red', width: '10px', opacity: 1 }\""
],
"category": "style",
"addedIn": "v1.5.0"
},
"thumb-style": {
"type": "Object",
"desc": "Object with CSS properties and values for styling the thumb of custom scrollbar",
"examples": [
":thumb-style=\"{ right: '4px', borderRadius: '5px', background: 'red', width: '10px', opacity: 1 }\""
],
"category": "style"
},
"content-style": {
"type": [
"Array",
"String",
"Object"
],
"desc": "Object with CSS properties and values for styling the container of QScrollArea",
"examples": [
":content-style=\"{ backgroundColor: '#C0C0C0' }\""
],
"category": "style"
},
"content-active-style": {
"type": [
"Array",
"String",
"Object"
],
"desc": "Object with CSS properties and values for styling the container of QScrollArea when scroll area becomes active (is mouse hovered)",
"examples": [
":content-active-style=\"{ backgroundColor: 'white' }\""
],
"category": "style"
},
"visible": {
"type": "Boolean",
"desc": "Manually control the visibility of the scrollbar; Overrides default mouse over/leave behavior",
"category": "behavior",
"addedIn": "v1.3.0"
},
"delay": {
"type": [
"Number",
"String"
],
"desc": "When content changes, the scrollbar appears; this delay defines the amount of time (in milliseconds) before scrollbars disappear again (if component is not hovered)",
"default": 1000,
"examples": [
500,
":delay=\"550\""
],
"category": "behavior"
},
"horizontal": {
"type": "Boolean",
"desc": "Register for horizontal scroll instead of vertical (which is default)",
"category": "behavior"
}
},
"slots": {
"default": {
"desc": "Default slot in the devland unslotted content of the component"
}
},
"events": {
"scroll": {
"desc": "Emitted when scroll information changes (and listener is configured)",
"params": {
"info": {
"type": "Object",
"definition": {
"ref": {
"type": "Object",
"desc": "Vue reference to the QScrollArea which triggered the event"
},
"verticalPosition": {
"type": "Number",
"desc": "Vertical scroll position (in px); available only if QScrollArea is NOT in horizontal mode"
},
"verticalPercentage": {
"type": "Number",
"desc": "Vertical scroll percentage (0.0 < x < 1.0); available only if QScrollArea is NOT in horizontal mode"
},
"verticalSize": {
"type": "Number",
"desc": "Vertical scroll size (in px); available only if QScrollArea is NOT in horizontal mode"
},
"verticalContainerSize": {
"type": "Number",
"desc": "Height of the container (in px); available only if QScrollArea is NOT in horizontal mode"
},
"horizontalPosition": {
"type": "Number",
"desc": "Horizontal scroll position (in px); available only if QScrollArea is in horizontal mode"
},
"horizontalPercentage": {
"type": "Number",
"desc": "Horizontal scroll percentage (0.0 < x < 1.0); available only if QScrollArea is in horizontal mode"
},
"horizontalSize": {
"type": "Number",
"desc": "Horizontal scroll size (in px); available only if QScrollArea is in horizontal mode"
},
"horizontalContainerSize": {
"type": "Number",
"desc": "Width of the container (in px); available only if QScrollArea is in horizontal mode"
}
}
}
},
"addedIn": "v1.9.3"
}
},
"methods": {
"getScrollTarget": {
"desc": "Get the scrolling DOM element target",
"returns": {
"type": "Object",
"desc": "DOM element upon which scrolling takes place"
}
},
"getScrollPosition": {
"desc": "Get current scroll position",
"returns": {
"type": "Number",
"desc": "Scroll position offset from top (in pixels)",
"examples": [
110
]
}
},
"setScrollPosition": {
"desc": "Set scroll position to an offset; If a duration (in milliseconds) is specified then the scroll is animated",
"params": {
"offset": {
"type": "Number",
"desc": "Scroll position offset from top (in pixels)",
"required": true,
"examples": [
220
]
},
"duration": {
"type": "Number",
"desc": "Duration (in milliseconds) enabling animated scroll",
"examples": [
300
]
}
}
},
"setScrollPercentage": {
"desc": "Set scroll position to a percentage (0.0 < x < 1.0) of the total scrolling size; If a duration (in milliseconds) is specified then the scroll is animated",
"params": {
"offset": {
"type": "Number",
"desc": "Scroll percentage (0.0 < x < 1.0) of the total scrolling size",
"required": true,
"examples": [
220
]
},
"duration": {
"type": "Number",
"desc": "Duration (in milliseconds) enabling animated scroll",
"examples": [
300
]
}
},
"addedIn": "v1.13.2"
}
}
}