代码拉取完成，页面将自动刷新
本项目是基于开源项目iview-Weapp进行ohos化的移植和开发的，可以通过项目标签以及github地址（https://github.com/TalkingData/iview-weapp）追踪到原项目版本
iview-Weapp项目名称：iview-Weapp
所属系列：ohos的第三方组件适配移植
功能：提供自定义的高质量组件
项目移植状态：完成
调用差异：无
项目作者和维护人：hihope
联系方式：hihope@hoperun.com
原项目基线版本：v2.0.0
编程语言：js
方法1.
我们定义了两个概念，行row和列col，具体使用方法如下：
i-row在水平方向创建一行i-col插入在i-row中i-col中，键入自己的内容i-col的span参数，指定跨越的范围，其范围是1到24i-row中的i-col总和应该为24<element src="../../iview/xwrow/index.hml" name="i-row"></element>
<element src="../../iview/xwcol/index.hml" name="i-col"></element>
<element src="../../iview/xwpanel/index.hml" name="i-panel"></element>
<div class="container">
<i-panel title="基础布局" hide-border="true"></i-panel>
<i-row class="demo-row">
<i-col span="24" class="demo-col"><text class="textContent">24：100%</text></i-col>
</i-row>
<i-row class="demo-row-light">
<i-col span="12" class="demo-col"><text class="textContent">12：50%</text></i-col>
<i-col span="12" class="demo-col-highlight"><text class="textContent">12：50%</text></i-col>
</i-row>
<i-row class="demo-row">
<i-col span="8" class="demo-col"><text class="textContent">8：33.33%</text></i-col>
<i-col span="8" class="demo-col-light"><text class="textContent">8：33.33%</text></i-col>
<i-col span="8" class="demo-col"><text class="textContent">8：33.33%</text></i-col>
</i-row>
<i-row class="demo-row-light">
<i-col span="6" class="demo-col"><text class="textContent">6：25%</text></i-col>
<i-col span="6" class="demo-col-highlight"><text class="textContent">6：25%</text></i-col>
<i-col span="6" class="demo-col"><text class="textContent">6：25%</text></i-col>
<i-col span="6" class="demo-col-highlight"><text class="textContent">6：25%</text></i-col>
</i-row>
<i-row class="demo-row">
<i-col span="16" class="demo-col"><text class="textContent">16：66.66%</text></i-col>
<i-col span="8" class="demo-col-light"><text class="textContent">8：33.33%</text></i-col>
</i-row>
<i-panel title="左右偏移" hide-border="true"></i-panel>
<i-row class="row-class">
<i-col span="8" class="col-class"><text>col-8</text></i-col>
<i-col span="8" offset="8" class="col-class light"><text >col-8 | offset-8</text></i-col>
</i-row>
<i-row class="row-class">
<i-col span="6" offset="8" class="col-class"><text >col-6 | offset-8</text></i-col>
<i-col span="6" offset="4" class="col-class light"><text >col-6 | offset-4</text></i-col>
</i-row>
<i-row class="row-class">
<i-col span="12" offset="8" class="col-class"><text>col-12 | offset-8</text></i-col>
</i-row>
</div>
功能介绍：iView 推荐使用以下调色板的颜色作为设计和开发规范，以保证页面和组件之间的视觉一致。
<element name="i-card" src="../../iview/xwcard/index.hml"></element>
<div class="dis">
<text class="itext">主色</text>
<div class="container">
<i-card color="#2d8cf0" class="color-item" >
<text slot="content" style="font-size: 14px; color:white">Primary</text>
<text slot="footer" class="color-item-content">#2d8cf0</text>
</i-card>
<i-card color="#5cadff" >
<text slot="content" style="font-size: 14px; color:white">Light Primary</text>
<text slot="footer" class="color-item-content">#5cadff</text>
</i-card>
<i-card color="#2b85e4">
<text slot="content" style="font-size: 14px; color:white">Dark Primary</text>
<text slot="footer" class="color-item-content">#2b85e4</text>
</i-card>
</div>
<text class="itext">辅助色</text>
<div class="container">
<i-card color="#19be6b" >
<text slot="content" style="font-size: 14px; color:white">Success</text>
<text slot="footer" class="color-item-content">#19be6b</text>
</i-card>
<i-card color="#ff9900" >
<text slot="content" style="font-size: 14px; color:white">Warning</text>
<text slot="footer" class="color-item-content">#ff9900</text>
</i-card>
<i-card color="#ed3f14" >
<text slot="content" style="font-size: 14px; color:white">Error</text>
<text slot="footer" class="color-item-content">#ed3f14</text>
</i-card>
</div>
<text class="itext">中性色</text>
<div class="container">
<i-card color="#1c2438" >
<text slot="content" style="font-size: 14px; color:white">标题 Title</text>
<text slot="footer" class="color-item-content">#1c2438</text>
</i-card>
<i-card color="#495060" >
<text slot="content" style="font-size: 14px; color:white">正文 Content</text>
<text slot="footer" class="color-item-content">#495060</text>
</i-card>
<i-card color="#ed3f14">
<text slot="content" style="font-size: 14px; color:white">辅助 Sub Color</text>
<text slot="footer" class="color-item-content">#ed3f14</text>
</i-card>
<i-card color="#bbbec4">
<text slot="content" style="font-size: 14px; color:white">失效 Disabled</text>
<text slot="footer" class="color-item-content">#bbbec4</text>
</i-card>
<i-card color="#dddee1">
<text slot="content" style="font-size: 14px; color: #657180;">边框 Border</text>
<text slot="footer" class="color-item-content">#dddee1</text>
</i-card>
<i-card color="#e9eaec">
<text slot="content" style="font-size: 14px; color: #657180;">分割线 Divider</text>
<text slot="footer" class="color-item-content">#e9eaec</text>
</i-card>
<i-card color="#f8f8f9">
<text slot="content" style="font-size: 14px; color: #657180;">背景 Back</text>
<text slot="footer" class="color-item-content">#f8f8f9</text>
</i-card>
</div>
</div>
功能介绍：当数据量较多时，使用分页可以快速进行数据切换。
<div class="container {{ mode == 'number' ?'contain':'' }}" >
<div class="i-page-prev" if="{{ mode === 'button' }}">
<button class="i-page-button" onclick="handlePrev" disabled="{{ current === 1 }}">{{ prev }}</button>
</div>
<div class="i-page-number" if="{{ mode !== 'pointer' && !simple }}">
<div>
<text class="i-page-number-current">{{ current }}</text>
</div>
<text>/{{ total }}</text>
</div>
<div class="container" if="{{ mode === 'pointer' }}">
<div class="i-page-pointer">
<div for="{{ numTest }}" class="i-page-pointer-dot {{ ($idx+1) == current ? 'i-dot-current' : '' }}"></div>
</div>
</div>
<div class="i-page-next" if="{{ mode === 'button' }}">
<button class="i-page-button" onclick="handleNext" disabled="{{ current == total }}">{{next}}</button>
</div>
</div>
功能介绍：从底部弹出的模态框，提供和当前场景相关的 2 个以上的操作动作，也支持提供标题和描述。内置固定的展示样式、不支持特别灵活的修改。
<element name='i-button' src='../../iview/xwbutton/index.hml'></element>
<element src="../../iview/xwactionSheet/index.hml" name="i-action-sheet"></element>
<element src="../../iview/xwmessage/index.hml" name="i-message"></element>
<div >
<div style="margin-top: 100px;flex-direction: column;">
<i-button type="ghost" @bind-tap="handleOpen1">一般用法</i-button>
<i-button type="ghost" @bind-tap="handleOpen2">带有提示、异步</i-button>
</div>
<i-action-sheet visible="{{ visible1 }}" actions="{{ actions1 }}" show-cancel="true" @bind-cancel="handleCancel1" @bind-tap="handleClickItem1" ></i-action-sheet>
<i-action-sheet visible="{{ visible2 }}" actions="{{ actions2 }}" show-cancel="true" @bind-cancel="handleCancel2" @bind-tap="handleClickItem2" mask-closable="{{ false }}">
<div slot="header" class="action-sheet">
<div style="color: #444;font-size: 16px"><text>确定吗？</text></div>
<text>删除后无法恢复哦</text>
</div>
</i-action-sheet>
<i-message id="message"></i-message>
</div>
功能介绍：主要用于通知未读数的角标，提醒用户点击。
<element src="../../iview/xwbadge/index.hml" name="i-badge"></element>
<div class="container">
<div class="contain">
<i-badge dot="true">
<text class="text1"></text>
</i-badge>
</div>
<div class="contain">
<i-badge count="3">
<text class="text1"></text>
</i-badge>
</div>
<div class="contain">
<i-badge count="123" overflow-count="100">
<text class="text1"></text>
</i-badge>
</div>
<div class="contain">
<i-badge count="66">
</i-badge>
</div>
<div class="contain">
<i-badge count="66" color="green">
</i-badge>
</div>
</div>
功能介绍：在两种状态间切换时用到的开关选择器。
<element src="../../iview/xwswitch/index.hml" name="i-switch"></element>
<element src="../../iview/xwpanel/index.hml" name="i-panel"></element>
<element src="../../iview/xwicon/index.hml" name="i-icon"></element>
<element src="../../iview/xwcell/index.hml" name="i-cell"></element>
<div class="container">
<i-panel hide-border-top="true">
<i-cell label="基本用法">
<i-switch value="{{ switch1 }}" slot='content' @bind-change='bindChange'></i-switch>
</i-cell>
<i-cell label="自定义内容">
<i-switch value="{{ switch1 }}" size="large" slot='content' @bind-change='bindChange'>
<text slot='open'>开启</text>
<text slot='close'>关闭</text>
</i-switch>
</i-cell>
<i-cell label="图标">
<i-switch value="{{ switch1 }}" slot='content' @bind-change='bindChange'>
<i-icon type="right" slot="close" size="15" color="white"></i-icon>
<i-icon type="close" slot="open" size="15" color="white"></i-icon>
</i-switch>
</i-cell>
<i-cell label="禁止切换">
<i-switch disabled='true' slot='content' @bind-change='bindChange'></i-switch>
</i-cell>
</i-panel>
</div>
layout栅格布局组件属性说明表
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| span | 栅格的占位格数，可选值为0~24的整数 | Number | - |
| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | Number | - |
page组件属性说明表
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| mode | 类型，可选值为 button、number、pointer | String | button |
| current | 当前页码 | Number | 1 |
| total | 总页数 | Number | 0 |
| simple | 是否隐藏数值 | Boolean | false |
| prev | 按钮内容 | String | '' |
| next | 按钮内容 | String | '' |
Page events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| handleChange | 切换页码时触发，返回 prev 或 next | { type } |
actionSheet组件属性说明表
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| visible | 是否显示组件 | Boolean | false |
| mask-closable | 点击遮罩层是否可以关闭组件 | Boolean | true |
| show-cancel | 是否显示取消按钮 | Boolean | false |
| cancel-text | 取消按钮的文案 | String | 取消 |
| actions | 按钮组，具体项参照后面的表格 | Array | [] |
ActionSheet events #
| 事件名 | 说明 | 返回值 |
|---|---|---|
| handleClickItem | 点击某个按钮时触发，返回按钮所在 actions 中的索引 | { index } |
| handleClickMask | 点击关闭或遮罩层时触发 | - |
ActionSheet slot #
| 名称 | 说明 |
|---|---|
| header | 标题栏，可以添加提示信息 |
ActionSheet actions #
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 按钮文案 | String | - |
| icon | 按钮图标 | String | - |
| color | 按钮文字的颜色 | String | - |
| loading | 按钮是否显示为加载中 | Boolean | false |
badge组件属性说明表
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| count | 大于 overflowCount 时，显示 ${overflowCount}+，为 0 时隐藏 | Number | 123 |
| overflow-count | 展示封顶的数字值 | Number | 99 |
| dot | 不展示数字，只有一个小红点，如需隐藏 dot ，需要设置 count 为 0 | Boolean | false |
| color | 右上角框的颜色 | String | '' |
switch组件属性说明表
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 指定当前是否选中 | Boolean | false |
| size | 开关的尺寸，可选值为 large、small、default 或者不写。建议开关如果使用了2个汉字的文字，使用 large | String | default |
| disabled | 是否禁用开关 | Boolean | false |
| name | 隐藏的 input 的 name 值 | String | - |
Switch events #
| 事件名 | 说明 | 返回值 |
|---|---|---|
| bindtoggle | 开关变化时触发，返回当前的状态 | { value } |
Switch slot #
| 名称 | 说明 |
|---|---|
| open | 自定义显示打开时的内容 |
| close | 自定义显示关闭时的内容 |
支持 OpenHarmony API version 8 及以上版本。
├─entry # 示例代码文件夹
├─README.md # 安装使用方法
└─iviewWeapp
└─src
└─main
├─js
├─common # 工具类与资源文件夹
├─components
└─dist # 自定义组件文件夹
├─xwactionSheet
├─xwalert
├─xwavatar
├─xwbadge
├─xwbutton
├─xwcard
├─xwcell
├─xwcheckbox
├─xwcol
├─xwcollapse
├─xwcollapseitem
├─xwcountdown
├─xwdivider
├─xwdrawer
├─xwgrid
├─xwgridicon
├─xwgriditem
├─xwgridlabel
├─xwicon
├─xwindex
├─xwinput
├─xwinputnumber
├─xwloadmore
├─xwmessage
├─xwmodel
├─xwnoticebar
├─xwpage
├─xwpanel
├─xwprogress
├─xwradio
├─xwrate
├─xwrow
├─xwshadow
├─xwspin
├─xwstep
├─xwsticky
├─xwstickyitem
├─xwswipeout
├─xwswitch
├─xwtabBar
├─xwtabs
├─xwtags
└─xwtoast
使用过程中发现任何问题都可以提 Issue 给我们，当然，我们也非常欢迎你给我们发PR 。
本项目基于 MIT License ，请自由地享受和参与开源。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。