website·Indexed 32 days ago
http://mp.color-ui.com/A UI component library and SDK for mini-programs featuring a wide range of components such as ui-btn, ui-card, ui-input, ui-modal, and ui-navbar. It includes a comprehensive set of utility APIs via colorUISdk for request handling, array operations, and data type validation, along with a flexible design system for typography, borders, and theme switching.
Depending on your development framework, choose the appropriate version of ColorUI 3.x:
uni-app.Note on Migration: ColorUI 2.x cannot be directly upgraded to ColorUI 3.x. Version 3.x is a complete rewrite that utilizes a component-based architecture, though it still provides some basic CSS classes.
ui-row and ui-col components in your project's configuration. Note that the actual paths should be adjusted based on your project architecture."usingComponents": {
"ui-row" : "/packageB/components/ui-row/ui-row",
"ui-col" : "/packageB/components/ui-col/ui-col"
}ui-divider component, register it in your project's configuration. Note that the path provided is for demonstration and should be adjusted based on your actual project architecture."usingComponents": {
"ui-divider" : "/packageB/components/ui-divider/ui-divider"
}ui-btn component is not a wrapped custom component but a set of styles applied to the native <button> element. Use the ui-btn class as the base for all button styling.<button class="ui-btn">按钮</button>ui-stepper component, add it to the usingComponents section of your page's JSON configuration file. Note that the path should be adjusted based on your specific project architecture."usingComponents": {
"ui-stepper" : "/packageB/components/ui-stepper/ui-stepper"
}content slot. Note: Because WeChat Mini Programs lack a mouseleave event, you should use the show parameter to manually control the visibility of custom content popovers to prevent them from closing unexpectedly.<ui-popover show="{{isShow}}">
<button class="ui-btn">Click</button>
<view slot="content">
<view class="p-3">
<ui-title title="Hello Colorui" align="center" tpl="stack" hasLine/>
</view>
</view>
</ui-popover>ui-search-bar component, register it in your page's JSON configuration. Ensure the path matches your project's directory structure."usingComponents": {
"ui-search-bar" : "/packageB/components/ui-search-bar/ui-search-bar"
}info property accepts an array of objects. Each object must contain an img path. To handle navigation, provide a url and a type. If type is set to 'eve', the component will trigger the bind:uiTap event instead of navigating automatically.// Example data structure for swiperList
swiperList: [
{
img: 'https://example.com/image1.jpg',
url: '/pages/document/system/system',
type: 'navigateTo' // Direct navigation
},
{
img: 'https://example.com/image2.jpg',
url: '/pages/custom/home',
type: 'switchTab' // Direct navigation to tab bar
},
{
img: 'https://example.com/image3.jpg',
type: 'eve' // Triggers bind:uiTap event
}
]<ui-sys> component must be used in every page to control page behavior, theme styles, and loading states. It also embeds ColorUI's interaction feedback mechanisms, such as modals and light prompts (toasts).<ui-sys>
...business code
</ui-sys><ui-sys></ui-sys> component is a required element for every page in ColorUI. It provides essential functionality including theme styling, page loading states, and built-in interactive feedback mechanisms like modal dialogs and light tips.<ui-sys></ui-sys>The ui-search-bar provides left and right slots for adding custom elements like avatars or buttons.
isLeft or only isRight is enabled, you can use the default slot.isLeft and isRight are enabled, you must use the named slots slot="left" and slot="right" to distinguish content.<!-- Only left slot enabled: use default slot -->
<ui-search-bar isLeft>
<text>Address</text>
</ui-search-bar>
<!-- Both slots enabled: use named slots -->
<ui-search-bar isLeft isRight barUi="mt-2">
<ui-avatar slot="left" ui="round" src="/static/avatar/1002.jpg"/>
<button slot="right" class="ui-btn bg-blue round sm">Search</button>
</ui-search-bar>