Hologram Logo

Widget Class

Widgets must extend the HologramWidget Vue component, and minimally have a template object containing the HTML for your widget:

export default {
    extends: HologramWidget,
    template: '<div>Hello World!<div>'
}

Accessing Widget Assets

Widgets will often contain images or other assets. You can store those within your widget folder, organized however you want. In order to access your assets you will use the following method:

asset(path)

The path will always be relative to your widget folder. For example, if you want to access an image contained in a folder called "images" you would use the following code:

export default {
    extends: HologramWidget,
    // Use the asset function to get the path to an icon:
    template: `<img :src="asset('images/icon.svg')" />`,
    methods: {
        example() {
            // You can also use the asset function in code:
            let iconPath = this.asset('images/icon.svg')
        }
    }
}

The asset function sets the file path relative to your widget folder. Do not place any files or assets outside of your widget folder or they will be inaccessible.


Setting CSS Variables

This helper method lets you set css variables which can be accessed in your css. This is especially useful for accessing a widget's theme colors in its css file.

addCssVariables(items)

For example, here we add background and foreground color variables to the widget when mounted.

export default {
    extends: HologramWidget,
    mounted() {
        this.addCssVariables({
            'backgroundColor': 'red',
            'textColor': 'green',
        })
    },
    template: '<div class="my-div">Hello World!</div>'
}

Those variables can then be access in your css:

.my-div {
    background: var(--backgroundColor);
    color: var(--textColor);
}

Accessing a widget's color settings

You can specify a widget's color controls (and other settings) in the Widget Settings section of the Widget Config file.

To access these colors use the fetchColorTheme method:

fetchColorTheme(name, callback)

The callback is automatically called when the auto colors change for a widget, or the user edits the colors.

export default {
    extends: HologramWidget,
    mounted() {
        // Get the user defined colors
        this.fetchColorTheme('theme-name', (colors) => {
            // Add them to the css variables so we can style the widget
            this.addCssVariables(colors)
        })
    },
    // ...
}