Vuido
  • About Vuido
  • Introduction
  • Installation
    • Manual Configuration
    • Production Builds
  • Usage
    • Window Template
    • Script Section
    • Interpolations
    • Computed Properties
    • Conditionals and Loops
    • Handling User Input
    • Managing Windows
    • Displaying Dialogs
    • Custom Components
    • Using libui Classes
    • Common Attributes
  • Packaging
  • Built-in Components
    • Window
    • Containers
      • Box
      • Form
      • Group
      • Tab
    • Widgets
      • Area
        • AreaGroup
        • AreaPath
        • AreaText
      • Button
      • Checkbox
      • ColorButton
      • Combobox
      • DatePicker
      • DateTimePicker
      • DropdownList
      • FontButton
      • ProgressBar
      • RadioButtons
      • Separator
      • Slider
      • Spinbox
      • Text
      • TextArea
      • TextInput
      • TimePicker
Powered by GitBook
On this page
  • Attributes
  • scrollable
  • width
  • height
  • Events
  • draw
  • mousedown
  • mouseup
  • mousemove
  • mouseenter
  • mouseleave
  • dragbroken
  • keydown
  • keyup
  • Example
  1. Built-in Components
  2. Widgets

Area

PreviousWidgetsNextAreaGroup

Last updated 6 years ago

A custom drawn widget which provides an API for drawing 2D graphics. It can have scroll bars and it can handle mouse and keyboard input.

The area widget can contain the following child components:

  • - a group containing other components

  • - a stroked and/or filled path

  • - a paragraph of text with formatting

Attributes

scrollable

type: Boolean

Whether the area has a horizontal and vertical scrollbar.

width

type: Number

The width of the scrollable area.

height

type: Number

The height of the scrollable area.

Events

draw

mousedown

mouseup

mousemove

mouseenter

Emitted when the mouse pointer enters the widget.

mouseleave

Emitted when the mouse pointer leaves the widget.

dragbroken

Emitted when the window is deactivated during a drag operation. Only implemented on Windows.

keydown

keyup

Example

<Area v-on:mousedown="mouseDown" v-on:mouseup="mouseUp">
  <AreaPath v-bind:path="circlePath" v-bind:fill="redBrush"/>
</Area>

Emitted when the widget needs to be redrawn. The argument of this event is a object. You can retrieve the drawing context by calling params.getContext().

Emitted when a mouse button is pressed over the widget. The argument of this event is a object.

Emitted when a mouse button is released. The argument of this event is a object.

Emitted when the mouse pointer moves over the widget. The argument of this event is a object.

Emitted when a key was pressed. The argument of this event is a object. The event handler should return true to indicate that the key event was handled.

Emitted when a key was released. The argument of this event is a object. The event handler should return true to indicate that the key event was handled.

AreaGroup
AreaPath
AreaText
libui.UiAreaDrawParams
libui.UiAreaMouseEvent
libui.UiAreaMouseEvent
libui.UiAreaMouseEvent
libui.UiAreaKeyEvent
libui.UiAreaKeyEvent