# little_program

**Repository Path**: hihopeorg/little_program

## Basic Information

- **Project Name**: little_program
- **Description**: 富文本组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-04
- **Last Updated**: 2022-05-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# little_program
## 简介
>组件集合，视图容器组件、基础组件、表单组件

## 效果展示
![效果展示](screenshot/sample.gif)

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


## 使用说明

 ```
 a、x-swiper
    <element name="x-swiper" src="little_program/src/main/js/components/x-swiper/index"></element>
    <x-swiper with-bg='true' images="{{images}}"></x-swiper>

 b、x-row
    <element name="x-row" src="little_program/src/main/js/components/x-row/index"></element>
    <x-row
      margins="8px 8px 4px"
      radius1="round"
      label="视图容器组件"
      left-icon="menu"
      right-icon="arrow-right"
      targets="pages/container-view/index/index">
    </x-row>

 c、x-scroller
    <element name="x-scroller" src="little_program/src/main/js/components/x-scroller/index"></element>
     <x-scroller height="200" style="width: 100%;">
      <text>默认高度为100%</text>
    </x-scroller>

 d、x-list
    <element name="x-list" src="little_program/src/main/js/components/x-list/index"></element>
    <div style="margin-top: 40px;flex-direction: column;">
        <x-list title="无序列表" order="{{false}}" content="{{content}}">
        </x-list>
        <x-list title="有序列表" content="{{content}}">
        </x-list>
    </div>

 d、x-item
    <element name="x-item" src="little_program/src/main/js/components/x-item/index"></element>
    <div for="{{(index, item) in dataList}}">
        <x-item @event-c="clickItem" @long-c="longClickItem" bind-data="{{index}}" margin="4px 0px" direction='{{item.display}}' >
          <x-view txt="{{item.title}}{{index}}" @long-clk='longClickItem' bind-data="{{index}}" > </x-view>
          <x-view txt="{{item.display}}布局" @long-clk='longClickItem' bind-data="{{index}}" >  </x-view>
        </x-item>
    </div>

 d、x-view
    <element name="x-view" src="little_program/src/main/js/components/x-view/index"></element>
    <x-view margin="4px 0px" row="left" txt="水平靠左" width="100%"></x-view>

d、x-input
    <element name="x-input" src="little_program/src/main/js/components/x-input/index"></element>
    <div style="flex-direction: column;">
        <x-view txt="{{test1}}"></x-view>
        <x-input modal='{{test1}}' @value-change="valueChange" from='test1'></x-input>           
        <x-view txt="{{test3}}"></x-view>
        <x-input modal='{{test3}}' type="date" @value-change="valueChange" from='test3' label="测试输入" placeholder='测试输入...'></x-input>
    </div>

 d、x-checkbox
    <element name="x-checkbox" src="little_program/src/main/js/components/x-checkbox/index"></element>
    <div style="flex-direction: column;">
        <x-checkbox id="x-checkbox" tmp-data="{{group1}}" @value-observer="valueChanged" modal="group1"></x-checkbox>
    </div>

 d、x-button
    <element name="x-button" src="little_program/src/main/js/components/x-button/index"></element>
    <div style="flex-direction: column;">
        <x-button label="保存" radius="ellipse" ></x-button>
        <x-button icon="tips" label="ceshi">
        </x-button>
        <x-button radius="circle" icon="tips">
        </x-button>
        <x-button theme="text" radius="ellipse" icon="tips">
        </x-button>
        <div style="flex-direction: row;align-items: center;">
            <x-button id="tab1" label="test" tag="true" ></x-button>
            <x-button theme='line' label="test" tag="true" ></x-button>
        </div>
        <x-view>
            <x-button theme='line' label="test" tag="true"></x-button>
        </x-view>
        <div>
            <x-button theme='text' label="test" tag="true" ></x-button>
        </div>
        <x-view bg="white" width="100%" col="middle"><x-button label="test" tag="true"></x-button><x-button label="test" tag="true"></x-button></x-view>
    </div>

 d、x-date
    <element name="x-date" src="little_program/src/main/js/components/x-date/index"></element>
    <div style="margin-top: 40px;flex-direction: column;">
       <x-date date="{{date}}"></x-date>
    </div>

d、x-richtext
    <element name="x-richtext" src="little_program/src/main/js/components/x-richtext/index"></element>
    <div style="flex-direction: column;background-color: #f0f0f0;min-height: 100%;">
        <x-richtext @get-data-list="saveData"></x-richtext>
    </div>

 d、x-modal
    <element name="x-modal" src="little_program/src/main/js/components/x-modal/index"></element>
    <div style="flex-direction: column;width: 100%;align-items: center;min-height: 100%;">
        <x-button label="普通提示" @event-form-sure="showModal1"></x-button>
        <x-modal from="showModal1" @change-data="changeData" show-modal="{{showModal_1}}" content="这是一条普通的&#10;这是一条普通的&#10;这是一条普通的&#10;这是一条普通的&#10;这是一条普通的&#10;这是一条普通的&#10;这是一条普通的&#10;这是一条普通的&#10;这是一条普通的&#10;这是一条普通的&#10;这是一条普通的&#10;这是一条普通的&#10;这是一条普通的&#10;这是一条普通的&#10;这是一条普通的&#10;这是一条普通的&#10;这是一条普通的&#10;这是一条普通的"></x-modal>
        <x-button label="带有close" @submit="showModal2"></x-button>
        <x-modal from="showModal2" @change-data="changeData" show-modal="{{showModal_2}}" color="#ef8383" close="true" content="这是一条带有关闭按钮的,并且取消了点击背景关闭modal" shadow="true"></x-modal>

        <x-button label="打开设置" @submit="showModal3"></x-button>
        <x-modal from="showModal3" @change-data="changeData" show-modal="{{showModal_3}}" setting="true" content="由于您未授权使用，所以需要您在设置页面设置权限"></x-modal>
        <x-button label="分享" @submit="showModal4"></x-button>
        <x-modal from="showModal4" @change-data="changeData" show-modal="{{showModal_4}}" share="true" content="需要页面中设置分享的功能才能正常调用哦"></x-modal>
        <x-button label="分享和点赞" @submit="showModal5"></x-button>
        <x-modal from="showModal5" @change-data="changeData" show-modal="{{showModal_5}}" share="true" like="true" content="需要页面中设置分享的功能才能正常调用哦"></x-modal>
        <x-button label="登录" @submit="showModal6"></x-button>
        <x-modal from="showModal6" @change-data="changeData" show-modal="{{showModal_6}}" logo="pages/image/auth.jpeg" load="true" tips="仅用于登录使用" name="x-组件库" content="x-组件库,让你的工作更简单"></x-modal>
    </div>

 d、x-add-img
    <element name="x-add-img" src="little_program/src/main/js/components/x-add-img/index"></element>
    <div style="flex-direction: column;">
        <x-add-img
            @get-image-list="getImageList">
        </x-add-img>
    </div>
 ```



## 兼容性
支持 OpenHarmony API version 8 及以上版本。

## 目录结构
```
|---- little_program  
|     |---- entry  # 示例代码文件夹
|     |---- little_program  # wemark库文件夹
|        |---- components  # 组件代码目录
|                   |---- x-add-img    # x-add-img
|                   |---- x-button     # x-button
|                   |---- x-checkbox   # x-checkbox 
|                   |---- x-date       # x-date 
|                   |---- x-devider    # x-devider
|                   |---- x-icon       # x-icon
|                   |---- x-image      # x-image
|                   |---- x-input      # x-input 
|                   |---- x-item       # x-item
|                   |---- x-list       # x-list
|                   |---- x-loadmore   # x-loadmore
|                   |---- x-modal      # x-modal
|                   |---- x-progress   # x-progress
|                   |---- x-richtext   # x-richtext
|                   |---- x-row        # x-row
|                   |---- x-scroller   # x-scroller 
|                   |---- x-swiper     # x-swiper
|                   |---- x-switch     # x-switch
|                   |---- x-tabar      # x-tabar 
|                   |---- x-userpic    # x-userpic 
|                   |---- x-version    # x-version
|                   |---- x-view       # x-view                
|     |---- README.MD  # 安装使用方法
```

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