CSS样式支持
CSS属性介绍
width
设置默认宽度，单位缺省或dp
width: 15;
width: 15dp;min-width
设置最小宽度，默认最小宽度为0，单位缺省或dp
min-width: 15;
min-width: 15dp;max-width
设置最大宽度，默认最大宽度为 WIDGET_MAX_WIDTH （代码中的宏定义），单位缺省或dp
max-width: 15;
max-width: 15dp;height
设置默认宽度，单位缺省或dp
height: 15;
height: 15dp;min-height
设置最小高度，默认最小高度为0，单位缺省或dp
min-height: 15;
min-height: 15dp;max-height
设置最大高度，默认最大高度为 WIDGET_MAX_HEIGHT （代码中的宏定义），单位缺省或dp
max-height: 15;
max-height: 15dp;color
设置字体颜色，支持rgb和rgba格式
color: rgb(38, 38, 38);
color: rgba(38, 38, 38, 1.0);sub-color
设置辅助色，部分有效，例如tpSlider、tpPercentProgressBar等，支持rgb和rgba格式
sub-color: rgb(140, 29, 235);
sub-color: rgba(140, 29, 235, 1.0);background
设置背景颜色，支持rgb、rgba和渐变格式
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, 1.0);
background: linear-gradient(90deg, rgb(107, 80, 246), rgb(204, 143, 237));background-color
设置背景颜色，支持rgb、rgba和渐变格式
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 1.0);
background-color: linear-gradient(90deg, rgb(107, 80, 246), rgb(204, 143, 237));border-color
设置边框颜色，支持rgb、rgba和渐变格式
border-color: rgb(255, 255, 255);
border-color: rgba(255, 255, 255, 1.0);
border-color: linear-gradient(90deg, rgb(107, 80, 246), rgb(204, 143, 237));border-width
设置边框线宽，默认线宽为1px，单位缺省或dp
border-width: 1;
border-width: 1dp;font-size
设置字体大小，单位缺省或dp
font-size: 18;
font-size: 18dp;gap
设置内部元素间隔，单位缺省或dp
gap: 3;
gap: 3dp;padding
设置内部元素距四个边界距离，如果设置padding则padding-left、padding-right、padding-top、padding-bottom属性无效，单位缺省或dp
padding: 3;
padding: 3dp;padding-left
设置内部元素距左边界距离，如果设置了padding属性则本属性无效，单位缺省或dp
padding-left: 3;
padding-left: 3dp;padding-right
设置内部元素距右边界距离，如果设置了padding属性则本属性无效，单位缺省或dp
padding-right: 3;
padding-right: 3dp;padding-top
设置内部元素距上边界距离，如果设置了padding属性则本属性无效，单位缺省或dp
padding-top: 3;
padding-top: 3dp;padding-bottom
设置内部元素距下边界距离，如果设置了padding属性则本属性无效，单位缺省或dp
padding-bottom: 3;
padding-bottom: 3dp;border-radius
设置圆角尺寸，单位缺省或dp
border-radius: 3;
border-radius: 3dp;icon-size
设置图标尺寸，部分组件有效，例如TpIconTopButton、TpMediaTileButton、TpMenuPanelItem等，单位缺省或dp
icon-size: 3;
icon-size: 3dp;CSS状态介绍
hover
鼠标悬停状态，使用此状态可设置鼠标悬停组件时的样式
TpButton:hover {
background-color: rgb(239, 239, 239);
}active
鼠标按压状态，可设置鼠标按下组件时样式
TpButton:active {
background-color: rgb(208, 215, 221);
}checked
选中状态，可设置组件选中时样式，组件可设置开启选中态，开启后点击一次切换为选中态，再点击则切换为非选中态
TpButton:checked {
background-color: rgb(208, 215, 221);
}disabled
禁用状态，可设置组件被禁用时样式
TpButton:disabled {
background-color: rgb(208, 215, 221);
}enabled
启用状态，即默认状态，可设置组件在启用/默认状态的样式，可缺省表示
TpButton:enabled {
background-color: rgb(208, 215, 221);
}
TpButton {
background-color: rgb(208, 215, 221);
}自定义筛选类型
可以对CSS设置筛选类型，指定组件响应指定样式，使用type对CSS进行修饰，并在代码中为组件绑定特殊样式
TpButton[type="ControlPanelPowerButton"] {
height: 64dp;
width: 305dp;
font-size: 18dp;
color: rgb(38, 38, 38);
background-color: rgb(255, 255, 255);
border-radius: 32;
}
TpButton[type="ControlPanelPowerButton"]:hover {
background-color: rgb(239, 239, 239);
}
// C++代码中指定组件绑定样式
setProperty("type", "ControlPanelPowerButton");使用实例
创建测试程序
参考应用开发创建一个默认应用程序，并创建一个TpButton对象
定义自定义CSS样式
TpButton {
gap: 5dp;
font-size: 15dp;
color: rgb(255, 128, 128);
background-color: rgb(255, 255, 255);
}
TpButton:hover {
background-color: rgb(128, 255, 128);
}
TpButton[type="TestCssType"] {
height: 64dp;
width: 305dp;
font-size: 18dp;
color: rgb(128, 128, 255);
background-color: rgb(255, 255, 255);
border-radius: 32;
}
TpButton[type="TestCssType"]:hover {
background-color: rgb(55, 55, 55);
}对按钮设置自定义CSS样式
TpString testCSSStr = "上一步的CSS";
setStyleSheet(testCSSStr);
TpButton* testButton1 = new TpButton("测试按钮1", this);
testButton1->setSize(300, 70);
testButton1->move(150, 150);
TpButton* testButton2 = new TpButton("测试按钮2", this);
testButton2->setProperty("type", "TestCssType");
testButton2->setSize(300, 70);
testButton2->move(500, 150);显示效果
正常态
悬停态
