Appearance

The properties under the Appearance category can be used to control the look and presentation of the visual component i.e., card, chart, grid, pivot, button, etc.

Key Properties

Background

• Background Color - The background color allows you to add color to the area behind the visual component. The background color can be chosen using the color picker, or alternatively, the Hex Code, RGBA, or HSLA values can be provided.

• Opacity - Allows you to control the transparency of the background color. Opacity ranges from 0 (fully transparent i.e. makes the background color invisible) to 1 (fully opaque i.e., makes the background color completely solid).

Text

The text property can be used to provide a primary colour to the title / subtile of the visual component. The primary color can be chosen using the color picker, or alternatively, the Hex Code, RGBA, or HSLA values can be provided.

Padding

Padding can be used to control the space between the contents of the visual component and its borders.

• The padding can be set individually in pixels for each side (top, right, bottom, and left).

Shadow

The shadow property is used to add depth and emphasis to visual component box by creating a soft or sharp outline beneath it. Under the shadow settings, three properties can be defined:

• Offset (X, Y) - Determines the position of the shadow relative to the visual component box.

  • A positive X value moves the shadow to the right. Negative values are currently not allowed

  • A positive Y value moves the shadow downward. Negative values are currently not allowed

• Blur Radius - Defines how soft or sharp the shadow appears. A higher value creates a more diffused, softer shadow.

• Color: Color can be used to match the theme of the visual component box and enhance contrast.

Border

The border provides an outline around the visual component box. Under the border settings, three properties can be defined:

• Width: This controls the thickness of the border. For the border to appear, it must have a non-zero width.

• Style: This determines the appearance of the border. The available options are:

  • None: The border will not be displayed, even if a width is set.

  • Solid: A continuous, unbroken line.

  • Dotted: A broken line made up of dots.

  • Dashed: A broken line made up of dashes.

• Color: This setting allows you to define the color of the border.

Border Radius

Border Radius is a property that controls the roundness of the corners of the border around the visual component box. This property gets applied only when a non zero width border is set around the visual component box.

• The border radius can be set individually in pixels for each corner (top-left, top-right, bottom-left, and bottom-right).

• A border-radius of 0px gives sharp, square corners.

• As border radius is increased, sharp angular corners keeps getting transformed into more smooth, rounded corners.

Appearance