uniGUI之uniPanel(20)

1]uniPanel常用设置：

2]多个uniPanel在一个uniPanel里显示,类似早期QQ显示

3]去掉Panel的某些边框

4]动态修改Panel背景色

5]上下滚动panel时，Panel内控件，也跟随之上下滚动

6]标题栏添加菜单

7]边框圆角CSS

8]title文本大小改变

---

01]uniPanel常用设置：

  

---

 2]多个uniPanel在一个uniPanel里显示,类似早期QQ显示

 

 uniPanel0.AlignmentControl:=uniAlignmentClient;
 uniPanel0.Layout:=accordion; 

---

3]去掉Panel的某些边框

   3.1.在ServerModule.CustomCSS编写css配置:

  .x-panel-border-none /*border: none*/
  {
   border-color:transparent transparent transparent transparent;
   /*顺序: 上 右 下 左*/
  }
  .x-panel-border-topbottom /*border: top bottom*/
  {
   border-color:#99bbe8 transparent #99bbe8 transparent;
  }
  .x-panel-border-leftright /*border: left right*/ 
  {
   border-color:transparent #99bbe8 transparent #99bbe8;
  }

  3.22.设置Panel的边框样式
  LayoutConfig.BodyCls = x-panel-border-topbottom

---

4]动态修改Panel背景色

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  unisession.AddJS('Ext.get("'+ unipanel1.JSId+
  '-body").setStyle({"background-color":"#32404e"})');
end;

---

5]上下滚动panel时，Panel内控件，也跟随之上下滚动

设置uniPanel1的AutoScroll为True即可

---

 

6]标题栏添加菜单

先添加UniPanel1和UniMainMenu1,UniMainMenu1添加好菜单

---

7]边框圆角CSS

 

.myPanel .x-panel-body{ 
 border: 2px solid red;
  border-radius: 25px;
}

8]title文本大小改变

.x-title-text {
  font-size: 13px;
}