How to change UniBitBtn's color?

[55143681]

I want to use UniBitBtn to do something,

1。How to change UniBitBtn's color?

2.How to mark the progress just like UniProgressBar?

Thanks everyone.

[artem_niko]

52 minutes ago, 55143681 said:

I want to use UniBitBtn to do something,

1。How to change UniBitBtn's color?

2.How to mark the progress just like UniProgressBar?

Thanks everyone.

Why you don't want use UniProgressBar?

[55143681]

12 hours ago, Артем said:

Why you don't want use UniProgressBar?

Because UniProgressBar does not have OnClick,

I need click it to call another function,

and at the same time ,

I want to show the progress and the status(color),

thank you.

[artem_niko]

5 minutes ago, 55143681 said:

Because UniProgressBar does not have OnClick,

I need click it to call another function,

and at the same time ,

I want to show the progress and the status(color),

thank you.

I have code, whos change color on UniProgressBar. 

I think, that this is code help you to change color of button. 

At the end Day I give you him. 

[Sherzod]

5 hours ago, 55143681 said:

Because UniProgressBar does not have OnClick,

1. UniProgressBar1.ClientEvents.ExtEvents ->

function click(sender, eOpts)
{
    ajaxRequest(sender, 'click', ['val=' + sender.getValue()]);
}

2. UniProgressBar1 -> OnAjaxEvent:

procedure TMainForm.UniProgressBar1AjaxEvent(Sender: TComponent;
  EventName: string; Params: TUniStrings);
begin
  if EventName = 'click' then
  begin
    // val*100 = Position
    ShowMessage(Params.Values['val']);
  end;

end;

 

[55143681]

On 3/4/2020 at 8:32 AM, Артем said:

I have code, whos change color on UniProgressBar. 

I think, that this is code help you to change color of button. 

At the end Day I give you him. 

Thank you.

[55143681]

On 3/4/2020 at 1:52 PM, Sherzod said:

1. UniProgressBar1.ClientEvents.ExtEvents ->

function click(sender, eOpts)
{
    ajaxRequest(sender, 'click', ['val=' + sender.getValue()]);
}

2. UniProgressBar1 -> OnAjaxEvent:

procedure TMainForm.UniProgressBar1AjaxEvent(Sender: TComponent;
  EventName: string; Params: TUniStrings);
begin
  if EventName = 'click' then
  begin
    // val*100 = Position
    ShowMessage(Params.Values['val']);
  end;

end;

 

Thank you,shezrod.this is a good way,
but,

Can I do that through UniBitBtn?

I would like use UniBitBtn to that,change the color and use color to show the progress just like uniProgressBar.

[55143681]

Just now, 55143681 said:

Thank you,shezrod.this is a good way,
but,

Can I do that through UniBitBtn?

I would like use UniBitBtn to that,change the color and use color to show the progress just like uniProgressBar.

and if I can do that,

because I create UniBitBtn dynamicly,

then ,How to add the method to UniBitBtn?

[Sherzod]

17 minutes ago, 55143681 said:

How to add the method to UniBitBtn?

What method?

[55143681]

9 minutes ago, Sherzod said:

What method?

[55143681]

8 minutes ago, 55143681 said:

And how to set UniBitBtn's caption 's Align?alLeft\alRight\alCenter?

[Sherzod]

19 minutes ago, 55143681 said:

And how to set UniBitBtn's caption 's Align?alLeft\alRight\alCenter?

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  UniBitBtn1.JSInterface.JSConfig('textAlign', ['left']); //center, left, right. Defaults to:'center'
end;

 

[55143681]

1 minute ago, Sherzod said:

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  UniBitBtn1.JSInterface.JSConfig('textAlign', ['left']); //center, left, right. Defaults to:'center'
end;

 

You are my Best Friend!

haha.：）

And I wish that  you can help me to resolve  my needs.

1.change UniBitBtn 's color

2.use the color represent the total progress just like uniProgressBar.

[Sherzod]

45 minutes ago, 55143681 said:

1.change UniBitBtn 's color

2.use the color represent the total progress just like uniProgressBar.

procedure TMainForm.UniBitBtn1Click(Sender: TObject);
var
  vPosition: Integer;
begin
  vPosition := 75;
  with UniBitBtn1.JSInterface do
  begin
    JSCall('btnWrap.setStyle', ['background-image', 'linear-gradient(to right, green, lime)']);
    JSCall('btnWrap.setStyle', ['background-size', vPosition.ToString + '% 100%']);
    JSCall('btnWrap.setStyle', ['background-repeat', 'no-repeat']);
  end;
end;

[55143681]

On 3/5/2020 at 6:03 PM, Sherzod said:

procedure TMainForm.UniBitBtn1Click(Sender: TObject);
var
  vPosition: Integer;
begin
  vPosition := 75;
  with UniBitBtn1.JSInterface do
  begin
    JSCall('btnWrap.setStyle', ['background-image', 'linear-gradient(to right, green, lime)']);
    JSCall('btnWrap.setStyle', ['background-size', vPosition.ToString + '% 100%']);
    JSCall('btnWrap.setStyle', ['background-repeat', 'no-repeat']);
  end;
end;

Sherzod:Thank you very very much,that is just what I want.,you are the best.

I want to know if I want to use yellow and red,

then "green lime " will be replaced with what for yellow? replaced with what for red?

[Sherzod]

5 minutes ago, 55143681 said:

I want to know if I want to use yellow and red,

then "green lime " will be replaced with what for yellow? replaced with what for red?

JSCall('btnWrap.setStyle', ['background-image', 'linear-gradient(to right, yellow, red)']);

You can also use several colors:

JSCall('btnWrap.setStyle', ['background-image', 'linear-gradient(to right, yellow, orange, red)']);

 

[55143681]

4 hours ago, Sherzod said:

JSCall('btnWrap.setStyle', ['background-image', 'linear-gradient(to right, yellow, red)']);

You can also use several colors:

JSCall('btnWrap.setStyle', ['background-image', 'linear-gradient(to right, yellow, orange, red)']);

 

Thanks a lot.

Another way.

JSCall('btnWrap.setStyle', ['background-image', 'linear-gradient(to right, rgba(255,255,0,0),rgba(255,255,0,1))']);