Style Properties

Existing properties

The below list is an exhaustive list of every style properties that you can change without digging in internal code:

• width: width (between 0.0 and 1.0) relative to parent.
• height: height (between 0.0 and 1.0) relative to parent.
• aspectRatio: floating value that keeps the aspect ratio of the element, using either the width or the height. For instance, if you provide a height, and a value of 0.5 for the aspect ratio, the width will be height * 0.5
• padding: object with top, bottom, left, right. Each sub-property should be between 0.0 and 0.49.
• margin: object with top, bottom, left, right. Each sub-property should be between 0.0 and 0.49.
• position: horizontal position of the element. Choose between left, right, or center.
• align: vertical position of the element. Choose between top, bottom, or center.
• background: background of the element. The background always takes the complete size of the element. You can give this property an hexadecimal color (e.g 0xFF0000), a THREE.Material instance, or a THREE.Texture instance (an image).

Examples

Simple Texture Button

let button1 = new VRUI.view.ImageButton(texture, {
    height: 0.5,
    width: 0.5,
    background: 0x0000FF
})

Supposing texture exists, this creates an image button with a blue background and and an icon with the texture image.

You can pad the inner icon by using:

let button1 = new VRUI.view.ImageButton(texture, {
    height: 0.5,
    width: 0.5,
    background: 0x0000FF,
    padding: {
        top: 0.1,    // Be careful, do not forget everything is relative, and so, in percentage!
        bottom: 0.1, // Be careful, do not forget everything is relative, and so, in percentage!
        left: 0.1,   // Be careful, do not forget everything is relative, and so, in percentage!
        right: 0.1   // Be careful, do not forget everything is relative, and so, in percentage!
    }
})

Advanced example

let leftArrow = new VRUI.view.ImageButton(iconTexture, {
    width: 0.1,
    height: 0.45,
    position: 'left',
    margin: {
        left: 0.1
    },
    padding: {
        top: 0.08,
        bottom: 0.08,
        left: 0.01,
        right: 0.01,
    },
    background: buttonBackgroundTexture
})

Here, we create an ImageButton, with a background buttonBackgroundTexture, some padding, but also some margin.