I. Overview
1.Version Description
| FineReport server version | APP version | HTML5 Mobile Display plugin | Function update |
|---|---|---|---|
| 10.0.18 | - | - | The report block and chart block Attributesinterface has been updated，allow to set component title, background, and border respectively. |
2.Application scenario
This article describes the style settings for report blocks and chart blocks, including title, background, and border.
3.Entrance
After selecting the report block or chart block, the title, background and border of the component can be set in the Advanced tab, as shown below:
II. Style Introduction
1.Component Title
Attributes > Advanced > Title Style
The front preview as shown below：
Each setting item of the title is described in the following table：
| Setting Items | Introduction |
|---|---|
| Title visibility | The chart block is selected by default, and the report block is not selected by default. The title appears above the component content when previewing. Deselect the header will not display. |
| Text | Enter the title text in the edit box. If you want to use the formula button on the right, enclose the text in double quotes. |
| Character | Modify the formatting of the heading text, including font, size, color, tilt, bold, and underline |
| Title Icon | Add an icon to the title :
This icon supports image formats: GIF, JPG, PNG, BMP. You can also set the relative position of pattern and image and text interval.
If you have already set the icon and want to clear it, hover the mouse over the image and click the delete button displayed：
|
| Position | Sets the position of the title text: left,centerandright. |
| Title Padding | You can fill the background of the title area with no background,color,imageor gradient color. |
2.Component Background
Attributes > Advanced > Body Content
The front preview as shown below：
Filling method include :no background,color,imageorgradient color.
When filling with images, there are four image adaptive styles, as follows：
Default Image：It means that the original image is displayed. If the component size is smaller than the original image size, it will expand from the upper left corner of the component, and the part of the image that exceeds the component size will be truncated and not displayed.
Titled Image：Images are shown repeatedly, covering components.
Extend Image：Adapt to the width and height of the component. If the image is small, stretch the filling component，otherwise, compress the filling component.
Adjust Image：Image adaptive component size.
3.Component Border
Attributes > Advanced > Background Style > Border
The front preview as shown below：
Border setting introduction：
| Setting Items | Introduction |
|---|---|
| Rendering Style | There are two options: common and shadow. When set to common, there is no rendering effect; When set to shadow, there will be shadows around the border |
| Border | There are four options: none、cutom image、line. When set as a custom image, you can use the 9-Patch setting to fill, this function can solve the problem of the image being stretched and deformed. |
| Rounded Corner | Define the radian of the four corners of the border, these four corners can be displayed as rounded corners. |
