plus控件仿element的样式库

By 风行者 at 2022-05-13 • 2人收藏 • 744人看过

使用plus控件仿element样式,加封装一些常用组件,用了这个库好处是,拉一个plus控件,再加一句代码就可设置完成一个控件,快速简单漂亮大方......


}[`N%W7$1KJIL[8Z5([XIR8.gif


例子代码:

//plus-element样式演示
import fonts.fontAwesome;
import win.ui;
import process;
/*DSG{{*/
var winform = win.form(text="plus-element样式演示";right=1264;bottom=630;border="none")
winform.add(
bkplus={cls="bkplus";left=1;top=30;right=96;bottom=630;bgcolor=65280;db=1;dl=1;dt=1;z=1};
bkplus2={cls="bkplus";left=0;top=-2;right=1265;bottom=30;forecolor=16776960;z=49};
groupbox={cls="groupbox";text="分组1";left=113;top=291;right=534;bottom=373;db=1;dl=1;dr=1;dt=1;edge=1;font=LOGFONT(h=-16);z=44};
groupbox2={cls="groupbox";text="分组2";left=552;top=291;right=973;bottom=373;db=1;dr=1;dt=1;edge=1;font=LOGFONT(h=-16);z=48};
listItem={cls="plus";text="项目1";left=997;top=134;right=1250;bottom=179;bgcolor=11525002;border={left=1;right=1;bottom=1;color=-3546113};font=LOGFONT(h=-16);tabstop=1;textPadding={right=20};z=2};
listItem2={cls="plus";text="项目2";left=997;top=179;right=1250;bottom=224;bgcolor=11525002;border={left=1;right=1;bottom=1;color=-3546113};font=LOGFONT(h=-16);ont=LOGFONT(name='FontAwesome';charset=0);tabstop=1;textPadding={right=20};z=3};
menuItem1={cls="plus";text="项目1";left=826;top=98;right=968;bottom=145;bgcolor=16777215;dr=1;dt=1;font=LOGFONT(h=-16);z=10};
menuItem2={cls="plus";text="项目2";left=826;top=144;right=968;bottom=191;bgcolor=16777215;dr=1;dt=1;font=LOGFONT(h=-16);z=12};
menuItem3={cls="plus";text="项目3";left=826;top=190;right=968;bottom=237;bgcolor=16777215;dr=1;dt=1;font=LOGFONT(h=-16);z=15};
menuItem4={cls="plus";text="菜单1";left=816;top=447;right=988;bottom=482;bgcolor=15793151;db=1;dr=1;z=4};
menuItem5={cls="plus";text="菜单2";left=816;top=481;right=988;bottom=516;bgcolor=15793151;db=1;dr=1;z=6};
menuItem6={cls="plus";text="菜单3";left=816;top=515;right=988;bottom=550;bgcolor=15793151;db=1;dr=1;z=8};
plus={cls="plus";text="主要按钮";left=118;top=45;right=241;bottom=95;bgcolor=-28642;border={radius=30};color=16777215;dl=1;dt=1;font=LOGFONT(h=-16);notify=1;z=7};
plus10={cls="plus";text="信息按钮";left=660;top=108;right=783;bottom=158;bgcolor=-6712432;color=16777215;dr=1;dt=1;font=LOGFONT(h=-16);notify=1;z=21};
plus11={cls="plus";text='\uF040';left=137;top=177;right=187;bottom=227;border={radius=-1};dl=1;dt=1;font=LOGFONT(h=-18;name='FontAwesome');z=22};
plus12={cls="plus";text='\uF00C';left=213;top=177;right=263;bottom=227;border={radius=-1};dl=1;dt=1;font=LOGFONT(h=-18;name='FontAwesome');z=23};
plus13={cls="plus";text='\uF005';left=288;top=177;right=338;bottom=227;border={radius=-1};dl=1;dt=1;font=LOGFONT(h=-18;name='FontAwesome');z=24};
plus14={cls="plus";text='\uF014';left=363;top=177;right=413;bottom=227;border={radius=-1};dl=1;dt=1;font=LOGFONT(h=-18;name='FontAwesome');z=25};
plus15={cls="plus";text='\uF003';left=439;top=177;right=489;bottom=227;border={radius=-1};dl=1;dt=1;font=LOGFONT(h=-18;name='FontAwesome');z=26};
plus16={cls="plus";text=" 等待按钮";left=660;top=176;right=783;bottom=226;bgcolor=-28642;color=16777215;dr=1;dt=1;font=LOGFONT(h=-16);iconStyle={align="left";font=LOGFONT(h=-19;name='FontAwesome');padding={left=9}};iconText='\uF254';notify=1;z=28};
plus17={cls="plus";text="点击效果";left=525;top=176;right=648;bottom=226;bgcolor=-28642;color=16777215;dr=1;dt=1;font=LOGFONT(h=-16);notify=1;z=27};
plus18={cls="plus";left=126;top=250;right=208;bottom=292;dl=1;dt=1;z=29};
plus19={cls="plus";left=238;top=250;right=320;bottom=292;dl=1;dt=1;z=30};
plus2={cls="plus";text="成功按钮";left=253;top=45;right=376;bottom=95;bgcolor=-12926361;border={radius=30};color=16777215;dl=1;dt=1;font=LOGFONT(h=-16);notify=1;z=9};
plus20={cls="plus";left=350;top=250;right=432;bottom=292;dl=1;dt=1;z=31};
plus21={cls="plus";left=462;top=250;right=544;bottom=292;dl=1;dr=1;dt=1;z=32};
plus22={cls="plus";left=150;top=414;right=482;bottom=452;db=1;dl=1;z=33};
plus23={cls="plus";left=545;top=394;right=745;bottom=594;db=1;dr=1;z=34};
plus24={cls="plus";text="进度条演示";left=241;top=563;right=391;bottom=613;align="left";bgcolor=15780518;color=16777215;db=1;dl=1;font=LOGFONT(h=-16);iconStyle={align="left";font=LOGFONT(h=-16;name='FontAwesome');padding={left=15}};iconText='\uF00C';textPadding={left=40};z=35};
plus25={cls="plus";left=148;top=485;right=479;bottom=523;border={radius=25};db=1;dl=1;z=36};
plus26={cls="plus";text="下拉按钮";left=826;top=50;right=968;bottom=97;dr=1;dt=1;font=LOGFONT(h=-16);z=5};
plus27={cls="plus";left=816;top=409;right=988;bottom=441;bgcolor=0;border={color=-5846288};color=16711680;db=1;dr=1;z=11};
plus28={cls="plus";text="首页";left=0;top=53;right=96;bottom=134;color=16777215;dl=1;dt=1;font=LOGFONT(h=-20);iconStyle={font=LOGFONT(h=-35;name='FontAwesome');padding={bottom=20}};iconText='\uF015';textPadding={right=-5;bottom=10};valign="bottom";z=37};
plus29={cls="plus";text="推荐";left=1;top=135;right=97;bottom=216;color=16777215;dl=1;dt=1;font=LOGFONT(h=-20);iconStyle={font=LOGFONT(h=-35;name='FontAwesome');padding={bottom=34}};iconText='\uF27B';notify=1;textPadding={right=-5;bottom=10};valign="bottom";z=38};
plus3={cls="plus";text="警告按钮";left=389;top=45;right=512;bottom=95;bgcolor=-12803354;border={radius=30};color=16777215;dl=1;dt=1;font=LOGFONT(h=-16);notify=1;z=13};
plus30={cls="plus";left=559;top=253;right=683;bottom=290;color=255;dr=1;dt=1;z=39};
plus31={cls="plus";left=690;top=253;right=835;bottom=290;dr=1;dt=1;z=40};
plus32={cls="plus";left=130;top=317;right=242;bottom=352;db=1;dl=1;dt=1;z=41};
plus33={cls="plus";left=252;top=317;right=379;bottom=352;db=1;dl=1;dt=1;z=42};
plus34={cls="plus";left=388;top=317;right=513;bottom=352;db=1;dl=1;dt=1;z=43};
plus35={cls="plus";left=563;top=316;right=678;bottom=351;db=1;dr=1;dt=1;z=45};
plus36={cls="plus";left=685;top=316;right=800;bottom=351;db=1;dr=1;dt=1;z=46};
plus37={cls="plus";left=821;top=316;right=936;bottom=351;db=1;dr=1;dt=1;z=47};
plus38={cls="plus";left=823;top=591;right=1245;bottom=609;z=50};
plus39={cls="plus";left=1001;top=48;right=1246;bottom=79;z=51};
plus4={cls="plus";text="危险按钮";left=524;top=45;right=647;bottom=95;bgcolor=-9671435;border={radius=30};color=16777215;dr=1;dt=1;font=LOGFONT(h=-16);notify=1;z=14};
plus40={cls="plus";left=1001;top=91;right=1246;bottom=122;color=8421376;font=LOGFONT(h=-14);password=1;z=52};
plus5={cls="plus";text="信息按钮";left=659;top=45;right=782;bottom=95;bgcolor=-6712432;border={radius=30};color=16777215;dr=1;dt=1;font=LOGFONT(h=-16);notify=1;z=16};
plus6={cls="plus";text="主要按钮";left=119;top=108;right=242;bottom=158;bgcolor=-28642;color=16777215;dl=1;dt=1;font=LOGFONT(h=-16);notify=1;z=17};
plus7={cls="plus";text="成功按钮";left=254;top=108;right=377;bottom=158;bgcolor=-12926361;color=16777215;dl=1;dt=1;font=LOGFONT(h=-16);notify=1;z=18};
plus8={cls="plus";text="警告按钮";left=389;top=111;right=512;bottom=161;bgcolor=-12803354;color=16777215;dl=1;dt=1;font=LOGFONT(h=-16);notify=1;z=19};
plus9={cls="plus";text="危险按钮";left=525;top=108;right=648;bottom=158;bgcolor=-9671435;color=16777215;dr=1;dt=1;font=LOGFONT(h=-16);notify=1;z=20}
)
/*}}*/

import win.ui.simpleWindow2;
win.ui.simpleWindow2(winform)

import win.ui.css;
css = win.ui.css();

//bkplus,设置固定边距为左,上,下。plus设置固定边距左,上
//文本垂直设置为底对齐,下边距10,文本颜色为白色(按实际修改)
//字体图标,下边距为20,图标颜色为白色(按实际修改)
var nav = win.ui.tabs(  //转为选项卡形式
	winform.plus28,
	winform.plus29
);

//可以一次性设置样式,设置导航样式
nav.skin(css.navigation)
nav.selIndex = 1; //设置默认选项

winform.plus29.oncommand = function( id,event ){
	process.openUrl("https://gitee.com/wengjianhua/aardio")
}

//图标按钮,border={radius=30}
winform.plus.skin(css.primary)
winform.plus2.skin(css.success)
winform.plus3.skin(css.warning)
winform.plus4.skin(css.danger)
winform.plus5.skin(css.info)

winform.plus6.skin(css.primary)
winform.plus7.skin(css.success)
winform.plus8.skin(css.warning)
winform.plus9.skin(css.danger)
winform.plus10.skin(css.info)

//图标按钮,border={radius=-1}
winform.plus11.skin(css.primary)
winform.plus12.skin(css.success)
winform.plus13.skin(css.warning)
winform.plus14.skin(css.danger)
winform.plus15.skin(css.info)

//加入旋转动画
css.rotate(winform.plus11)
css.rotate(winform.plus12)
css.rotate(winform.plus13)
css.rotate(winform.plus14)
css.rotate(winform.plus15)

//点击效果
winform.plus17.skin(css.primary)
css.click(winform.plus17,0.95)

winform.plus16.skin(css.success)

winform.plus16.disabledText = {
    '\uF254';
    '\uF251';
    '\uF252';
    '\uF253';
    '\uF250';
    text = " 请稍候"
};

//开关铵钮
css.switch(winform.plus18)
css.switch(winform.plus19, , css.green, css.yellow)
css.switch(winform.plus20, , css.red, css.green)
css.switch(winform.plus21, , css.yellow, css.red)

//复选框,可在设计视图设置字体颜色
css.checkbox(winform.plus30)
//第二参数为tru,为圆形边框
css.checkbox(winform.plus31,true,"复选框2")

//单选框,可在设计视图设置字体颜色
//注意包含单选框的groupbox控件文本不能跟groupbox控件文本相同,作用是用来分组的
winform.group() //必须先设置所有groupbox下控件为子控件
css.radio(winform.plus32)
css.radio(winform.plus33,,"单选框2")
css.radio(winform.plus34,,"单选框3")
winform.plus32.checked = true  //设置第一个为勾选状态

//加入点击效果
for(i=32;34;1){
	css.click(winform["plus"+i]) //所有单选框加入点击效果
}


//分组2,第二参数为true, checked为圆形勾选样式
css.radio(winform.plus35,true,"单选框4")
css.radio(winform.plus36,true,"单选框5")
css.radio(winform.plus37,true,"单选框6")
winform.plus36.checked = true  //设置第二个为勾选状态

//单选框响应事件
for(i=35;37;1){
	winform["plus"+i].oncommand = function(id,event){
		if (owner.checked) winform.msgbox(owner.text)
	}
	
}

//进度条
css.progress(winform.plus22)
css.progress(winform.plus25, , , css.green)
//圆环进度条
winform.plus23.smoothingMode = true
css.pieProgress(winform.plus23, , , css.yellow)

winform.plus24.skin(css.danger)

winform.plus24.oncommand = function(id, event) {
    for (i = 1; 100; 1) {
        //设置进度条百分比
        css.setProgressPercentage(winform.plus22, i)
        css.setProgressPercentage(winform.plus25, i)

        winform.plus23.progressPercentage = i

        win.delay(10)
    }

}

//简单列表框,最多显示10个,多个建议用标准控件listbox
import web.rest.jsonLiteClient;
var http = web.rest.jsonLiteClient();
var suggestion = http.api("http://suggestion.baidu.com/su?cb=&wd={0}") //{0}会替换为请求关键字并以UTF8编码
var result = suggestion["aardio"].get();

//result.s是一个table,模板至少两个plus,边框在设计视图调,默认边框(左1,右1,下1)
listbox = css.listbox(result.s,winform.listItem,winform.listItem2)

// listbox.skin(css.dark) 可用skin函数换肤

listbox.onSelchange = function(idx,strip,form){
	winform.msgbox(strip.text,idx)
	
}

css.trackbar(winform.plus38)


/*文本框{{*/
//无图标文本框
css.textbox(winform.plus39)

//有图标文本框,字体大小,颜色,密码文本可设计视图设置
css.textbox(winform.plus40,'\uF2A8')

//点击图标事件
winform.plus40.oncommand = function( id,event ){
	if (owner.iconText = '\uF2A8') {
		owner.iconText = '\uF06E' //更换图标
		winform.plus40.editBox.passwordChar = null //取消隐藏文本
	}
	else {
		owner.iconText = '\uF2A8'
		winform.plus40.editBox.passwordChar = "*" //指定隐藏文本字符
	}
	winform.plus40.redraw(); //刷新一下,不然会有重叠感
}
/*}}*/

// winform.plus38.progressPos 获取值跟进度条一样

/*下拉按钮{{*/
//设置为下拉按钮
menu = css.dropdown(winform.plus26,,,winform.menuItem1, winform.menuItem2, winform.menuItem3)

//设置下拉列表样式,风格由自己
winform.menuItem1.skin(css.success)
winform.menuItem2.skin(css.warning)
winform.menuItem3.skin(css.danger)


// 用户点选菜单项触发此事件,strip参数是点选的控件
menu.onOk = function(strip) {
    winform.msgbox(strip.text)
}

/*}}*/

/*下拉组合框{{*/
//设置下拉列表样式,风格由自己
winform.menuItem4.skin(css.success)
winform.menuItem5.skin(css.success)
winform.menuItem6.skin(css.success)

//需要边框可在设计视图设置
css.combobox(winform.plus27,,,winform.menuItem4, winform.menuItem5, winform.menuItem6)

//改变文本框字体颜色RGB,默认是黑色
winform.plus27.editBox.color = 0xff0000;
/*}}*/

winform.show();
win.loopMessage();


整个打包,包括库源码:

plus-elemet-css 样式库 v2.0.rar


7 个回复 | 最后更新于 2022-05-16
2022-05-13   #1

感谢分享,很漂亮,赞

2022-05-13   #2

感谢风分享

看起来是真的不错

尝试用下。。

2022-05-13   #3

谢谢分享!

2022-05-13   #4

2022-05-14   #5

棒棒的

2022-05-14   #6

很漂亮,谢谢分享!

2022-05-16   #7

登录后方可回帖

登 录
信息栏
公 告:

专注分享

谢绝纯提问

谢谢合作!
本站域名:HtmLayout.Cn
aardio可以快速开发上位机,本站主要记录了学习过程中遇到的问题和解决办法及aardio代码分享

这里主要专注于aardio学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.

Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
本 站 主 站:Stm32cube中文网
Sciter中文在线文档Sciter在线学习文档
空间赞助:才仁机械
打赏本站
Loading...