How to edit the style of the component (edit style)?

The editing style is a common function of components. When the mouse moves to each component, a gear-shaped icon will appear on the corresponding component, and a row of operation icons will appear on the icon. Find the \"Edit Style\" icon and click on the icon to pop up editing The style pop-up layer can be used to edit the component global, title bar, and content area separately. When the component title is empty, the component title is not displayed. There is no \"title bar\" tab. Similarly, if the component If the content area is empty, there is no \"content area\" tab. Take the article classification component as an example:




1. Global component

Including component size, component background, component border, component margin

Component size: The height of the component can be set. Generally, the adaptive height is used. If the fixed height may cause the module to be blocked and left blank in different terminals, please use this function with caution (mobile phone or PAD terminal) If the module is blocked or left blank, please first check whether it is caused by setting the height);




Component background: You can add a color background or a picture background to this component. You can also select the tile mode, tile position, and background size of the background image. Different options can have different display effects. You can try it separately.




Component border: Here you can set the color, style (solid line, dashed line, double solid line, and dot) of the component border, the thickness of the border, and the rounded corners of the border.




Component margin: Here you can set the inner and outer margins of the component. How to define the inner and outer margins, please see the following figure:



2. Title bar

Title bar setting: You can set the title bar separately, you can choose to show or hide the title bar, you can set the height, background, text, border, and margin of the title bar. As shown below:




3. Content area

You can add a color background or a picture background to the component content area, you can set the font/size/spacing/line height/alignment/font style of the non-linked text or linked text in the content area, you can set the border and content area of ​​the content area Margins.