search
HomeWeb Front-endHTML TutorialEasily master commonly used interactive components

Easily master commonly used interactive components

Jun 30, 2017 am 10:07 AM
interactionCommonly usedcomponents

Prototype design is inseparable from components. If the prototype is a house, then the components are cement and bricks. This article will introduce you to the eight most commonly used interactive components. Open Mockplus and try it now!

1. Pop-up menu

Pop-up menu is the most commonly used component in prototype design. Many components are used similarly to it. Proficient use of pop-up menu will bring you great help. . Next, let's take a look at how to use pop-up menus from a practical case.

1. Drag out a component at will. Here we take the button component in Mockplus as an example.

2. Drag out the pop-up menu component and connect the link point in the upper right corner of the button to the menu component.

3. Double-click the pop-up menu to edit the menu location and content.

2. Pop-up windows

Operations of pop-up windows and pop-up panels The steps are basically the same. The difference is that the four menu items of the pop-up menu can all be set for interactive actions, while the pop-up window only has two options of "Yes" and "No" for setting interactive actions. At the same time, the format of the pop-up window content is also the same as The popup panel is slightly different.

3. Drawer

The drawer is a commonly used container component , which is characterized by high encapsulation, high adjustability, and high accommodation. In other words, you don’t need to design the details of the drawer yourself. You only need to set it up in a few simple settings to create a drawer that slides out in a variety of ways and can be loaded in. Drawers for most components.

After connecting the link point of the button to the drawer, double-click the drawer icon to add the component.

4. Picture carousel

Number of picture carousel components supported The random rotation and display of pictures is also easy to operate. First drag the picture carousel component into the workspace and double-click to add pictures.

5. Panel

The panel is actually a component that can be placed container.

Drag the capacity panel to the required place, adjust the size, double-click to enter the editing mode, and drag in the required components. Note that components outside the panel boundaries will not be displayed. You will find that: because it is a container, the panel has a border, and the part of the subcomponent that exceeds the border will be "cut off". Another interesting thing is: unlike "Group", when setting up interaction, you can use sub-components in the panel as the interaction target, but "Group" cannot, you can only set the entire group as the interaction target, because a group is a group of several components. After being formed and grouped, they are regarded as a whole.

6. Pop-up panel

The pop-up panel is the most flexible interaction components. Drag a pop-up panel and double-click to open it. You will find that there is nothing in it, but using it, we can create the required pop-up windows, message boxes, prompt boxes and many other interactive components.

7. Content Panel

The content panel is mainly used to achieve quick switching of content. But it is generally not used alone. You can use it to cooperate with menu bars, lists, tabs and other components with multi-select properties to complete content switching.

First set up three layers in the content panel and connect them to the three target pages. Then connect the links on the tab to the three layers one by one, and the content switching is completed.

8. Scroll Area

When the screen size is not enough to accommodate us When we need to display more content, we can use the scroll area component to display more content in a limited space.

Drag the scroll area component into the workspace, adjust the size, and then double-click to enter editing mode. In the editing mode, drag in the components that need to be added to the scroll area. Click "+" to expand the size of the scroll area. Click "-" to shrink the size of the scroll area. If you press the Ctrl key at the same time, the expansion or contraction can be accelerated.

Interaction is a very important part of prototype design. Flexible use of the above eight interactive components is enough to meet your commonly used interaction designs! In addition to interactive components, there are nearly two hundred encapsulated components in Mockplus. Try it now!

The above is the detailed content of Easily master commonly used interactive components. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Are the HTML tags and elements the same thing?Are the HTML tags and elements the same thing?Apr 28, 2025 pm 05:44 PM

The article explains that HTML tags are syntax markers used to define elements, while elements are complete units including tags and content. They work together to structure webpages.Character count: 159

What is the significance of <head> and <body> tag in HTML?What is the significance of <head> and <body> tag in HTML?Apr 28, 2025 pm 05:43 PM

The article discusses the roles of <head> and <body> tags in HTML, their impact on user experience, and SEO implications. Proper structuring enhances website functionality and search engine optimization.

What is the difference between <strong>, <b> tags and <em>, <i> tags?What is the difference between <strong>, <b> tags and <em>, <i> tags?Apr 28, 2025 pm 05:42 PM

The article discusses the differences between HTML tags , , , and , focusing on their semantic vs. presentational uses and their impact on SEO and accessibility.

Please explain how to indicate the character set being used by a document in HTML?Please explain how to indicate the character set being used by a document in HTML?Apr 28, 2025 pm 05:41 PM

Article discusses specifying character encoding in HTML, focusing on UTF-8. Main issue: ensuring correct display of text, preventing garbled characters, and enhancing SEO and accessibility.

What are the various formatting tags in HTML?What are the various formatting tags in HTML?Apr 28, 2025 pm 05:39 PM

The article discusses various HTML formatting tags used for structuring and styling web content, emphasizing their effects on text appearance and the importance of semantic tags for accessibility and SEO.

What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?Apr 28, 2025 pm 05:39 PM

The article discusses the differences between HTML's 'id' and 'class' attributes, focusing on their uniqueness, purpose, CSS syntax, and specificity. It explains how their use impacts webpage styling and functionality, and provides best practices for

What is the 'class' attribute in HTML?What is the 'class' attribute in HTML?Apr 28, 2025 pm 05:37 PM

The article explains the HTML 'class' attribute's role in grouping elements for styling and JavaScript manipulation, contrasting it with the unique 'id' attribute.

What are different types of lists in HTML?What are different types of lists in HTML?Apr 28, 2025 pm 05:36 PM

Article discusses HTML list types: ordered (<ol>), unordered (<ul>), and description (<dl>). Focuses on creating and styling lists to enhance website design.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Atom editor mac version download

Atom editor mac version download

The most popular open source editor