Bifrost UI (BUI)

Bifrost UI (BUI) is a cross-platform component library designed to bridge the gap between H5 (Web) and Mini-programs. It provides a unified solution for cross-platform development, allowing developers to use the same components across different environments.

Key Features

• Multi-platform Adaptation: Universal components compatible with both Web and Mini-programs.
• TypeScript Support: Developed with TypeScript for static type checking and improved developer experience.
• Customizable Themes: Supports theme customization to match your brand.
• On-demand Loading: Supports tree-shaking/on-demand imports to keep bundle sizes small.
• High Quality Components: Includes 40+ high-quality, mobile-first components.
• Flexible Composition: Components are designed to be encapsulated flexibly for various usage scenarios.
• Stability: High unit test coverage (>90%).

The Picker component provides a collection of multiple options for users to select a single item.

Important UX Note: Users are not allowed to confirm and close the picker while it is in the middle of an inertial scroll (momentum scrolling).

The Toast component provides lightweight, semi-transparent black notifications used for displaying operation results or status updates. It supports several predefined types: Toast, Toast.warning, Toast.loading, Toast.success, and Toast.fail.

Important Recommendation: Use the Hooks-based approach (Toast.useToast) instead of static methods. Static methods cannot access the component context, meaning ThemeProvider data will not be applied to them. Using Toast.useToast allows you to create a contextHolder that respects your application's theme and context.

The Select component is a basic input used to collect information from users by providing a list of options.

Note: The current implementation only supports single selection. Multi-selection features are planned for future releases.

The Select component is used to collect information from a user via a dropdown list of options.

Note: Currently, the Select component only supports single selection. Multi-select functionality is not yet available.

The Tabs component is used for switching between different content views. It works in conjunction with Tab (for defining individual tabs) and TabPanel (for defining the content associated with each tab).

Platform Differences

• Mini-program vs H5:
  • In Mini-programs, the bottom line of the active tab uses a gradient animation, whereas H5 uses a movement animation.
  • In Mini-programs, if tabs exceed the scrollable width, clicking a tab will not automatically center it in the view.