Setting the GUI of Tile style

Home > Basic examples > Example 13

Explanation

This is an example of setting the parameter (style) at the time of component creation to 'tile' by using dx5.create function.

The Tile style does not have a header, and the height of the item is fixed. When registering a virtual file, its thumbnail can be viewed by setting the web path to the "thumb" property for image, and local image files are thumbnailed by default (some files, such as JPEG and PNG) . Performance may be degraded because some files are loaded for thumbnail processing.

The component's style uses the setUIStyle function.

// You must pass a JSON object whose has style properties.
dx.setUIStyle({ ... });

// Example
dx.setUIStyle({
	statusBarVisible: true, // or false
	borderVisible: true, // or false
	...
});

The technology for drawing the component screen uses SVG technology. SVG can have slightly different rendering results for different browsers, and because it is based on vector graphics, it is not easy to handle GUI layouts in pixel units. Therefore, it is difficult to compensate for the difference between the line thickness in the product level.

Example

Default layout style

Setting status bar

Setting background

The background can be set to image.

Copy above address and set the path. Note) The background image may not be hidden by items. Please remove some items to test.

Setting fonts

Setting buttons(open, download)