How to make a round corner for UnimPanel?

[55143681]

As you know,the follow code can make a round corner for UniPanel(Desktop),

But,have no effect for UnimPanel(Mobile),

How to make a round corner for UnimPanel?

 cbuilder：

newPanel->ClientEvents->ExtEvents->Values["afterrender"]="function(sender){sender.body.dom.style.borderRadius=\"10px\"}";
delphi:

ClientEvents.ExtEvents.Values['afterrender'] := 'function(sender){sender.body.dom.style.borderRadius="10px"}';

[Sherzod]

31 minutes ago, 55143681 said:

How to make a round corner for UnimPanel?

For example JS code:

MainmForm.UnimPanel1.bodyElement.setStyle('border-radius', '10px');

 

[55143681]

On 5/11/2020 at 5:01 PM, Sherzod said:

For example JS code:

MainmForm.UnimPanel1.bodyElement.setStyle('border-radius', '10px');

 

UnimPanel1 does not have bodyElement property,

why?

xe10.3.3 cbuilder/delphi +unigui1531

[Sherzod]

2 minutes ago, 55143681 said:

bodyElement

It's JS property... 

[55143681]

On 5/12/2020 at 6:50 PM, Sherzod said:

It's JS property... 

UnimPanel1.JSInterface.JSCode(#1'.bodyElement.dom.style.setProperty("border-color", "red", "important");');

 

UnimPanel1.JSInterface.JSCode(#1'.bodyElement.dom.style.setProperty("border-radius","10px");');
UnimPanel1.JSInterface.JSCode(#1'.bodyElement.setStyle("border-radius","10px");');

[55143681]

If I put UnimPanel1 in a form,the code has effect,

but，

If I create the UnimPanel dynamicly,the code has no effect,

why?

the code:

    //生成UnimPanel
  newPanel:=TUnimPanel.Create(Self);
    newPanel.Name:=concat('newPanel',ownerNo);//关联到唯一编号上，便于知道点击了谁
    newPanel.Parent:=UnimScrollBox1;
    newPanel.Height:=panelHeight;
    newPanel.BorderStyle:=ubsDefault;//ubsNone 可以取消边框
    newPanel.Align:=alTop;
    newPanel.AlignWithMargins:=true;//保留边界空间
    newPanel.OnMouseDown:=showDetail;//设置点击函数
  newPanel.JSInterface.JSCode(#1'.bodyElement.dom.style.setProperty("border-color", "red", "important");');
  newPanel.JSInterface.JSCode(#1'.bodyElement.dom.style.setProperty("border-radius","10px");');

[55143681]

1 hour ago, 55143681 said:

If I put UnimPanel1 in a form,the code has effect,

but，

If I create the UnimPanel dynamicly,the code has no effect,

why?

the code:

    //生成UnimPanel
  newPanel:=TUnimPanel.Create(Self);
    newPanel.Name:=concat('newPanel',ownerNo);//关联到唯一编号上，便于知道点击了谁
    newPanel.Parent:=UnimScrollBox1;
    newPanel.Height:=panelHeight;
    newPanel.BorderStyle:=ubsDefault;//ubsNone 可以取消边框
    newPanel.Align:=alTop;
    newPanel.AlignWithMargins:=true;//保留边界空间
    newPanel.OnMouseDown:=showDetail;//设置点击函数
  newPanel.JSInterface.JSCode(#1'.bodyElement.dom.style.setProperty("border-color", "red", "important");');
  newPanel.JSInterface.JSCode(#1'.bodyElement.dom.style.setProperty("border-radius","10px");');

Move the code from OnBeforeShow to OnShow will works fine.

for cbuilder:

newPanel->JSInterface->JSCode(String(newPanel->JSName )+".bodyElement.dom.style.setProperty(\"border-color\",\"gray\",\"important\");");
newPanel->JSInterface->JSCode(String(newPanel->JSName )+".bodyElement.dom.style.setProperty(\"border-radius\",\"5px\");");

for delphi:

  newPanel.JSInterface.JSCode(#1'.bodyElement.dom.style.setProperty("border-color", "red", "important");');
  newPanel.JSInterface.JSCode(#1'.bodyElement.dom.style.setProperty("border-radius","10px");');

[x11]

.mainbutton {
	margin: 5px 10px 10px 5px;
	border-radius: 15px;
	padding: 10px 0px 0px 0px;
	max-width: 40%;
	min-width: 128px;
	box-shadow: 3px 4px 7px 1px #b0b0b0;
	/*background-color: white!important;*/
}

border-radius +  LayoutConfig.Cls

[freedowsRoO]

 

12 hours ago, 55143681 said:

If I put UnimPanel1 in a form,the code has effect,

but，

If I create the UnimPanel dynamicly,the code has no effect,

why?

the code:

    //生成UnimPanel
  newPanel:=TUnimPanel.Create(Self);
    newPanel.Name:=concat('newPanel',ownerNo);//关联到唯一编号上，便于知道点击了谁
    newPanel.Parent:=UnimScrollBox1;
    newPanel.Height:=panelHeight;
    newPanel.BorderStyle:=ubsDefault;//ubsNone 可以取消边框
    newPanel.Align:=alTop;
    newPanel.AlignWithMargins:=true;//保留边界空间
    newPanel.OnMouseDown:=showDetail;//设置点击函数
  newPanel.JSInterface.JSCode(#1'.bodyElement.dom.style.setProperty("border-color", "red", "important");');
  newPanel.JSInterface.JSCode(#1'.bodyElement.dom.style.setProperty("border-radius","10px");');

 

Try this

newPanel.ClientEvents.UniEvents.Add('beforeInit=function beforeInit(sender, config){sender.cls="YOURCSS CLASS";}')

 

[55143681]

On 5/23/2020 at 9:10 PM, x11 said:

.mainbutton {
	margin: 5px 10px 10px 5px;
	border-radius: 15px;
	padding: 10px 0px 0px 0px;
	max-width: 40%;
	min-width: 128px;
	box-shadow: 3px 4px 7px 1px #b0b0b0;
	/*background-color: white!important;*/
}

border-radius +  LayoutConfig.Cls

thank you .