叶落花开的博客

aardio-htmlayout 实现skin换肤功能！

发表于2024-08-19|客户端开发aardiohtmlayout

target="\_blank" rel="nofollow noopener noreferrer"

在 htmlayout 的 css 中支持自定义 CSS 常量，这给我们做界面设计带来了更多可能。

了解过 less 的童鞋，应该对 CSS 常量定义非常熟悉。

需求分析：更换皮肤一般是需要改变界面的颜色、图片、样式，

而在 htmlayout 中绝大部分内容都可以使用 css 来控制，非常酷！

步骤：

首先我们来建立一个 red.css，用来存储红色皮肤需要的样式：

@const BGROUND: RED；   //定义背景色

@const   BORDER1, BORDER2 : 5px solid #FF0000;  //定义两个边框色

@const MY\_HATCH\_BACKGROUND  : repeat url(sb-scroll-base.png);  //定义滚动条图片

@const WIDTH\_EXPR: calc( 50% + 40px);  //定义宽度数值

@const INITIAL\_TEXT: "RED SKIN";       //定义文本内容

aardio-htmlayout 修改 file 控件按钮文字

发表于2024-08-18|客户端开发aardio

CSS演示：

/*文件选择 type=file-path*/
@set std-file-selector{
	:root{width:214px;height:24px;line-height:24px;padding:0px;margin:0px;border:1px solid @mCtlborder;background: @mCtlbackground;color:@mText3;}
	:root > caption{padding:0px 0px 0px 24px;height:12px;foreground-repeat:no-repeat;foreground-position: 4px 50%;}
	:root:empty > caption {padding:0px 0px 0px 6px;color:@mText4;}
	:root > button{margin:0;padding:0;width:36px;height:18px;line-height:24px;color:@mText3;border:none;border-left: 1px solid @mline;}
	:root > button > text {content: "删除";}
	:root:empty > button > text {content: "选择";}
}

控件代码:
<input type="file-path" filter="压缩文件:*.tar.gz;" />

aardio-HTMLayout behavior 大全

发表于2024-08-18|客户端开发aardio

aardio-[Mr.R出品]精心收集整理 htmlayout 参考手册

发表于2024-08-18|客户端开发aardiohtmlayout

R 大历时一个多月收集整理的 htmlayout 参考手册需要的自取！！！若有遗漏或错误欢迎指正！！！