Tutorial > Mockplus RP > Components > Extension Components

Extension Components

Checkbox

Drag the Checkbox from the left-hand Common library to use it in your design.

Property Settings

You can set the text styles, opacity, and other properties on the right-hand Property panel. The checkbox comes with a "Selected" state in the "Extension" section. The distance between the text and the front icon can be adjusted as well.

Edit Checkbox

You can edit the item’s text simply by double clicking the component or clicking "Enter."

Checkbox Group

Drag the Checkbox Group from the left-hand Common library to add it to your artboard.

Property Settings

You can set Checkbox Group text styles, opacity, and other properties on the right-hand Property panel. You can also style the selected texts and set the distance (between the text and the front icon) in the "Extension" section.

Edit Checkbox Group

  • To edit the Checkbox Group component, you need to enter editing mode first by double clicking the component or clicking "Enter."

    You can then adjust the details as follows:

    • Tick the checkbox in front of each item to set a default selection state.

    • Click "+" to add a new item.

    • Reorder items by dragging them directly or clicking Up and Down arrows.

  • Delete an item by clicking the trash can icon.

Droplist

Drag the Droplist from the left-hand Common library if you want to use it.

Property Settings

This component can be styled with the following properties on the right-hand Property panel: text style, opacity, fill color, corner radius, and so forth. 

You can also set the icon color, border, and other properties in the "Extension" section.

Edit Droplist

To edit the Droplist component, you need to enter the editing mode first by double clicking the component or clicking "Enter."

You can then adjust the details as follows:

  • Tick the radio button in front of each item to set a default selection state.

  • Click "+" to add a new item.

  • Reorder items by dragging them directly or clicking the Up and Down arrows.

  • Delete an item by clicking the trash can icon.

Radio Button

Drag the Radio Button from the left-hand Common library if you intend to use it.

Property Settings

You can set its text styles, opacity, and other properties on the right-hand Property panel. You can also set a "Selected" state for it in the "Extension" section. The distance between the text and the front icon can also be adjusted.

Edit Radio Button

It is easy to edit the item’s text by double clicking the component or clicking "Enter."

Radio Button Group

Drag the Radio Button Group from the left-hand Common library.

Property Settings

You can set its text styles, opacity, and other properties on the right-hand Property panel. You can also style the selected texts and set the distance (between the text and the front icon) in the "Extension" section.

Edit Radio Button Group

To edit the Radio Button Group component, you need to enter the editing mode first by double clicking the component or clicking "Enter.”

You can then adjust the details as follows:

  • Tick the radio button in front of each item to set a default selection state.

  • Click "+" to add a new item.

  • Reorder items by dragging them directly or clicking the Up and Down arrows.

  • Delete an item by clicking the trash can icon.

List

Drag the List component from the left-hand Common library to use it.

Hold "Shift" to maintain the same aspect ratio while resizing the List.

Property Settings

This component can be styled with the following properties on the right-hand Property panel: text style, opacity, background color, border, and so forth.

You can set the text padding, scrolling state, and the text styles of the selected items, in the "Extension" section.

Edit List

To edit the List component, you need to enter the editing mode first by double clicking the component or clicking "Enter.”

You can then adjust the details as follows:

  • Tick the radio button in front of each item to set a default selection state.

  • Click "+" to add a new item.

  • Reorder items by dragging them directly or clicking the Up and Down arrows.

  • Delete an item by clicking the trash can icon.

Switch

Drag the Switch component from the left-hand Common library.

Hold "Shift" to maintain the same aspect ratio while resizing the Switch.

Property Settings

You can set its opacity, shadow, and corner radius on the right-hand Property panel. You can also set "On" or "Off" states for it in the Extension section. The colors for the background, button, and border can be set there as well.

Scope Bar

Drag the Scope Bar component from the left-hand Common library to use it.

Hold "Shift" to maintain the same aspect ratio while resizing the Scope Bar.

Property Settings 

You can set the text styles and opacity of the component on the right-hand Property panel. You can also edit the text style, fill and background colors, and other properties of the item selected.

Edit Scope Bar

To edit the Scope Bar component, you need to enter the editing mode first by double clicking the component or clicking "Enter.”

You can then adjust the details as follows:

  • Tick the radio button in front of each item to set a default selection state.

  • Edit the item text by double clicking the item.

  • Add, delete, or reorder items in the same editing mode.

Tab Bar

This is how you use Tab bars:

  • Drag the Tab Bar component from the left-hand Common library.

  • Hold "Shift" to maintain the same aspect ratio while resizing the Tab Bar.

Property Settings

You can easily set the overall text styles, opacity, and fill color on the right-hand Property panel. You can also set the text style, underline, and margins around the item selected.

Edit Tab Bar

Here are some tips on how to edit the Tab Bar:

  • By default, Tab Bar selects the first item automatically. If you want to change the default item selected, enable the editing mode by clicking "Enter" and ticking the radiobox in front of these items.

  • Edit the item text by double clicking the item.

  • Add, delete, or reorder items in the editing mode.

Numeric Stepper

The Numeric Stepper component enables you to adjust a numeric value by using the Up and Down arrows. Clicking the Up arrow will increase the value of the variable by one. Clicking the Down arrow will decrease it by one.

Here is how to use this component:

  • Drag the Numeric Stepper component from the left-hand Common library.

  • Hold "Shift" to maintain the same aspect ratio while resizing the Numeric Stepper.

Property Settings

You can easily set the text styles, opacity, and fill color on the right-hand Property panel.

You can also set the color of the two triangle icons in the "Extension" section.

Edit Numeric Stepper

It is easy to edit the text; just double clicking the component or click "Enter.”

Progress Bar

Drag the Progress Bar component from the left-hand Common library.

Hold "Shift" to maintain the same aspect ratio while resizing the Progress Bar.

Property Settings

You can adjust its opacity, track color, border style, corner radius, and other settings on the right-hand Property panel.

It is also possible to set the slider color in the "Extension" section. If you want to change the current percentage value of the progress bar, click "Value" and enter the number you want (from 0 to 100).

Slider

Drag the Slider component from the left-hand Common library.

Hold "Shift" to maintain the same aspect ratio while resizing the Slider.

Property Settings

You can set its opacity, track color, and other properties on the right-hand Property panel. It is also possible to set the slider color and progress color in the "Extension" section. If you want to change the current percentage value of the slider, click "Value" and enter the number you want (from 0 to 100).

Breadcrumb

You can drag the Breadcrumb component from the left-hand Common library.

Property Settings 

You can set its overall text styles, opacity, shadow, and other properties on the right-hand Property panel.

In the "Extension" section, you can customize the hover-over text styles and icon color, as well as the gaps between different items.

Edit Breadcrumb

To edit the Breadcrumb component, you need to enter the editing mode first by selecting the component and clicking "Enter.” You can then:

  • reorder items by dragging them directly or clicking the Up and Down arrows;

  • add or delete items; and

  • double click items to edit texts.

Progress View

Drag the Progress View component from the left-hand Common library.

Resize the component. You can maintain an aspect ratio by default.

Property Settings

  • Set the opacity and other properties on the right-hand Property panel.
    • Set the track color and progress color in the "Extension" section.

  • Click "Value" and enter the number you want (from 0 to 100) to change the percentage process.

Rating Bar

Drag the Rating Bar component from the left-hand Common library.

Property Settings

  • Set the opacity and other properties on the right-hand Property panel.

  • Set the color, size, and gap between stars in the "Extension" section.

Edit Star Rating

To edit the Star Rating component, you need to enter the editing mode first by selecting the component and clicking "Enter.” You can then:

  • tick or untick an item to set the fill state for the rating stars;

  • reorder rating stars by dragging them directly or clicking the Up and Down arrows; and

  • delete or add stars according to what you need.

Video

Drag the Video component from the left-hand Common library.

Resize the component as much as you like. You can maintain an aspect ratio by default.

Property Settings

  • Set the opacity and other properties on the right-hand Property panel.

  • Choose the "Show controller" or "Autoplay" option in the "Extension" Section.

Edit Video

Select a video component and click "Enter" to upload your video from the local drive.

When uploading videos, you can choose to "Keep original size" or not. You can also select the option to "Maintain aspect ratio.”

QR Code

Drag the QR Code component from the left-hand Common library.

Resize the component as much as you need. You can maintain an aspect ratio by default.

Property Settings

  • Set the opacity and other properties on the right-hand Property panel.

  • Set the background and foreground color in the "Extension" section.

Edit QR Code

Click "Enter" to enable the editing mode and add an external link to the QR code.

Then, while previewing projects, an external link will be shown to take you to other web pages when the QR code is scanned.

Keyboard

Drag the Keyboard component from the left-hand Common library.

Hold "Shift" to maintain the same aspect ratio while resizing the Keyboard.

Property Settings

  • Set the opacity, background color, and shadow properties on the right-hand Property panel.

  • Set the keyboard types, text colors, and function key colors in the "Extension" section.

Keyboard Types

There are three types of keyboard available: Alphabet, Number, and Symbol.

Hotspot

A Hotspot is a special component made of vector paths which is completely invisible during preview mode. Its primary function is to act as a trigger area for interactive settings.

  • You can adjust the shape and size of a Hotspot. Hold Shift to zoom in/out the Hotspot while keeping its width/height ratio unchanged.
  • Double click Hotspot to enter the path editing mode. Through path adjustment, you can change the Hotspot into any shape you want.
  • The Hotspot component supports Boolean operations, cutting, and path opening/closing.

Hotspot Properties

Most Hotspot properties are not editable, but you can still adjust its transparency, angles, and other features on the properties panel.

Table

The Table component gives you an easy way to create data tables quickly.

Properties Settings

● Select a Table to change its properties (like opacity, border and shadow, etc.);
● Select a cell of a Table to change its properties (like text alignment, fill color and border, etc.);
● Select a column/row of a Table to set its height and width.

Edit Table

To resize Table, select the component and drag its four resize handles around.
To edit columns or rows, double click the component to enter its edit mode. You can then:
● Select a column/row and change the row's height or the column's width with drag-and-drop.
● Select a column/row and right click it to insert a column or row.

Tree

Tree components are most often used to quickly arrange your files, folders and other information into tree structures. The inner button, icon, checkbox and the other elements are fully customizable. You can freely edit its item texts and style them with simple clicks.

Properties Settings

Basic properties, like border and fill, can be changed in the Properties panel on the right.
Set the icon, checkbox and button in the "Extension" section.
Set the style of a selected item, like its background and text content, in the right Properties panel.

Edit Tree

To edit a Tree component, you need to select it and go into its edit mode by pressing "Enter" or double clicking on it. Here you can edit many properties, such as:
● Items and item text content.
● Add, delete or reorder sibling and child items.
● Adjust the order and hierarchy of items using drag-and-drop.
● Set default selection by clicking the radio button in front of the item.