Tutorial / Mockplus RP / User Interface / Property Panel

Property Panel

Click the "Properties" tab on the right panel to open the Property panel. Here you can set or adjust the properties of your components. 

Note that since different components have different properties, the properties in this panel can be shown differently.

In general, you will be able to see the following properties: Align left, Align center, Align right, Align top, Align middle, Align bottom, Distribute horizontally, Distribute vertically. 

This section shows the name of the component you have selected. There are three icon buttons: “Hide,” “Disable,” and “Lock.”

“W”and“H”represents the width and height.“X” and “Y”stands for the component's position on the workspace. The Lock icon in the middle enables you to lock the aspect ratio. Once clicked, you can only adjust the width and height of this component at an aspect ratio.

Check the featured “Responsive layout”in this section. For more deatils, check “Responsive layout” to learn more. 

This section helps you adjust the component styles, including the "Opacity", "Fill", "Border" and "Shadow",etc. 

Here you can edit the text styles, including Font, Size, Color, Bold, Italic, Underline, Strikethrough, Spacing, Alignment, Upper/Lowercase, Text-indent, AutoSize and Align vertically. 

The extension section offers unique properties for some components. You can set even more component styles and effects. 

Basic Operations

For most elements, you will be able to: Align middle, Align top, Align bottom, Distribute horizontally, Distribute vertically. This section shows the name of the component you have selected. There are three buttons: “Hide,” “Disable,” and “Lock.”

"W" and “H” represents the width and height of the selected component. "X" and "Y" stands for the component's position in the workspace. The Lock icon in the middle enables you to lock the aspect ratio. Once clicked, the width and height of the component can only be adjusted at a fixed aspect ratio. Mockplus also offers "Responsive layout." Check "Responsive layout" to learn more about this feature.

Eyedropper tool

Mockplus RP supports for Eyedropper tool to help you set the color properties (like the fill color, background color, text color and so on) of any component. You can easily use the tool to pick a color from the current editing screen of Mockplus RP in one click.
Please note: This tool only works on Chrome at the aid of a Mockplus plugin. So, to use the tool, you need to open your Chrome browser, download and install the Mockplus plugin in advance.

Download and Install Plugin 

First, download the plugin here and unpack the plugin package.
(Note that you should delete the old version after you've downloaded and installed a new version of the plugin. Otherwise, they may conflict with each other and become unworkable.)And then, open your Chrome browser and click More > More tools > Extensions.

Click "Load unpacked" and select the unpacked plugin package.( Note that you are supposed to select the package, not the file inside the package, to go on. ) 

Now the plugin is installed successfully. You can go to use the Eyedropper tool freely.

Previous Assets