无法在这个位置找到: 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-view ] 超级视图容器#

时间:2020-09-18 23:57来源:www.lyuid.com 作者:前沿视觉网 点击:
V1.1.1 [ lyuif-view ] 超级视图容器 # 参数说明 API 超级视图容器,内置强大css预设[接口],极简参数直接快捷对接style样式,高效应对复杂布局下不同场景需求 参数 说明 类型 默认值 ui 组件容器-外部class类 String / css 组件容器-style样式 String / debug 用于调试布局,对容器进行红色描边 Boolean false type 容器类型: view(视图容器) text(文本容器) String view hover-ui 指定按下去的样式类。当 hover-class=none 时,没有点击态效果(type = view 生效) String / hover-stop 指定是否阻止本节点的祖先节点出现点击态(type = view 生效) Boolean false hover-stop 住后多久出现点击态,单位毫秒(type = view 生效) String 50 hover-stay 住后多久出现点击态,单位毫秒(type = view 生效) String 400 select 文本是否可选(type = text 生效) Boolean false space 显示连续空格(type = text 生效) ensp(中文字符空格一半大小) emsp(中文

V1.1.1 [ lyuif-view ] 超级视图容器#

参数说明 API
超级视图容器,内置强大css预设[接口],极简参数直接快捷对接style样式,高效应对复杂布局下不同场景需求
参数 说明 类型 默认值
ui 组件容器-外部class类 String /
css 组件容器-style样式 String /
debug 用于调试布局,对容器进行红色描边 Boolean false
type 容器类型:
 view(视图容器)
 text(文本容器)
String view
hover-ui 指定按下去的样式类。当 hover-class="none" 时,没有点击态效果(type = "view" 生效) String /
hover-stop 指定是否阻止本节点的祖先节点出现点击态(type = "view" 生效) Boolean false
hover-stop 住后多久出现点击态,单位毫秒(type = "view" 生效) String 50
hover-stay 住后多久出现点击态,单位毫秒(type = "view" 生效) String 400
select 文本是否可选(type = "text" 生效) Boolean false
space 显示连续空格(type = "text" 生效)
 ensp(中文字符空格一半大小)
 emsp(中文字符空格大小)
 nbsp(根据字体设置的空格大小)
String /
decode 是否解码(type = "text" 生效) Boolean false
show 容器是否可见-权重-转成块
 true(block !important)
 false(none !important)
String true
show-inline 容器是否可见-权重-转成内联块
 true(inline-block !important)
 false(none !important)
String true
f 字体-大小(font-size) String /
f-name 字体-名称(font-family) String /
f-last 字体-样式(font-style)
 1(normal)
 2(italic)
 3(oblique)
Number /
f-var 字体-异体(font-variant)
 1(normal)
 2(small-caps)
 3(inherit)
Number /
f-wei 字体-粗细(font-weight)
 1(normal)
 2(bold)
 3(bolder)
 4(lighter)
 5(inherit)
Number /
f-last 字体-规定如何对齐文本的最后一行(text-align-last)
 1(auto)
 2(left)
 3(right)
 4(center)
 5(justify)
 6(start)
 7(end)
 8(initial)
 9(inherit)
Number /
f-just 字体-指定应怎样对齐文本以及对齐间距(text-align-last)
 1(auto)
 2(inter-word)
 3(inter-ideograph)
 4(inter-cluster)
 5(distribute)
 6(kashida)
 7(trim)
Number /
f-sha 字体-投影(text-shadow) String /
o 透明度 String /
c 字体颜色(color) String /
bg 背景-缩写(background) String /
bc 背景-颜色(background-color) String /
bg-img 背景-图片(background-image) String /
bg-size 背景-图片-大小(background-size) String /
bg-gps 背景-图片-定位(background-position) String /
bg-rep 背景-图片-重复方式(background-repeat)
 1(默认,背景图像将在垂直方向和水平方向重复。)
 2(水平方向重复)
 3(垂直方向重复)
 4(不重复)
 5(继承)
String /
bg-clip 背景-绘制方式(background-clip)
 1(border-box 背景绘制在边框方框内,剪切成边框方框)
 2(padding-box 背景绘制在衬距方框内,剪切成衬距方框)
 3(lcontent-box 背景绘制在内容方框内,剪切成内容方框)
Number /
bg-origin 背景-图片-相对于什么位置来定位(background-origin)
 1(border-box 背景图像边界框的相对位置)
 2( padding-box 背景图像填充框的相对位置)
 3(content-box 背景图像的相对位置的内容框)
Number /
bg-jb-type 背景-渐变-类型
 1(linear-gradient 向下/向上/向左/向右/对角方向)
 2(repeating-linear-gradient 背景图像填充框的相对位置)
 3(radial-gradient 背景图像的相对位置的内容框)
 3(repeating-radial-gradient 背景图像的相对位置的内容框)
Number /
bg-jb 背景-渐变-值(需要先设置渐变类型 bg-jb-type ) String /
bor 描边-简写(border) String /
bor-type 描边-类型(border-style)
 dotted( 点状)
 solid( 实线)
 double( 双线)
 dashed( 虚线)
String /
bor-size 描边-大小(border-size) String /
bor-c 描边-颜色(border-color) String /
rds 圆角-大圆角(border-radius:50%) Blooean false
rd 圆角-大小(border-radius) String /
rd-tl 圆角-大小-位置(上左,border-top-left-radius) String /
rd-tr 圆角-大小-位置(上右,border-top-right-radius) String /
rd-bl 圆角-大小-位置(下左,border-bottom-left-radius) String /
rd-br 圆角-大小-位置(下右,border-bottom-right-radius) String /
outline 设置元素周围的轮廓(outline) String /
w 宽度(width) String /
w-max 宽度-最大(max-width) String /
w-min 宽度-最小(min-width) String /
h 高度(height) String /
h-max 高度-最大(max-height) String /
h-min 高度-最小(min-height) String /
over 溢出制定(overflow)
 1(visible)
 2(hidden)
 3(scroll)
 4(auto)
 5(inherit)
Number /
over-x 溢出制定-水平(overflow-x)
 1(visible)
 2(hidden)
 3(scroll)
 4(auto)
 5(no-display)
 6(no-content)
Number /
over-y 溢出制定-垂直(overflow-y)
 1(visible)
 2(hidden)
 3(scroll)
 4(auto)
 5(no-display)
 6(no-content)
Number /
m 外边距-上右下左(margin) String /
mt 外边距-上(margin-top) String /
mr 外边距-右(margin-right) String /
mb 外边距-下(margin-bottom) String /
ml 外边距-左(margin-left) String /
p 内边距-上右下左(padding) String /
pt 内边距-上(padding-top) String /
pr 内边距-右(padding-right) String /
pb 内边距-下(padding-bottom) String /
pl 内边距-左(padding-left) String /
float 浮动-类型(float)
 1(left)
 2(right)
 3(none)
 4(inherit)
Number /
clear 清除浮动-类型(clear)
 1(left)
 2(right)
 3(none)
 4(both)
 4(inherit)
Number /
gps 定位-类型(position)
 1(fixed)
 2(relative)
 3(absolute)
 4(sticky)
 4(kit)
 5(static)
Number /
t 定位-方向(top,上) String /
r 定位-方向(right,右) String /
b 定位-方向(bottom,下) String /
l 定位-方向(left,左) String /
z 层级(z-index,需要设置定位类型,才生效) Number /
sha 投影(box-shadow,顺序依次为水平阴影,垂直阴影,模糊,阴影尺寸,颜色,外阴影转到内阴影 ) String /
flex 弹性布局(display:flex,内置flex对齐方式)
 1(justify-content: center)
 2(align-items: center; justify-content: center)
 3(align-items:flex-start;)
 4(align-items: center)
 5(margin-left: auto)
Number /
fx-dir 弹性布局-主轴的方向(flex-direction)
 1(row)
 2(row-reverse)
 3(column)
 4(column-reverse)
Number /
fx-wrap 弹性布局-如果一条轴线排不下,如何换行(flex-wrap)
 1(nowrap)
 2(wrap)
 3(wrap-reverse)
Number /
fx-flow 弹性布局-flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap(flex-flow)
 1(flex-direction flex-wrap)
 2(initial)
 3(inherit)
Number /
fx-just 弹性布局-主轴上的对齐方式(justify-content)
 1(flex-start,左对齐)
 2(flex-end,右对齐)
 3(center,居中)
 4(space-between,两端对齐,项目之间的间隔都相等)
 5(space-around,每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍)
Number /
fx-items 弹性布局-在交叉轴上如何对齐(align-items)
 1(flex-start,交叉轴的起点对齐)
 2(flex-end,交叉轴的终点对齐)
 3(center,交叉轴的中点对齐)
 4(baseline,项目的第一行文字的基线对齐)
 5(stretch,默认值,如果项目未设置高度或设为auto,将占满整个容器的高度)
Number /
fx-cont 弹性布局-多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用(align-content)
 1(flex-start,交叉轴的起点对齐)
 2(flex-end,交叉轴的终点对齐)
 3(center,交叉轴的中点对齐)
 4(space-between,与交叉轴两端对齐,轴线之间的间隔平均分布)
 4(space-around,每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍)
 5(stretch,默认值,轴线占满整个交叉轴)
Number /
fx-order 弹性布局-项目排列顺序。数值越小,排列越靠前,默认为0(order) Number 0
fx-grow 弹性布局-项目的放大比例,默认为0,即如果存在剩余空间,也不放大(flex-grow) Number 0
fx-shrink 弹性布局-项目的缩小比例,默认为1,即如果空间不足,该项目将缩小(flex-shrink) Number 1
fx-basis 弹性布局-分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小(flex-basis) String auto
fx-self 弹性布局-允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch(align-self)
 1(flex-start,交叉轴的起点对齐)
 2(flex-end,交叉轴的终点对齐)
 3(center,交叉轴的中点对齐)
 4(baseline,项目的第一行文字的基线对齐)
 5(stretch如果项目未设置高度或设为auto,将占满整个容器的高度)
 6(auto)
Number auto
tran 2D/3D转换-启用(transform) String /
tran-slate 2D/3D转换-根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动(translate()) String /
tran-slate-x 2D/3D转换-根据左(X轴)位置给定的参数,从当前元素位置移动(translateX()) String /
tran-slate-y 2D/3D转换-根据顶部(Y轴)位置给定的参数,从当前元素位置移动(translateY()) String /
tran-rotate 2D/3D转换-在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转(rotate()) String /
tran-scale 2D/3D转换-该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数(scale()) String /
tran-scale-x 2D/3D转换-该元素增加或减少的大小,取决于宽度(X轴)的参数(scaleX()) String /
tran-scale-y 2D/3D转换-该元素增加或减少的大小,取决于高度(Y轴)的参数(scaleY()) String /
tran-skew 2D/3D转换-包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。 尝试一下 »skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度(skew()) String /
tran-skew-x 2D/3D转换-X轴倾斜的角度,参数为负表示向相反方向倾斜(skewX()) String /
tran-skew-y 2D/3D转换-Y轴倾斜的角度,参数为负表示向相反方向倾斜(skewY()) String /
tran-matrix 2D/3D转换-和2D变换方法合并成一个。 matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能(matrix()) String /
filter 滤镜-元素(通常是)的可视效果(例如:模糊与饱和度)(filter) Boolean true
filter-blur 滤镜-高斯模糊(blur(px)) String /
filter-brightness 滤镜-线性乘法,使其看起来更亮或更暗() String /
filter-contrast 滤镜-调整图像的对比度。值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1(contrast(%)) String 1%
filter-dropshadow 滤镜-给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本(drop-shadow) String /
filter-grayscale 滤镜-将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0(grayscale(%)) String /
filter-huerotate 滤镜-色相旋转(hue-rotate(deg)) String /
filter-invert 滤镜-反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0(invert(%)) String /
filter-opacity 滤镜-转化图像的透明程度。值定义转换的比例。值为0%则是完全透明,值为100%则图像无变化。值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。 若值未设置,值默认是1。该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速(opacity(%)) String 1%
filter-saturate 滤镜-转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1(saturate(%)) String 1%
filter-sepia 滤镜-将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0(sepia(%)) String /
filter-url 滤镜-URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素(url()) String /

Lyuif组件源码展示

  1. <lyuif-view
  2.     debug="{{true}}"
  3.     ui="lyui w-100 h-44"
  4.     css="color:#fff"
  5.     f="36rpx"
  6.     f-wei="1"
  7.     f-sha="0px 5px 12px rgba(0,0,0,0.3)"
  8.     o="0.5"
  9.     rds="{{true}}"
  10. >
  11. 内容内容
  12. </lyuif-view>
  13.  
前端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