Built-in Modes

Web Mode

import ModeWeb from '@ptahjs/creative-vue-mode-web';

Usage

ptah.$mode(ModeWeb);

Description

Web mode is primarily designed for desktop web applications, providing powerful visual editing features. Users can quickly build complex interactive pages by dragging and dropping components. This mode supports nesting and arranging various UI components, making it suitable for building responsive and highly interactive pages.

Features:

• Provides intuitive drag-and-drop and nesting functionality for UI components
• Supports responsive layout to adapt to different screen sizes
• Suitable for complex interactive scenarios such as web-based large-screen displays and management systems

Mobile Mode

import ModeMobile from '@ptahjs/creative-vue-mode-mobile';

Usage

ptah.$mode(ModeMobile);

Description

Mobile mode is designed specifically for mobile applications. It optimizes touch interaction and small screen displays, offering drag-and-drop and nesting functionality to help users quickly build mobile interfaces. This mode is suitable for developing mobile web pages, app pages, etc., and is compatible with various smartphones and tablets.

Features:

• Optimized for mobile screens, providing smooth touch operations
• Supports drag-and-drop and nesting of components, improving development efficiency
• Ideal for quickly building mobile app interfaces

Canvas Mode

import ModeCanvas from '@ptahjs/creative-vue-mode-canvas';

Usage

ptah.$mode(ModeCanvas);

Description

Canvas mode provides web-based canvas visualization functionality, allowing users to freely layout components on the canvas through drag, drop, and zoom operations. This mode is mainly suited for scenarios like graphic design, flowchart creation, and visual editing, supporting various custom styles and interactive effects.

Features:

• Provides flexible drag-and-drop and zooming operations
• Suitable for visual needs such as graphics, flowcharts, and more
• Supports free layout and custom styles

Flow Mode

import ModeFlow from '@ptahjs/creative-vue-mode-flow';

Usage

ptah.$mode(ModeFlow);

Description

Flow mode is focused on simple flowchart visualization. Users can easily build flowcharts by dragging and dropping components, making it ideal for scenarios like workflows, business processes, and data flows. This mode emphasizes simplicity and is well-suited for applications that require quick flowchart creation.

Features:

• Intuitive flowchart design and management functionality
• Supports dragging and connecting flow nodes to quickly build complex flows
• Ideal for business processes, charting, and workflow management

3D Mode

import Mode3D from '@ptahjs/creative-vue-mode-3d';

Usage

ptah.$mode(Mode3D);

Description

3D mode is designed specifically for web-based 3D visualization. Users can freely drag, rotate, and zoom components within a 3D space to create rich and immersive 3D interactive interfaces. This mode is suitable for 3D presentations, virtual reality, game development, and other related scenarios.

Features:

• Provides extensive 3D space operations, including drag, zoom, and rotation
• Supports the display of 3D models, scenes, and dynamic effects
• Ideal for game development, virtual reality, product presentations, and more