idux UI Component Library

The Layout component in @idux/pro is designed to render navigation layouts based on a user-provided navigation tree. It provides a structured way to display navigation structures with built-in interactivity between different navigation elements.

Key features include:

• Tree-driven rendering: The layout is generated directly from a navigation tree structure.
• Four layout modes: Supports four distinct navigation layout patterns with built-in linkage/coordination between them.
• Theming: Supports two different themes.
• Collapsible controls: Includes built-in controllers to collapse or expand navigation areas.
• Customizable regions: Allows for custom content in specific areas, such as a custom logo.

@idux is an enterprise-level UI component library for mid-to-back-office applications, built on Vue 3.x and TypeScript.

Key Features

• Composition API: Fully embraces the Vue 3 Composition API from source code to documentation.
• TypeScript: Developed entirely with TypeScript, providing complete type definitions.
• Monorepo Structure: Organized into three main packages:
  • @idux/cdk: Component Development Kit.
  • @idux/components: Core component library.
  • @idux/pro: Pro-level components/features.
• Customization: Supports flexible global configuration, deep theme customization, and internationalization (i18n).

Environment Support

• Vue: Requires ^3.0.0.
• Browsers:
  • Edge: 79+
  • Chrome: 79+
  • Firefox: 72+
  • Safari: 13.1+
  • Electron: 10+

The Time Picker is a control used to select a specific time or a time range via a pop-up panel. It facilitates time input through both manual typing and interactive panel selection.

Component Structure

• Time Selection Box: Displays the selected time or a placeholder (e.g., "Please select time") if no value is set.
• Time Input Field: Allows manual entry of time. Input is restricted to numeric characters only; other symbols are disallowed.
• Time Panel: An interactive panel where clicking numbers updates the input field. It supports scrollbars for 'Hour', 'Minute', and 'Second' areas, and supports mouse wheel scrolling to adjust values in the input field.

The @idux/cdk/drag-drop package provides a suite of utilities for implementing drag-and-drop functionality. It supports basic operations such as free dragging and list reordering.

Key capabilities include:

• Dual Implementation Modes: Supports both native drag-and-drop events and simulated drag-and-drop implementations.
• Touch Support: Built-in support for drag operations on touchscreens.
• Lightweight Integration: Designed to allow developers to implement custom drag behaviors without needing heavy third-party libraries, helping to keep bundle sizes small.

The Slider is a sliding input component that displays the current value and the available range.

Recommended Use Cases

• High-density numerical selection: When there are many data points and high precision is not strictly required (e.g., allocating bandwidth).
• Percentage-based selection: When users care more about the relative distance (percentage) between the selected value and the minimum/maximum bounds (e.g., a zoom scale from 10% to 400%).

The IxProTree component is part of the @idux/pro package. It is a professional-grade tree component designed for complex data structures.

Note: While the component supports global configuration, specific property and slot details are managed via the ProTreeProps and ProTreeSlots interfaces. Use the component within your Vue templates to render hierarchical data.

The Progress component provides feedback on the execution status of ongoing tasks to reduce user anxiety during wait times. It is available in three main types:

• Standard Progress Bar (标准进度条): The most common form. Variations include basic progress bars, progress bars with numeric values, and progress bars with icons.
• Circular Progress Bar (环形进度条): Includes basic, numeric, and icon-based versions. These occupy more space than standard bars but offer stronger visual impact. They are ideal for displaying multiple metrics of a project when space allows.
• Mini Progress Bar (微型进度条): Specifically designed for small-scale feedback, such as indicating image upload progress.

The Skeleton component provides a placeholder UI in locations where data loading is expected. It is used to improve perceived performance by showing a visual representation of the content structure before the actual data arrives.

Recommended usage scenarios:

• When network speeds are slow and users must wait for data processing.
• In lists or cards containing significant amounts of text and image content.
• Primarily during the initial data load (first-time loading).