plus仿element库

风行者_
已于 2022-04-16 17:17:12 修改
阅读量1k
点赞数 1
分类专栏：窗口操作窗口扩展文章标签： ui python
于 2022-04-16 17:02:43 首次发布
本文链接：https://blog.youkuaiyun.com/m0_60842374/article/details/124216469
版权
窗口操作同时被 2 个专栏收录
5 篇文章
订阅专栏
窗口扩展
2 篇文章
订阅专栏
大家好，aardio的plus控件非常强大，在使用过程中可以设置各种各样的样式。而对于一些没有设计天分或比较懒不想设计（比如本人），又想写漂亮点的界面。
基于这个想法，经过大概一个月的时间开发这个库，仿element组件和颜色，平面化比较漂亮的。同时使用非常简单，拖一个plus控件，加上一句代码就能设计好一个漂亮的组件啦！不多说，先看效果图。
例子代码：
//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=995;top=49;right=1248;bottom=94;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=995;top=94;right=1248;bottom=139;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;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};
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};
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)
	
}

/*下拉按钮{{*/
//设置为下拉按钮
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();
项目下载地址：aardio plus-element-css : plus-element-css ，适用于plus控件的仿element的样式库