Tutorial > Mockplus RP > Components > Extension Components

Extension Components

Checkbox

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

Property Settings

You can set its text styles, opacity and other properties on the right 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 be adjusted as well. 

Edit Checkbox

You can easily edit the item text simply by selecting the Checkbox and clicking "Enter".

Checkbox Group

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

Property Settings

You can set Checkbox Group text styles, opacity and other properties on the right 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

  • Set the selection state for every item by selecting the component and clicking "Enter".

  • 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 Common library to use it.

Property Settings

This component can be styled with the following properties in the right Property panel: text style, opacity, fill color, corner radius, etc. 

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

Edit Droplist

  • Set the selection state for every item by selecting the component and clicking "Enter".

  • 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. 

Radio Button

Drag the Radio Button from the left Common library to use it.

Property Settings

You can set its text styles, opacity and other properties on the right 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 be adjusted as well. 

Edit Radio Button

You can easily edit the item text by selecting the component and clicking "Enter".

Radio Button Group

Drag the Radio Button Group from the left Common library to use it.

Property Settings

You can also set its text styles, opacity and other properties on the right 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

  • Set the selection state for every item by selecting the component and clicking "Enter".

  • 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. 

List

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

Resize the compnent at an equal ratio by holding the "Shift" key.

Property Settings

This component can be styled with the following properties on the right Property panel: text style, opacity, background color,border, etc. 

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

Edit List

  • Select the component and click "Enter". Then click the front dot to set the selected state of every item easily. 

  • 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. 

Switch

Drag the Switch component from the left Common library to use it.

Resize the component at an equal ratio by holding the "Shift" key.

Property Settings

You can easily set its opacity, shadow and corner radius on the right Property panel. You can also set an "On" or "Off" state for it in the Extension section. The background color,  switch color and border color can be set there as well. 

Scope Bar

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

Resize the component at an equal ratio by holding the "Shift" key.

Property Settings 

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

Edit Scope Bar

Here is a simple guide on how to use the Scope Bar component:

  • By default, Scope Bar selects the first item automatically. If you want to change the default state, enable the editing mode by clicking "Enter" and click the front dots of these items. 

  • Edit the item texts by double clicking them in the editing mode. 

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

Tab Bar

Here is how you can use Tab bars:

  • Drag the Tab Bar component from the left Common library to use it.

  • Resize the component at an equal ratio by holding the "Shift" key.

Property Settings

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

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 the default state, enable the editing mode by clicking "Enter" and click the front dots of these items. 

  • Edit the item texts by double-clicking them in the editing mode. 

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

Numeric Stepper

The Numeric Stepper component enables you to adjust a numeric value by using up and down arrows. Click the up arrow to increase the value of the variable one by one. Click the down arrow to decrease the value of the variable one by one.

Here is how you can use this component:

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

  • Resize the component at an equal ratio by holding the "Shift" key.

Property Settings

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

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

Edit Numeric Stepper

You can easily edit its text by selecting the component and clicking "Enter".

Progress Bar

Drag the Progress Bar component from the left Common library to use it.

Resize the component at an equal ratio by holding the "Shift" key.

Property Settings

You can adjust its opacity, track color, border style and corner radius, etc, on the right Property panel. 

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

Slider

Drag the Slider component from the left Common library to use it.

Resize the component at an equal ratio by holding the "Shift" key.

Property Settings

You can set its opacity, track color and other properties on the right 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 desired number (from 0 to 100). 

Breadcrumb

You can drag the Breadcrumb component from the left Common library to use it. 

Property Settings 

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

In the "Extension" section, you can also set on-hover text styles and the color of the triangle icons, as well as the distance between different items. 

Edit Breadcrumb

Select the component and click "Enter" to enable editing mode. After that, you are able to:

  • Reorder items by dragging them directly or clicking up and down arrows. 

  • Add or delete items as you need. 

  • Double click items to edit their texts. 

Progress View

Drag the Progress View component from the left Common library to use it.

Resize the component. It can be adjusted at an equal ratio by default.

Property Settings

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

  • Set the track color and progress color in the "Extension" section. 

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

Rating Bar

Drag the Rating Bar component from the left Common library to use it. 

Property Settings

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

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

Edit Star Rating

Select the component and click "Enter" state to enable editing mode. After that, you are able to:

  • Tick or untick an item to set the fill state for the rating stars. 

  • Reorder rating stars by dragging them directly or clicking up and down arrows. 

  • Delete or add stars based on your needs. 

Video

Drag the Video component from the left Common library to use it. 

Resize the component freely as you wish. It can be adjusted at an equal ratio by default. 

Property Settings

  • Set the opacity and other properties on the right 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 local drive. 

When uploading videos, you can choose to "Keep original size" or not. 

QR Code

Drag the QR Code component from the left Common library to use it. 

Resize the component according to your needs. It can be adjusted at an equal ratio by default. 

Property Settings

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

  • Set the background color 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. 

By doing that, you can easily go to the external link page—by scanning the QR code while previewing projects.

Keyboard

Drag the Keyboard component from the left Common library to use it.

Adjust the keyboard size according to your needs. You can also hold the "Shift" key to adjust it at an equal ratio. 

Property Settings

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

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

Keyboard Types

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

Hotspot

A hotspot is a special component made of vector paths which is completely invisible during preview mode, and 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 path editing mode. Through path adjustment, you can change hotspot into the shape you want.
  • The hotspot component supports Boolean operations, cutting, and path opening/closing .

Hotspot Properties

Most properties of hotspot are not editable, but you can still adjust its transparency, angles ,etc, in the properties panel.

Next Icons