无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/meta.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/pubcss.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/menu.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/top.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/head.htm

[ lyuif-cell ] 单元格

时间:2020-09-19 23:20来源:www.lyuid.com 作者:前沿视觉网 点击:
V1.1.1 [ lyuif-cell ] 单元格 # 效果预览 Demo 参数说明 API 单元格快速布局 参数 说明 类型 默认值 ui 组件容器-外部class类 Strting / css 组件容器-style样式 Strting / size 单元格大小 (s/m//x/xl/xxl) Strting m

V1.1.1 [ lyuif-cell ] 单元格#

效果预览 Demo

参数说明 API
单元格快速布局
参数 说明 类型 默认值
ui 组件容器-外部class类 Strting /
css 组件容器-style样式 Strting /
size 单元格大小 (s/m//x/xl/xxl) Strting m
ali 单元格内容垂直居中对齐 Boolean false
tag 标题标签-文本 Strting /
underline 是否显示下描边线条 Boolean true
overflow 溢出隐藏 Boolean false
tag-type 标题标签-类型,primary/ Strting /
tag-c 标题标签-文本颜色 Strting /
tag-bc 标题标签-背景颜色 Strting /
tag-rd 标题标签-圆角大小 Strting /
tag-rds 标题标签-大圆角 Boolean false
tag-c 标题标签-转成块 Boolean false
tag-square 标题标签-方形 Boolean false
tag-dis 标题标签-禁用状态 Boolean false
sub-tag 描述标签-文本 Strting /
sub-tag-type 描述标签-类型,primary/ Strting /
sub-tag-c 描述标签-文本颜色 Strting /
sub-tag-bc 描述标签-背景颜色 Strting /
sub-tag-rd 描述标签-圆角大小 Strting /
sub-tag-rds 描述标签-大圆角 Boolean false
sub-tag-c 描述标签-转成块 Boolean false
sub-tag-square 描述标签-方形 Boolean false
sub-tag-dis 描述标签-禁用状态 Boolean false
ico 左侧图标-是否显示 Boolean false
ico-dir 左侧图标-旋转角度(90/-90/180/-180) Strting /
ico-name 左侧图标-名称 Strting pic
ico-size 左侧图标-大小 Strting 36rpx
ico-c 左侧图标-颜色 Strting #aaaaaa
css 单元格-自定义外部style样式 Strting /
root-l-ui 左侧-图标-自定义外部class类 Strting /
tit 标题-文本 Strting 标题
tit-ui 标题-文本-自定义外部class类 Strting /
tit-css 标题-文本-自定义外部style样式 Strting /
tit-prefix 标题-文本-自定义前缀内容 Strting /
tit-prefix-ui 标题-文本-前缀-自定义外部class类 Strting /
tit-prefix-css 标题-文本-前缀-自定义外部style样式 Strting /
sub 描述-文本 Strting 描述
sub-ui 描述-文本-自定义外部class类 Strting /
sub-css 描述-文本-自定义外部style样式 Strting /
sub-prefix 描述-文本-自定义前缀内容 Strting /
sub-prefix-ui 描述-文本-前缀-自定义外部class类 Strting /
sub-prefix-css 描述-文本-前缀-自定义外部style样式 Strting /
val 内容-文本 Strting 内容
val-ui 内容-文本-自定义外部class类 Strting /
val-css 内容-文本-自定义外部style样式 Strting /
val-prefix 内容-文本-自定义前缀内容 Strting /
val-prefix-ui 内容-文本-前缀-自定义外部class类 Strting /
val-prefix-css 内容-文本-前缀-自定义外部style样式 Strting /
link 是否为跳转样式 Boolean false
url 跳转页面路径 Strting /
urlType 跳转类型(当跳转类型为navigateTo时,可以不设置此参数)
 0(navigateTo)
 1(redirectTo)
 2(switchTab)
 3(reLaunch)
Number 0
urlHover hover-class 点击类名 String none
arrow 右侧-图标-是否显示 Boolean false
arrow-dir 右侧-图标-旋转角度(90/-90,180,-180) Strting /
arrow-name 右侧-图标-名称 Boolean arrow-1
arrow-size 右侧-图标-大小 Strting 36rpx
arrow-c 右侧-图标-颜色 Strting #aaaaaa

Lyuif组件源码展示

  1. <lyuif-cell
  2.     tit="标题"
  3.     sub="描述文本"
  4.     val="内容文本"
  5.     tag="标题标签"
  6.     sub-tag="描述标签"
  7.     arrow="{{false}}"
  8. />
  9.  
自定义 Slot
支持 左侧、右侧、标题区域内容自定义内容容器
参数 说明 类型 默认值
slot-root 是否开启-自定义单元格内容(完全自定义 需要设置 root和c为false) Boolean false
slot-c 是否开启-自定义单元格-居中内容(完全自定义 需要设置 root和c为false) Boolean false
slot-l 是否开启-自定义单元格-左侧内容 Boolean false
slot-r 是否开启-自定义单元格-右侧内容 Boolean false
tag 自定义-标题标签 Strting /
sub-tag 自定义-描述标签 Strting /
ico 自定义-左侧图标 Strting /
tit 自定义-标题 Strting /
sub 自定义-描述 Strting /
arrow 自定义-右侧-箭头内容 Strting /
val 自定义-右侧-内容 Strting /

Lyuif组件源码展示

  1. <lyuif-cell
  2.     slot-root="{{true}}"
  3.     slot-c="{{true}}"
  4.     slot-l="{{true}}"
  5.     slot-r="{{true}}"
  6. >
  7.     <view slot="tag">自定义-标题标签</view>
  8.     <view slot="sub-tag">自定义-描述标签</view>
  9.     <view slot="ico">自定义-左侧图标</view>
  10.     <view slot="tit">自定义-标题</view>
  11.     <view slot="sub">自定义-描述</view>
  12.     <view slot="arrow">自定义-右侧-箭头内容</view>
  13.     <view slot="val">自定义-右侧-内容</view>
  14. </lyuif-cell>
  15.  
事件 Events
 
参数 说明 类型 默认值
bind:tap 点击事件 eventhandle /
bind:catchtap 点击事件-不穿透 eventhandle /
bind:l 点击事件-左侧 eventhandle /
bind:ico 点击事件-左侧-图标 eventhandle /
bind:c 点击事件-中间区域 eventhandle /
bind:tit 点击事件-标题 eventhandle /
bind:tit 点击事件-标题标签 eventhandle /
bind:val 点击事件-右侧 eventhandle /
bind:val 点击事件-右侧-内容 eventhandle /
bind:arrow 点击事件-右侧-跳转图标 eventhandle /

Lyuif组件源码展示

  1. <lyuif-cell
  2.     bind:tap="tap"
  3.     bind:catchtap="catchtap"
  4.     bind:l="l"
  5.     bind:ico="ico"
  6.     bind:c="c"
  7.     bind:tit="tit"
  8.     bind:sub="sub"
  9.     bind:val="val"
  10.     bind:r="r"
  11.     bind:arrow="arrow"
  12. />
  13.  
  14.  
  15.  
  16.  
  17. ({Page
  18.     tap(){
  19.     console.log('tap')
  20.     },
  21.     catchtap(){
  22.     console.log('catchtap')
  23.     },
  24.     l(){
  25.     console.log('l')
  26.     },
  27.     ico(){
  28.     console.log('ico')
  29.     },
  30.     c(){
  31.     console.log('c')
  32.     },
  33.     tit(){
  34.     console.log('tit')
  35.     },
  36.     sub(){
  37.     console.log('sub')
  38.     },
  39.     val(){
  40.     console.log('val')
  41.     },
  42.     r(){
  43.     console.log('r')
  44.     },
  45.     arrow(){
  46.     console.log('arrow')
  47.     },
  48. })
  49.  
事件 Events
 
参数 说明 类型 默认值
bind:tap 点击事件 eventhandle /
bind:catchtap 点击事件-不穿透 eventhandle /
bind:l 点击事件-左侧 eventhandle /
bind:ico 点击事件-左侧-图标 eventhandle /
bind:c 点击事件-中间区域 eventhandle /
bind:tit 点击事件-标题 eventhandle /
bind:tit 点击事件-标题标签 eventhandle /
bind:val 点击事件-右侧 eventhandle /
bind:val 点击事件-右侧-内容 eventhandle /
bind:arrow 点击事件-右侧-跳转图标 eventhandle /

Lyuif组件源码展示

  1. <lyuif-cell
  2.     bind:tap="tap"
  3.     bind:catchtap="catchtap"
  4.     bind:l="l"
  5.     bind:ico="ico"
  6.     bind:c="c"
  7.     bind:tit="tit"
  8.     bind:sub="sub"
  9.     bind:val="val"
  10.     bind:r="r"
  11.     bind:arrow="arrow"
  12. />
  13.  
  14.  
  15.  
  16.  
  17. ({Page
  18.     tap(){
  19.     console.log('tap')
  20.     },
  21.     catchtap(){
  22.     console.log('catchtap')
  23.     },
  24.     l(){
  25.     console.log('l')
  26.     },
  27.     ico(){
  28.     console.log('ico')
  29.     },
  30.     c(){
  31.     console.log('c')
  32.     },
  33.     tit(){
  34.     console.log('tit')
  35.     },
  36.     sub(){
  37.     console.log('sub')
  38.     },
  39.     val(){
  40.     console.log('val')
  41.     },
  42.     r(){
  43.     console.log('r')
  44.     },
  45.     arrow(){
  46.     console.log('arrow')
  47.     },
  48. })
  49.  
前端UI框架,UI框架组件,小程序组件,Lyuif前端框架专注于高效UI解决方案.lyuif是一款HTML/CSS前端框架,高效组件搭配lyui基因碎片化组合完美适配设计稿以及迭代更新,高效前端开发解决方案
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/footer.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/side.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/footbar.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/pubjs.htm