ScrollAreaProps

The scroll-area widget allows users to wrap other widgets to enable a scroll (horizontal and vertical). It is based on NodeGui's QScrollArea

Note that the scroll area only allows one child. So, you may have to wrap contents in a vn-view

Usage

<template>
<vn-scroll-area>
<vn-view :style="'flex-direction: \'column\''">
<vn-text>Hello world</vn-text>
<vn-text :wordWrap="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec sapien orci, mattis sed lectus in, congue commodo odio.
Pellentesque luctus vestibulum justo eu porta.
Vivamus porttitor leo vitae tellus fringilla viverra.
Ut quis nunc id nisi vehicula posuere.
Suspendisse sem sem, fringilla ac lacinia et, rutrum et ipsum.
Curabitur porttitor justo sapien, et scelerisque erat sollicitudin a.
In id quam lectus. Vestibulum sed nunc tempus leo dapibus scelerisque vel ut ligula.
Aliquam tempor iaculis arcu non interdum.
</vn-text>
</vn-view>
</vn-scroll-area>
</template>
<script>
export default { };
</script>

What it looks like?

scroll-area-demo

Props and styling

You can find all the props vn-scroll-area accepts listed below. Apart from this, you can take a look at the styling and event handling docs

Hierarchy

Index

Properties

Properties

Optional enabled

enabled? : undefined | false | true

Inherited from ViewProps.enabled

Sets the property that tells whether the widget is enabled. In general an enabled widget handles keyboard and mouse events; a disabled widget does not. QWidget: setEnabled


Optional id

id? : undefined | string

Inherited from ViewProps.id

Sets the object name (id) of the widget in Qt. Object name can be analogous to id of an element in the web world. Using the objectName of the widget one can reference it in the Qt's stylesheet much like what we do with id in the web world. QWidget: setObjectName


Optional mouseTracking

mouseTracking? : undefined | false | true

Inherited from ViewProps.mouseTracking

Sets the property that tells whether mouseTracking is enabled for the widget. QWidget: setMouseTracking


Optional style

style? : undefined | string

Inherited from ViewProps.style

Sets the inline stylesheet property. QWidget: setInlineStyle


Optional styleSheet

styleSheet? : undefined | string

Inherited from ViewProps.styleSheet

Sets the property that holds the widget's style sheet. QWidget: setStyleSheet


Optional visible

visible? : undefined | false | true

Inherited from ViewProps.visible

Shows or hides the widget and its children. QWidget: show


Optional widgetResizable

widgetResizable? : undefined | false | true


Optional windowOpacity

windowOpacity? : undefined | number

Inherited from ViewProps.windowOpacity

This property holds the level of opacity for the window. QWidget: setWindowOpacity


Optional windowTitle

windowTitle? : undefined | string

Inherited from ViewProps.windowTitle

Sets the window title property. QWidget: setWindowTitle