Skip to main content

Using Image Brushes

  • Updated

Using Image Brushes

This applies to: Managed Dashboards, Managed Reports

Color-based properties of visualizations, components, and other design elements are actually brushes which can be one of the following brush types:

  • Solid Color

  • Linear Gradient

  • Radial Gradient

  • Image

  • Hatching

The image brush type in particular allows a button, for example, to be displayed as an image you specify instead of a solid color. You can also use this option to create customized state indicator states based on images.

Using an Image Brush

For this example, create a new dashboard and add a Button component to it from the toolbar.

Go to the Properties for the button, expand Lines & Fills, then open the additional Rest Background property options.

Expand the Rest Background property

This property determines the background color of the button when at rest (no user interaction).

Select the Brush drop-down and set it to Image. This loads a placeholder image by default and updates the button as you make changes.

Set the brush type to Image

Next, customize the image brush as described in the following sections.

Source

There are two options for specifying the image source. You can set Source to a URL that points to an image, such as http://www.example.com/images/image1.png, or you can select an existing image resource you've uploaded to the application.

To use an image resource, select the Select button. The Open dialog opens, allowing you to select a resource.

Select an existing image resource

In the Open dialog, you can right-click the Images folder to upload a new one. Select the existing image resource you want from the Images folder, and then select Open.

The button is now displayed as an image on the canvas. In the Properties window, you can see a small preview of the loaded image as well.

You can clean the text displayed on the button if you want to display only the image, an optionally set an ARIA Label instead.

The image resource is loaded into the button

In the case of an image resource, the Source setting looks like this:

dundasImageResource:e0011d1d-62ac-4d81-b532-287287741f14

The portion of the above text after the colon is the ID of the image resource, which you can also get from the image resource's properties.

Size

The Size setting offers the following options:

  • Auto - The image size is automatically determined.

  • Cover - The image is sized so that it covers the available content area.

  • Contain - The image is sized so that it is contained within the available content area.

  • Fill - The image is stretched to fill the content area without taking the aspect ratio into consideration.

Repeat

The Repeat setting specifies how the image will be repeated within the content area. There are two options:

  • Repeat

  • No Repeat

Note: The Repeat option may work differently depending on the type of component or element. For CSS-based components (such as the background of a label, or the dashboard itself), the repeat option first scales according to the Size setting, and then repeats based on that. For SVG-based controls (such as a rectangle), the repeat option ignores the Size setting, always starts at (0,0), and repeats based on the original size of the image.

For more information, see:

Related articles

Powered by Zendesk