Vista

Create and layout native views.

Process: Main

This module cannot be used until the ready event of the app module is emitted.

const { BaseWindow, View } = require('electron')

const win = new BaseWindow()
const view = new View()

view.setBackgroundColor('red')
view.setBounds({ x: 0, y: 0, width: 100, height: 100 })
win.contentView.addChildView(view)

Class: View

A basic native view.

Process: Main

View is an EventEmitter.

advertencia

Electron's built-in classes cannot be subclassed in user code. For more information, see the FAQ.

new View()

Creates a new View.

Eventos de Instancia

Objects created with new View emit the following events:

Event: 'bounds-changed'

Emitted when the view's bounds have changed in response to being laid out. The new bounds can be retrieved with view.getBounds().

Métodos de Instancia

Objects created with new View have the following instance methods:

view.addChildView(view[, index])

• view View - Child view to add.
• index Integer (optional) - Index at which to insert the child view. Defaults to adding the child at the end of the child list.

Si el mismo View es agregado a un padre que ya lo contiene, será reordenado de manera que se convierta en el view superior.

view.removeChildView(view)

• view View - Child view to remove.

If the view passed as a parameter is not a child of this view, this method is a no-op.

view.setBounds(bounds)

• bounds Rectangle - New bounds of the View.

view.getBounds()

Returns Rectangle - The bounds of this View, relative to its parent.

view.setBackgroundColor(color)

• color string - Color in Hex, RGB, ARGB, HSL, HSLA or named CSS color format. The alpha channel is optional for the hex type.

Examples of valid color values:

• Hex
  • #fff (RGB)
  • #ffff (ARGB)
  • #ffffff (RRGGBB)
  • #ffffffff (AARRGGBB)
• RGB
  • rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\)
    • e.g. rgb(255, 255, 255)
• RGBA
  • rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\)
    • e.g. rgba(255, 255, 255, 1.0)
• HSL
  • hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)
    • e.g. hsl(200, 20%, 50%)
• HSLA
  • hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)
    • e.g. hsla(200, 20%, 50%, 0.5)
• Nombre de color
  • Options are listed in SkParseColor.cpp
  • Similar a las palabras clave del Módulo de Color CSS Nivel 3, pero sensible a mayúsculas y minúsculas.
    • e.g. blueviolet or red

note

Hex format with alpha takes AARRGGBB or ARGB, not RRGGBBAA or RGB.

view.setBorderRadius(radius)

• radius Integer - Border radius size in pixels.

note

The area cutout of the view's border still captures clicks.

view.setVisible(visible)

• visible boolean - If false, the view will be hidden from display.

view.getVisible()

Returns boolean - Whether the view should be drawn. Note that this is different from whether the view is visible on screen—it may still be obscured or out of view.

Propiedades de la instancia

Objects created with new View have the following properties:

view.children Readonly

A View[] property representing the child views of this view.