メインコンテンツへ飛ぶ

表示

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.

new View()

Creates a new View.

インスタンスイベント

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().

インスタンスメソッド

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.

If the same View is added to a parent which already contains it, it will be reordered such that it becomes the topmost view.

view.removeChildView(view)

  • view View - Child view to remove.

view.setBounds(bounds)

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)
  • 色の名前
    • Options are listed in SkParseColor.cpp
    • CSS カラーモジュールレベル 3 のキーワードと似ていますが、大文字と小文字を区別します。
      • e.g. blueviolet or red

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

view.setVisible(visible)

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

インスタンスプロパティ

Objects created with new View have the following properties:

view.children Readonly

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