# ColorUI

**Repository Path**: hihopeorg/ColorUI

## Basic Information

- **Project Name**: ColorUI
- **Description**: UI基础组件库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-10-14
- **Last Updated**: 2024-12-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# ColorUI组件库

#### 项目介绍
 ColorUI是一款鲜亮的高饱和色彩，专注视觉的CSS组件库


#### 效果展示

![动画](./动画.gif)

## 下载安装
```shell
npm install @ohos/colorui
```
OpenHarmony npm环境配置等更多内容，请参考 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md) 。


#### 使用说明

##### 元素

###### Layout 布局

功能介绍：展示自定义布局

使用样例：

```
//layout.hml
<element name="cu-custom" src="../../../colorui/components/cu-custom/cu-custom.hml"></element>
<div class="container">
    <cu-custom title="布局" background-color="bg-gradual-blue"></cu-custom>
    <tabs class="tabs" onchange="changeTabIndex">
        <tab-bar class="tab-bar" mode="fixed">
            <text class="tab-text {{$item.selected?'tab-active':''}}" for="{{tabNav}}">{{$item.title}}</text>
        </tab-bar>
        <tab-content>
            <div class="tab-content padding-top">
                <div class="cu-bar bg-white solid-bottom">
                    <div class="sub-title padding-left">
                        <div class="circle-mark bg-blue"></div>
                    </div>
                    <text class="margin-left text-xl text-dark-grey">固定尺寸</text>
                </div>
                <div class="flex flex-column padding bg-white">
                    <div class="basis-xs bg-grey margin-xs padding-sm radius">
                        <text class="text-df">xs(20%)</text>
                    </div>
                    <div class="basis-sm bg-grey margin-xs padding-sm radius">
                        <text class="text-df">sm(40%)</text>
                    </div>
                    <div class="basis-df bg-grey margin-xs padding-sm radius">
                        <text class="text-df">sub(50%)</text>
                    </div>
                    <div class="basis-lg bg-grey margin-xs padding-sm radius">
                        <text class="text-df">lg(60%)</text>
                    </div>
                    <div class="basis-xl bg-grey margin-xs padding-sm radius">
                        <text class="text-df">xl(80%)</text>
                    </div>
                </div>
            </div>
        </tab-content>
    </tabs>
</div>

//layout.js
export default {
    data: {
        CustomBar: globalData.CustomBar,
        TabCur: 0,
        tabNav: [
            {
                title: 'Flex布局',
                selected: true,
            },
            {
                title: 'Grid布局',
                selected: false,
            },
            {
                title: '辅助布局',
                selected: false,
            }
        ],
        list2: Array(2).fill().map((_, index) => (index + 1)),
        list4: Array(4).fill().map((_, index) => (index + 1)),
        list5: Array(5).fill().map((_, index) => (index + 1)),
        list6: Array(6).fill().map((_, index) => (index + 1)),
        list8: Array(8).fill().map((_, index) => (index + 1)),
        list10: Array(10).fill().map((_, index) => (index + 1)),
        selectedTabIndex: 0,
    },
    changeTabIndex(e) {
        for (let i = 0; i < this.tabNav.length; i++) {
            let element = this.tabNav[i];
            element.selected = false;
            if (i === e.index) {
                element.selected = true;
            }
        }
    }
}

```

##### 组件

###### Bar 操作条

功能介绍：展示自定义操作条

使用样例：

```
//bar.hml
<element src="../../../common/icon/icon.hml" name="icon"></element>
<element name="cu-custom" src="../../../colorui/components/cu-custom/cu-custom.hml"></element>
<div class="container bg-gray">
    <cu-custom title="操作条" background-color="bg-gradual-pink"></cu-custom>
    <div class="solid-bottom flex-column auto-scroll">
        <div class="cu-bar bg-white margin-top">
            <div class="sub-title padding-left">
                <div class="circle-mark bg-green"></div>
            </div>
            <text class="margin-left text-xl">输入操作条</text>
        </div>
        <div class="box flex-column">
            <div class="search bg-white">
                <div class="left flex-center">
                    <image class="cu-avatar cu-avatar-size round" src="/common/images/lol/web201310/skin/big99008.jpg"></image>
                </div>
                <input type="text" class="bg-df margin-left-sm middle"></input>
                <div class="right justify-end align-center" style="width: 35%">
                    <icon name="smile_o" size="30" color="gray" background-color="white"></icon>
                    <button class="radius bg-green shadow-green btn-text-white" type="text">发送</button>
                </div>
            </div>

            <div class="search bg-white margin-top">
                <div class="left flex-center">
                    <image class="cu-avatar cu-avatar-size round" src="/common/images/lol/web201310/skin/big99008.jpg"></image>
                </div>
                <div class="middle margin-left-sm">
                    <input type="text" class="bg-df" headericon="common/images/icon/add.png"></input>
                </div>
                <div class="right justify-end align-center" style="width: 35%">
                    <icon name="smile_o" size="30" color="gray" background-color="white"></icon>
                    <button class="radius bg-green shadow-green btn-text-white" type="text">发送</button>
                </div>
            </div>
        </div>
    </div>
</div>

```

##### 扩展

###### Indexes 索引列表

功能说明：展示自定义索引列表

使用样例：

```
//indexes.hml
<element src="../../../common/icon/icon.hml" name="icon"></element>
<element name="cu-custom" src="../../../colorui/components/cu-custom/cu-custom.hml"></element>
<div class="container bg-gray">
    <cu-custom title="索引" background-color="bg-gradual-orange"></cu-custom>
    <div class="cu-bar bg-white solid-bottom" style="top:{{CustomBar}}px;">
        <div class="search bg-white align-center">
            <div class="text-lg padding-right-xs">
                <input type="text" headericon="common/images/icon/search.jpg" placeholder="输入搜索的关键字"></input>
            </div>
            <div class="right justify-end">
                <button class="text-df bg-green shadow-green" type="capsule">搜索</button>
            </div>
        </div>
    </div>
    <div id="scrollDiv" class="indexes flex flex-column auto-scroll">
        <block for="{{list}}">
            <div id="indexes-{{list[$idx]}}" class="flex flex-column flex-sub">
                <div class="row">
                    <text class="padding">{{list[$idx]}}</text>
                </div>
                <div class="cu-list menu-avatar flex-column">
                    <div class="cu-item padding">
                        <label class="cu-avatar cu-avatar-size-lg bg-grey text-middle text-center round">{{list[$idx]}}</label>
                        <div class="flex-column justify-center padding-left">
                            <div class="text-grey padding-bottom-xs">
                                <text class="text-lg text-grey">{{list[$idx]}}a君</text>
                            </div>
                            <text class="text-gray text-sm">
                                有{{$idx+1}}个主子需要伺候
                            </text>
                        </div>
                    </div>
                    <div class="cu-item padding">
                        <label class="cu-avatar cu-avatar-size-lg bg-grey text-middle text-center round">{{list[$idx]}}</label>
                        <div class="flex-column justify-center padding-left">
                            <div class="text-grey padding-bottom-xs">
                                <text class="text-lg text-grey">{{list[$idx]}}b君</text>
                            </div>
                            <text class="text-gray text-sm">
                                有{{$idx+2}}个主子需要伺候
                            </text>
                        </div>
                    </div>
                </div>
            </div>
        </block>
    </div>
    <div class="indexBar">
        <div class="indexBar-box align-center justify-center" @touchstart="tStart" @touchend="tEnd" @touchmove="tMove">
            <text class="indexBar-item" for="{{list}}" id="{{$idx}}" @touchstart="getCur" @touchend="setCur">
                {{list[$idx]}}
            </text>
        </div>
    </div>
    <div style="display:{{hidden?'none':''}};" class="indexToast">
        <label>{{listCur}}</label>
    </div>
</div>

//indexes.js
export default {
    data: {
        StatusBar: 0,
        CustomBar: 0,
        hidden: true,
        listCur: '',
        list: [],
        list2: Array(2).fill().map((_, index) => (index + 1)),
    },
    onInit() {
        for (let i = 0; i < 26; i++) {
            this.list[i] = String.fromCharCode(65 + i)
        }
    },
    onReady() {
    },
    //获取文字信息
    getCur(e) {
        this.hidden = false;
        this.listCur = this.list[e.target.id];
    },
    //滑动选择Item
    tMove(e) {
        if (e.touches[0].localY > 0) {
            let index = parseInt(e.touches[0].localY / 20);
            this.listCur = this.list[index];
        }
        console.log('tMove = ' + this.listCur);
    },

    //触发全部开始选择
    tStart() {
        this.hidden = false;
    },

    //触发结束选择
    tEnd() {
        this.hidden = true;
        let scrollToId = 'indexes-' + this.listCur;
        console.log('tEnd = ' + scrollToId);
        this.$element('scrollDiv').scrollTo({id: scrollToId, duration: 200, timingFunction: 'ease-in'});

    }
}

```

##### 关于

###### About 关于ColorUI组件库

功能介绍：展示ColorUI组件库概述

使用样例：

```
<element name="cu-custom" src="../../../colorui/components/cu-custom/cu-custom.hml"></element>
<div class="container">
  <cu-custom title="关于" background-color="bg-gradual-green"></cu-custom>
  <div class='flex-column margin-xl bg-white padding-xl radius'>
    <text class='text-center margin-bottom text-lg text-grey'>关于ColorUI组件库</text>
    <div class='flex-column'>
      <text class="text-lg text-black">Hi！开发者~欢迎使用ColorUI组件库！这个项目不仅有一些漂亮的基础元素，还有一些实用的组件。项目是开源的，不收取任何费用！</text>
      <text class='text-lg text-black margin-top-sm'>更多功能敬请期待！</text>
    </div>
  </div>
</div>

```
## 目录结构
````
|---- entry
|     |---- common  # 公共资源文件夹 
|           |---- images  # 图片资源文件夹
|     |---- pages  # 示例代码文件夹       
|---- colorui 
|     |---- components  # 库文件夹               
|     |     |---- cu-custom  # 自定义组件文件夹                  
|     |     |---- icon  # 自定义组件文件夹                     
         
````

## 贡献代码
使用过程中发现任何问题都可以提 [Issue](https://gitee.com/hihopeorg/ColorUI/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/hihopeorg/ColorUI/pulls) 。

## 开源协议
本项目基于 [MIT](https://gitee.com/hihopeorg/ColorUI/blob/master/LICENSE) ，请自由地享受和参与开源。