uniGUI学习之uniButton设置图标+扁平化+角标CSS(34)

得之象外 發表於 2020-4-9 20:32:00

uniGUI学习之uniButton设置图标+扁平化+角标CSS(34)

1]uniButton设置图标
2]uniButton扁平化CSS
2.2使用bootstrap风格的按钮
3 uniButton 按钮上的文本换行显示
4.实现右上角数字角标效果
<hr>
 1]设置IconCls属性，这种方法不需添加ImageList,简单方便，推荐使用
<img src="https://img2020.cnblogs.com/blog/37451/202004/37451-20200409202624513-1646270880.png"><img src="https://img2020.cnblogs.com/blog/37451/202004/37451-20200409202818429-778892217.png">
<hr>
2]如嫌方法1的图标样式太少，可载入本地图标，双击UniNativeImageList控件，推荐使用
 <img src="https://img2020.cnblogs.com/blog/37451/202004/37451-20200409205224619-1146049634.png"><img src="https://img2020.cnblogs.com/blog/37451/202004/37451-20200409205408839-1624391124.png">
<img src="https://img2020.cnblogs.com/blog/37451/202004/37451-20200409205935857-1826496269.png">
 设置uniButton的Images属性和ImageIndex属性即可。
<hr>
 3]双击UniNativeImageList，载入网络字体图标，需联网，不稳定，不推荐使用。
 <img src="https://img2020.cnblogs.com/blog/37451/202004/37451-20200409205558197-1487952225.png"> 
<hr>
 2]uniButton扁平化
 <img src="https://img2020.cnblogs.com/blog/37451/202005/37451-20200521180449595-788769608.png">
  双击右边的ServerModule
<div class="cnblogs_code">
<pre>.bntAdd
{
border-radius:0px;
border: none;
background:#4ca54c !important;
}</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/37451/202106/37451-20210618185644544-642342568.png"> 
回到界面，在uniButton的LayoutConfig的Cls设为上面的bntAdd
<img src="https://img2020.cnblogs.com/blog/37451/202106/37451-20210618185700417-1999677955.png">
<hr>
2.2使用bootstrap风格的按钮 
<div class="cnblogs_code"><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_a6301b8e-9573-47e6-aac1-f72bacec2794" class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_a6301b8e-9573-47e6-aac1-f72bacec2794" class="cnblogs_code_hide">
<pre>.bbtn-bt-blue,
.bbtn-bt-blue.x-btn-over {
background-color: #337ab7;
background-image: none;
border-color: #2e6da4;
border-radius: 4px;
}
.bbtn-bt-blue:hover,
.bbtn-bt-blue .x-btn-menu-active .x-btn-focus,
.bbtn-bt-blue.x-btn-focus {
background-color: #286090 !important;
border-color: #204d74 !important;
background-image: none !important;
outline: none!important;
}
.bbtn-bt-blue.x-btn-pressed {
background-color: #204d74 !important;
border-color: #122b40 !important;
background-image: none !important;
}
.bbtn-bt-blue:focus {
background-color: #286090;
border-color: #122b40
}
.bbtn-bt-green,
.bbtn-bt-green.x-btn-over {
background-color: #5cb85c;
background-image: none;
border-color: #4cae4c;
border-radius: 4px;
}
.bbtn-bt-green:hover,
.bbtn-bt-green .x-btn-menu-active .x-btn-focus,
.bbtn-bt-green.x-btn-focus {
background-color: #449d44 !important;
border-color: #398439 !important;
background-image: none !important;
outline: none!important;
}
.bbtn-bt-green.x-btn-pressed {
background-color: #398439 !important;
border-color: #255625 !important;
background-image: none !important;
}
.bbtn-bt-green:focus {
background-color: #449d44;
border-color: #255625
}
.bbtn-bt-cyan,
.bbtn-bt-cyan.x-btn-over {
background-color: #5bc0de;
background-image: none;
border-color: #46b8da;
border-radius: 4px;
}
.bbtn-bt-cyan:hover,
.bbtn-bt-cyan .x-btn-menu-active .x-btn-focus,
.bbtn-bt-cyan.x-btn-focus {
background-color: #31b0d5 !important;
border-color: #269abc !important;
background-image: none !important;
outline: none!important;
}
.bbtn-bt-cyan.x-btn-pressed {
background-color: #269abc !important;
border-color: #1b6d85 !important;
background-image: none !important;
}
.bbtn-bt-cyan:focus {
background-color: #31b0d5;
border-color: #1b6d85
}
.bbtn-bt-orange,
.bbtn-bt-orange.x-btn-over {
background-color: #f0ad4e;
background-image: none;
border-color: #eea236;
border-radius: 4px;
}
.bbtn-bt-orange:hover,
.bbtn-bt-orange .x-btn-menu-active .x-btn-focus,
.bbtn-bt-orange.x-btn-focus {
background-color: #ec971f !important;
border-color: #d58512 !important;
background-image: none !important;
outline: none!important;
}
.bbtn-bt-orange.x-btn-pressed {
background-color: #d58512 !important;
border-color: #985f0d !important;
background-image: none !important;
}
.bbtn-bt-orange:focus {
color: #fff;
background-color: #ec971f;
border-color: #985f0d
}
.bbtn-bt-red,
.bbtn-bt-red.x-btn-over {
background-color: #d9534f;
background-image: none;
border-color: #d43f3a;
border-radius: 4px;
}
.bbtn-bt-red:hover,
.bbtn-bt-red .x-btn-menu-active .x-btn-focus,
.bbtn-bt-red.x-btn-focus {
background-color: #c9302c !important;
border-color: #ac2925 !important;
background-image: none !important;
outline: none!important;
}
.bbtn-bt-red.x-btn-pressed {
background-color: #ac2925 !important;
border-color: #761c19 !important;
background-image: none !important;
}
.bbtn-bt-red:focus {
background-color: #c9302c;
border-color: #761c19;
outline: none!important;
}
.bbtn-bt-blue .x-btn-wrap,
.bbtn-bt-green .x-btn-wrap,
.bbtn-bt-cyan .x-btn-wrap,
.bbtn-bt-orange .x-btn-wrap,
.bbtn-bt-red .x-btn-wrap {
outline: none!important;
}
.bbtn-bt-blue .x-btn-inner,
.bbtn-bt-green .x-btn-inner,
.bbtn-bt-cyan .x-btn-inner,
.bbtn-bt-orange .x-btn-inner,
.bbtn-bt-red .x-btn-inner {
color: #FFF !important;
}</pre>
</div>
customcss</div>
使用方法：
拖出unibitbtn unibutton unispeedbutton
然后 layoutconfig->componentcls里设置
 <img alt="" loading="lazy" src="https://img2022.cnblogs.com/blog/37451/202201/37451-20220122190348726-1399877944.png">
bbtn-bt-blue （蓝色按钮）
bbtn-bt-green（绿色按钮）
bbtn-bt-cyan（青色按钮）
bbtn-bt-orange（橙色按钮）
bbtn-bt-red（红色按钮）
<hr>
3 uniButton 按钮上的文本能换行显示
<img src="https://img2022.cnblogs.com/blog/37451/202206/37451-20220624205937893-839508314.png">
 <img src="https://img2022.cnblogs.com/blog/37451/202206/37451-20220624205953599-1113528076.png">
<hr>
 4.实现右上角数字角标效果
<img src="https://img2022.cnblogs.com/blog/37451/202209/37451-20220929143609106-1853254946.png">
<div class="cnblogs_code">
<pre>.bntAdd
{
border-radius: 20px 20px 20px 20px;
color: #fff;
padding: 2px 6px;
font-size: 10px;
line-height: 16px;
background: #EA3447;
}</pre>
</div>
<img src="https://img2022.cnblogs.com/blog/37451/202209/37451-20220929143717983-1132849806.png">
 <img src="https://img2022.cnblogs.com/blog/37451/202209/37451-20220929143755191-582359766.png"> 
来源：https://www.cnblogs.com/tulater/p/12669357.html

頁: [1]

琼殿技术论坛's Archiver

uniGUI学习之uniButton设置图标+扁平化+角标CSS(34)