Integration and customization of ColorUI

Introduction to ColorUI

ColorUI is a CSS3-based UI component library specifically designed for WeChat Mini Programs but also suitable for cross-platform frameworks like uni-app. It offers a rich set of preset styles and components, including buttons, cards, navigation bars, form elements, and more, with high customizability. The design style of ColorUI leans toward modernity, featuring vibrant colors and smooth animations, enabling the rapid development of visually impressive mobile applications.

Integrating ColorUI into uni-app

Downloading and Importing

First, download the latest version of the style files from ColorUI's official GitHub repository. These typically include two core files: colorui.css and icon.css. Place these files in the static directory of your uni-app project, such as static/colorui/.

In the <style> tag of App.vue, globally import the ColorUI styles:

@import "/static/colorui/colorui.css";
@import "/static/colorui/icon.css";

Configuring the Base Path

Since some ColorUI styles use relative paths to reference font and image resources, configure the publicPath in vue.config.js:

module.exports = {
  publicPath: './'
}

Using Basic Components

Most ColorUI components are implemented via CSS classes. For example, to create a button:

<button class="cu-btn bg-blue round">Blue Rounded Button</button>

Customizing ColorUI Styles

Modifying Theme Colors

ColorUI's theme colors are defined via CSS variables, which can be overridden in App.vue:

:root {
  --blue: #0081ff;
  --red: #f54d4f;
  /* Other color variables... */
}

Extending Custom Styles

Create additional style files to extend ColorUI. For example, add a new button style:

.cu-btn.custom-btn {
  background-image: linear-gradient(45deg, #ff0080, #ff8a00);
  box-shadow: 0 4px 15px rgba(255, 0, 128, 0.3);
}

Then use it in a component:

<button class="cu-btn custom-btn">Gradient Button</button>

Combining with uni-app Components

Encapsulating ColorUI Components

To better utilize ColorUI in uni-app, encapsulate commonly used components. For example, encapsulate a dialog component:

<template>
  <view class="cu-modal" :class="{'show': visible}">
    <view class="cu-dialog">
      <view class="cu-bar bg-white justify-end">
        <view class="content">{{ title }}</view>
        <view class="action" @tap="close">
          <text class="cuIcon-close text-red"></text>
        </view>
      </view>
      <view class="padding-xl">
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: String,
    visible: Boolean
  },
  methods: {
    close() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

Combining with uni-ui

ColorUI can be used alongside uni-ui. For example, apply ColorUI styles to uni-list:

<uni-list>
  <uni-list-item class="cu-item arrow" title="List Item 1" />
  <uni-list-item class="cu-item arrow" title="List Item 2" />
</uni-list>

Advanced Customization Techniques

Dynamic Theme Switching

Implement dynamic theme switching using JavaScript:

function changeTheme(theme) {
  const root = document.documentElement
  if (theme === 'dark') {
    root.style.setProperty('--main-bg-color', '#1a1a1a')
    root.style.setProperty('--text-color', '#ffffff')
  } else {
    root.style.setProperty('--main-bg-color', '#ffffff')
    root.style.setProperty('--text-color', '#333333')
  }
}

Custom Animation Effects

Create custom animations using ColorUI's animation classes:

@keyframes custom-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.custom-animate {
  animation: custom-bounce 1s infinite;
}

Performance Optimization Recommendations

On-Demand Style Importing

If project size is a concern, import only the necessary styles. Edit the colorui.css file to remove unused component styles.

Streamlining the Icon Library

The icon.css file contains many icons. Retain only the icon classes needed for your project to reduce file size.

Using CSS Compression Tools

Compress the final CSS file using tools like PostCSS:

// postcss.config.js
module.exports = {
  plugins: [
    require('cssnano')({
      preset: 'default',
    }),
  ],
}

Troubleshooting Common Issues

Icons Not Displaying

Ensure the font file paths are correct. Check the paths in the @font-face declaration in icon.css:

@font-face {
  font-family: 'cuIcon';
  src: url('/static/colorui/fonts/cuIcon.ttf') format('truetype');
}

Handling Style Conflicts

When ColorUI conflicts with other UI libraries, resolve it by increasing selector specificity:

/* Increase specificity */
body .cu-btn {
  /* Custom styles */
}

Platform-Specific Differences

On Mini Program platforms, special handling may be required, such as using rpx instead of px:

.cu-card {
  margin: 20rpx;
  padding: 30rpx;
}

Practical Application Examples

E-Commerce Homepage

Example code for building an e-commerce homepage using ColorUI:

<template>
  <view class="page">
    <!-- Search Bar -->
    <view class="cu-bar search bg-white">
      <view class="search-form round">
        <text class="cuIcon-search"></text>
        <input type="text" placeholder="Search products" confirm-type="search"/>
      </view>
    </view>
    
    <!-- Carousel -->
    <swiper class="screen-swiper" autoplay interval="3000" duration="500">
      <swiper-item v-for="(item,index) in banners" :key="index">
        <image :src="item.image" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    
    <!-- Category Icons -->
    <view class="cu-list grid col-4 no-border">
      <view class="cu-item" v-for="(item,index) in categories" :key="index">
        <view :class="['cuIcon-' + item.icon, 'text-' + item.color]"></view>
        <text>{{item.name}}</text>
      </view>
    </view>
    
    <!-- Product List -->
    <view class="cu-card dynamic">
      <view class="cu-item shadow" v-for="(item,index) in products" :key="index">
        <view class="cu-list menu-avatar">
          <view class="cu-item">
            <view class="cu-avatar round lg" :style="'background-image:url('+item.avatar+');'"></view>
            <view class="content">
              <view class="text-grey">{{item.shop}}</view>
              <view class="text-gray text-sm">{{item.time}}</view>
            </view>
          </view>
        </view>
        <view class="text-content">
          {{item.description}}
        </view>
        <view class="grid flex-sub col-3 grid-square">
          <view class="bg-img" v-for="(img,i) in item.images" :key="i" 
                :style="'background-image:url('+img+');'">
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

Form Validation Styles

Example of form validation combined with ColorUI:

<template>
  <view class="padding">
    <form @submit="submitForm">
      <view class="cu-form-group" :class="{'error': errors.username}">
        <view class="title">Username</view>
        <input placeholder="Enter username" name="username" v-model="form.username" />
        <text class="cuIcon-roundclosefill text-red" v-if="errors.username"></text>
      </view>
      <view class="cu-form-group" :class="{'error': errors.password}">
        <view class="title">Password</view>
        <input password placeholder="Enter password" name="password" v-model="form.password" />
        <text class="cuIcon-roundclosefill text-red" v-if="errors.password"></text>
      </view>
      <button class="cu-btn block bg-blue margin-tb-sm lg" form-type="submit">Login</button>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      errors: {
        username: false,
        password: false
      }
    }
  },
  methods: {
    submitForm() {
      this.errors = {
        username: !this.form.username,
        password: !this.form.password
      }
      
      if (!this.errors.username && !this.errors.password) {
        // Form submission logic
      }
    }
  }
}
</script>

<style>
.cu-form-group.error {
  border-left: 4rpx solid var(--red);
  padding-left: 20rpx;
}
</style>