search
HomeWeb Front-endHTML TutorialEasily master commonly used interactive components
Easily master commonly used interactive componentsJun 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
VUE3开发基础:使用extends继承组件VUE3开发基础:使用extends继承组件Jun 16, 2023 am 08:58 AM

Vue是目前最流行的前端框架之一,而VUE3则是Vue框架的最新版本,相较于VUE2,VUE3具备了更高的性能和更出色的开发体验,成为了众多开发者的首选。在VUE3中,使用extends继承组件是一个非常实用的开发方式,本文将为大家介绍如何使用extends继承组件。extends是什么?在Vue中,extends是一个非常实用的属性,它可以用于子组件继承父

如何使用 Vue 实现日历组件?如何使用 Vue 实现日历组件?Jun 25, 2023 pm 01:28 PM

Vue是一款非常流行的前端框架,它提供了很多工具和功能,如组件化、数据绑定、事件处理等,能够帮助开发者构建出高效、灵活和易维护的Web应用程序。在这篇文章中,我来介绍如何使用Vue实现一个日历组件。1、需求分析首先,我们需要分析一下这个日历组件的需求。一个基本的日历应该具备以下功能:展示当前月份的日历页面;支持切换到前一月或下一月;支持点击某一天,

聊聊Vue怎么通过JSX动态渲染组件聊聊Vue怎么通过JSX动态渲染组件Dec 05, 2022 pm 06:52 PM

Vue怎么通过JSX动态渲染组件?下面本篇文章给大家介绍一下Vue高效通过JSX动态渲染组件的方法,希望对大家有所帮助!

VSCode插件分享:一个实时预览Vue/React组件的插件VSCode插件分享:一个实时预览Vue/React组件的插件Mar 17, 2022 pm 08:07 PM

在VSCode中开发Vue/React组件时,怎么实时预览组件?本篇文章就给大家分享一个VSCode 中实时预览Vue/React组件的插件,希望对大家有所帮助!

如何使用 Vue 实现仿照片墙组件?如何使用 Vue 实现仿照片墙组件?Jun 25, 2023 am 08:19 AM

在现代Web开发中,组件化是一个极受欢迎的开发模式。而Vue.js则是一个非常适合组件化的前端框架。在这篇文章中,我们将介绍如何使用Vue.js创建一个仿照片墙组件。在开始之前,我们需要明确一些准备工作。首先,我们需要安装Vue.js。安装的方法非常简单,只需在终端中输入以下命令:npminstallvue安装完成后,我们可以创建一个名为

VUE3开发入门教程:使用组件实现分页VUE3开发入门教程:使用组件实现分页Jun 16, 2023 am 08:48 AM

VUE3开发入门教程:使用组件实现分页分页是一个常见的需求,因为在实际开发中,我们往往需要将大量的数据分成若干页以展示给用户。在VUE3开发中,可以通过使用组件实现分页功能,本文将介绍如何使用组件实现简单的分页功能。1.创建组件首先,我们需要创建一个分页组件,使用“vuecreate”命令创建VUE项目,并在src/components目录下创建Pagin

Vue 中如何实现分页组件?Vue 中如何实现分页组件?Jun 25, 2023 am 08:23 AM

Vue是一款优秀的前端框架,在处理大量数据时,分页组件是必不可少的。分页组件可以使页面更加整洁,同时也可以提高用户体验。在Vue中,实现一个分页组件并不复杂,本文将介绍Vue如何实现分页组件。一、需求分析在实现分页组件前,我们需要对需求进行分析。一个基本的分页组件需要具有以下功能:展示当前页数、总页数以及每页展示条数点击分页按钮可以切换至不同页数展示当前页

VUE3初学者入门:使用Vue.js组件组合实现可复用组合VUE3初学者入门:使用Vue.js组件组合实现可复用组合Jun 15, 2023 pm 08:53 PM

Vue.js是一款流行的前端JavaScript框架,它提供了一种简单易用的方式来构建动态网页应用程序。Vue.js的主要特点是其模块化的设计和可插拔的组件系统。这使得开发者可以轻松地创建可复用的组件,从而提高了应用程序的重用性和可维护性。在本文中,我们将重点介绍VUE3初学者如何使用Vue.js组件组合实现可复用组合。Vue.js组件是一个完整的封装元素,

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

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

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

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Atom editor mac version download

Atom editor mac version download

The most popular open source editor