The Cube-UI has been updated a lot recently, has a lot of new features, and includes many components that are commonly used on mobile:

  • Toolbar
  • TabBar
  • Checker
  • ImagePreview
  • Sticky
  • ScrollNavBar
  • ScrollNav
  • RecycleList

Module:

  • The Locale internationalization
  • Create-api was split into a separate NPM package called VUe-create-API

Toolbar

Toolbars are common toolbars, where each option can have its own behavior, and more modes are supported to allow for less-priority actions in mobile scenarios.

For more details, please visit the official documentation.

TabBar

A TabBar can be a collection of independent tabs that respond to the currently selected Tab. Of course, if you have more responsible layout requirements, you can also support the use of slots.

Of course, many times TabBarPanels need to be used together, as in the following scenario:

This will allow the Panels on the top Tab to be linked to the Panels on the bottom.

With the flexibility of TabBar, it can also be used in combination with Slide and Scroll to achieve the following common interaction effects:

Of course, in the scenario of e-commerce, it is easy to have the demand of ScrollTab, just need to combine TabBar and Scroll:

For more details, please refer to the official documentation.

Checker

Checker is a more flexible selection of components that allow you to customize your desired layout style.

It can be useful in custom selection scenarios, see the official documentation for details.

ImagePreview

Image preview, a common component, supports two-finger zoom, double click to enlarge (shrink) the picture.

In special scenarios, you can still choose to use slots for your business needs:

See the official documentation for details.

Sticky

The adsorption component is a very powerful component. It can be used not only with the Scroll component, but also with the original Scroll effect to achieve various adsorption effects, not only single adsorption, but also multiple consecutive adsorption effects. The most basic adsorption effect is similar to the effect of the IndexList.

Of course, there are also some unique scenes, such as the effect of wechat moments, which may involve the effect of “gradient” adsorption, in which the style changes as you scroll.

Details can be found in the official documentation.

ScrollNavBar

Scroll navigation bar component, this effect is similar to the existing didi Passenger WebApp top guide effect, of course, can also be changed to the vertical mode through Prop:

If you have selected an item, it will scroll to the center automatically. For details, go to the official document.

ScrollNav

The rolling navigation component, which is commonly used in takeout scenes or e-mart scenes, automatically achieves the effect of location association. The component itself is a composite component that combines Sticky and ScrollNavBar mentioned above.

There is also a vertical effect, which is more common:

Those interested can check out the official documentation.

RecycleList

Retrievable scrolling lists, useful when dealing with lists with large contents, default mode is infinite scrolling to load more modes:

Of course, depending on the actual scenario, we might have another mode, like infinite scroll mode, which requires a tombstone element to populate a list item with no data, like this:

For more details, please refer to the official documentation.

Locale

In the latest version, we also support the ability to internationalize, with built-in Chinese and English language packs, allowing developers to customize their own language packs.

In addition to the default language pack capabilities, it also references Vue’s own interpolation and filter syntax for specific needs, such as date formatting.

For example, the default Chinese language package contains information about Validator

{
    validator: {
      // ...
      min: {
        array: 'Please select at least {{config}} items'.date: 'please select {{config | toLocaleDateString (" on dd MM yyyy years ")}} after time',}}}Copy the code

create-api

This was also covered in the previous article and is mainly used to implement API-style invocation (instantiation) of components and provides support for a “singleton” pattern (on the same invocation context instance).

Now consider the expiration of the common capability, currently maintained as a separate repository, vue-create-API, detailed usage can be directly refer to the GitHub documentation.

Looking forward to

At present, Cube-UI has gone through many iterations, and many new components have been added with the feedback from the community. In retrospect, we found that there are many things we could have done better, so in the near future, we will reorganize and summarize, and also absorb, explore and explore more and better solutions to prepare for version 2.0. It still offers a reliable, highly experienced, standardized, and scalable component, but a more powerful, easy-to-use, and eco-friendly version.