DOCSEARCHbyAlgolia
Submit Docs

FineUI Documentation

website·Indexed 31 days ago

https://fanruan.design/

A UI framework and component library featuring a system of abstract widgets, layout engines (bi.horizontal, bi.vertical, bi.grid), and specialized components like Pager, ColorChooser, and various charts. It includes support for Vue integration, Composition API, webpack plugins for worker bundling, and customizable styling via Less variables.

Tokens
710.5K
Snippets
3.3K
Records
4.1K
Agent score
50%

What's inside FineUI

  1. Overview of the Bubble widget

    The bi.bubble widget implements a popup logic where clicking a trigger element displays a popup. Unlike the Dropdown widget, Bubbles do not disappear automatically and typically include a directional arrow (triangle). Due to performance considerations, it is recommended to use the Dropdown widget if the functionality can be handled by it. Positioning is controlled via the placement property rather than direction.

  2. Overview of the bi.bubble widget

    The bi.bubble widget implements dropdown-like logic where clicking a trigger element opens a popup. Unlike standard dropdowns, bubbles do not disappear automatically, which may impact performance. Key characteristics include the use of the placement property for positioning (instead of direction) and the inclusion of a default dropdown arrow (triangle).

  3. Overview of Static vs Dynamic Layout Components

    Static layouts (also known as absolute layouts) are a subset of dynamic layouts. While dynamic layouts offer more flexibility, static layouts generally provide better performance because they calculate precise left, right, top, and bottom values for child elements using position: absolute.

    Comparison Mapping:

    Layout GoalDynamic ComponentStatic ComponentFlex Component
    Horizontalbi.horizontalbi.htapebi.flex_horizontal
    Verticalbi.verticalbi.vtapebi.flex_vertical
    Horizontal Centerbi.horizontal_adaptbi.absolute_horizontal_adaptbi.flex_horizontal_adapt
    Vertical Centerbi.vertical_adaptbi.absolute_vertical_adaptbi.flex_vertical_adapt
    Center (Both)bi.center_adaptbi.absolute_center_adapt (Single child only)bi.flex_center_adapt
    Right Vertical Centerbi.right_vertical_adaptbi.absolute_right_vertical_adaptbi.flex_vertical_adapt (with horizontalAlign="right")
    Left/Right Vertical Centerbi.left_right_vertical_adaptbi.absolute_left_right_vertical_adaptbi.flex_left_right_vertical_adapt

  4. Overview of the Fix responsive data flow framework

    Fix is a responsive data flow framework designed for simplicity. Unlike Redux, which utilizes multiple concepts like Store, Action, and Reducer, Fix focuses on only two primary concepts: responsive data and Models. It implements a single data flow architecture.

  5. Overview of Multi-functional Table Component

    The bi.components.table is a high-performance table component implemented using a virtual list tree and position: sticky for layout. It is designed to handle large volumes of data while maintaining responsiveness. Key features include:

    • Support for large datasets
    • Expandable/collapsible tree structures
    • Adjustable column widths and adaptive sizing
    • Frozen headers and columns
    • Drag-and-drop sorting
    • Selection and 'select all' functionality

  6. Overview of Static vs Dynamic Layout Components

    Static layouts (also known as absolute layouts) are a subset of dynamic layouts. While dynamic layouts offer more flexibility, static layouts provide the best performance because they calculate precise left, right, top, and bottom values for child elements using position: absolute.

    Comparison Mapping:

    Layout GoalDynamic ComponentStatic ComponentFlex Component
    Horizontalbi.horizontalbi.htapebi.flex_horizontal
    Verticalbi.verticalbi.vtapebi.flex_vertical
    Horizontal Centerbi.horizontal_adapt (1 child) / bi.vtape (multi)bi.absolute_horizontal_adaptbi.flex_horizontal_adapt
    Vertical Centerbi.vertical_adaptbi.absolute_vertical_adaptbi.flex_vertical_adapt
    Center (Both)bi.center_adaptbi.absolute_center_adapt (1 child only)bi.flex_center_adapt
    Right Vertical Centerbi.right_vertical_adaptbi.absolute_right_vertical_adaptbi.flex_vertical_adapt (with horizontalAlign="right")
    Left/Right Vertical Centerbi.left_right_vertical_adaptbi.absolute_left_right_vertical_adaptbi.flex_left_right_vertical_adapt

  7. Overview of VirtualGroupList component

    The bi.virtual_group_list component is designed for scenarios where a list has a large number of items and requires dynamic rendering of the visible area to maintain performance. It combines the high-performance loading characteristics of dynamic lists with the virtual-dom diffing mechanism for efficient updates during refreshes.

    Constraint: This component can only be used in lists where height can be accumulated. It is not suitable for layouts with variable widths (e.g., certain left-side layouts) because it needs to know the position of previous elements when scrolling back up.

  8. Overview of VirtualGroupList component

    The bi.virtual_group_list component is used for scenarios with a large number of list items that require dynamic rendering of the visible area to maintain performance. Unlike standard lists, it implements a virtual-dom diff mechanism during refreshes to optimize updates.

    Constraint: This component can only be used in lists where height is additive. It cannot be used in layouts with variable widths (e.g., certain left-side layouts) because it needs to track element position information when scrolling back up.

  9. Overview of FineUI Framework

    FineUI is a comprehensive solution for building user interfaces, consisting of three main pillars:

    1. View Layer Framework: Focuses on page composition and customization using a view syntax, removing the need for manual layout code and browser compatibility handling.
    2. Data Flow Framework: Separates view from state, inspired by Vue's reactive system.
    3. Enterprise Component Library: A set of pre-built components specifically designed for enterprise-level applications.

    Key Features:

    • Agile Development: Rapidly build UIs for fast-paced scenarios.
    • Rich Components: Extensive library of components for various business needs.
    • Layout Optimization: Built-in layout components with cross-browser compatibility.
    • AOP Design: Uses aspect-oriented design for non-invasive operations like event tracking (埋点).
    • Browser Support: Supports IE9 and all modern browsers.

  10. Overview of the Multi-functional Table component

    The bi.components.table is a high-performance table component implemented using a virtual list tree and position: sticky for layout. It is designed to handle large volumes of data while maintaining responsiveness.

  11. Overview of the Fix responsive data flow framework

    Fix is a responsive data flow framework designed for simplicity. Unlike Redux, which utilizes Store, Action, and Reducer concepts, Fix relies on only two primary concepts: responsive data and the Model. It features a single data flow architecture and is fully responsive.

  12. Overview of FineUI

    FineUI is a comprehensive solution for building user interfaces, consisting of three core pillars:

    1. View Layer Framework: Focuses on page composition and customization using a view syntax, eliminating the need for manual layout code and browser compatibility handling.
    2. Data Flow Framework: Separates view from state, inspired by Vue's reactive system.
    3. Component Library: A set of pre-built components specifically designed for enterprise-level applications.

    Key features include rapid UI construction for agile development, robust layout components with built-in browser optimization, and a non-invasive AOP-based design for telemetry/tracking (埋点).