1. Project Overview

Cube-UI is a refined mobile component library built with Vue.js.

2. Open Source License

Licensed under Apache-2.0

3. Screenshots

4. Feature Overview

Features

• Reliable Quality
• Derived and refined from Didi's internal component library, it has undergone more than a year of real-world business testing. Each component also has comprehensive unit tests to ensure reliable integration.
• Exceptional Experience
• Designed for rapid response, smooth animations, and a native-like experience, it pursues excellence in interaction.
• Standardized Specifications
• Follows unified design and interaction standards, closely reproducing design specifications. Its standardized APIs provide consistent usage conventions, making development simpler and more efficient.
• Highly Extensible
• Supports on-demand imports and post-compilation, making it lightweight and flexible. Its strong extensibility makes it easy to build customized solutions based on existing components.

Components

Basic

• Button
• Loading
• Tip
• Toolbar
• TabBar

Forms

• Checkbox
• CheckboxGroup
• Radio
• Input
• Textarea
• Select
• Switch
• Rate
• Validator
• Upload
• Form

Overlay Components

• Popup
• Toast
• Picker
• CascadePicker
• DatePicker
• TimePicker
• SegmentPicker
• Dialog
• ActionSheet
• Drawer
• ImagePreview

5. Tech Stack

Most overlay components can be used through either component invocation or API invocation. Let's look at an example (using Toast as an example):

Component invocation:

<template>
  <cube-button @click="showToast">show toast</cube-button>
  <cube-toast ref="toast" :txt="toastTxt"></cube-toast>
</template>
<script>
  export default {
    data() {
      return {
        toastTxt: 'toast content'
      }
    },
    methods: {
      showToast() {
        this.$refs.toast.show()
      }
    }
  }
</script>

API invocation:

<template>
  <cube-button @click="showToast">show toast</cube-button>
</template>
<script>
  export default {
    data() {
      return {
        toastTxt: 'toast content'
      }
    },
    methods: {
      showToast() {
        this.$createToast({
          txt: this.toastTxt
        }).show()
      }
    }
  }
</script>

Both methods work, but we recommend the latter: calling components through the $createXxYy API. When invoked through the API, the dialog is attached to the body element. This prevents it from being affected by external styles, which can easily happen with component invocation due to styles such as transform, overflow and other outer-layer styles.

Note that the name of this API is formed by combining:$create + ${ComponentName}, for example ActionSheet component, the API name is $createActionSheet。

Scrolling

• Scroll
• Slide
• IndexList
• Swipe
• Sticky
• ScrollNavBar
• ScrollNav

Scrolling components are generally implemented based on better-scroll, and the Scroll component is a wrapper around better-scroll.

Module

In addition to components, cube-ui also provides several special modules.

style

For styles, if you are using on-demand imports, we recommend importing this module in your entry file as well, because it includes basic reset styles, common styles, and built-in icons.

See the style module for details.

create-api

In some cases, developers may also need to support API-style invocation for their own custom components. This can be achieved by importing the create-api module or using the global Cube.createAPI API.

See the create-api module for details.

better-scroll

better-scroll is a library that the component library depends on. To avoid duplicate imports, we expose this module.

See the better-scroll module for details.