Apply Bootstrap Primary Style to Rectangle or Label?

Targets Web
1

I would like to apply the Bootstrap Primary Indicator style to a Rectangle and overlay it with a Label or apply the style to the Label. Is there a way to do this? I’m not finding anything like this in my searches.

2

Doing it to a standard Xojo rectangle can result in the classname being lost on re-render. You can try GraffitiRectangle if you’re a subscriber.

I’m in the middle of something right now, but I can work up an example in a bit.

3

Sigh… No I’m not a subscriber of Grafitti Suite. I was hoping that
Me.Indicator = WebUIControl.Indicators.Primary
would do what I wanted, but sadly that appears to do nothing.

4

Generally speaking, if the Indicator property isn’t shown in the inspector, then it’s not functional for that control.

5

I haven’t tested this, but you might try something like:

me.style.value("background") = "var(--primary)"

EDIT: Just tested it and it works.

1 Like
6

It works OK, but it doesn’t show the gradient from light to dark that my bootstrap theme uses for Primary in my WebToolBar and Buttons. Still it is better than nothing. Thanks for the help Anthony.

7

Primary is a color definition (IE: #007bff) not a class. If you’re looking for something else, then I’d need to know on which CSS class that gradient definition resides and what it looks like in CSS.

8

Just as an example, you can use something like the following to apply a gradient to WebRectangle:

me.Style.Value( "background-color" ) = "rgb(2,0,36)"
me.Style.Value( "background" ) = "linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%"
9

It appears in here:

.navbar.bg-primary{background-image:-webkit-gradient(linear, left top, left bottom, from(#2c508a), color-stop(50%, #14243e), to(#0f1b2e))

and here:

background-image:linear-gradient(#2c508a, #14243e 50%, #0f1b2e);background-repeat:no-repeat;-webkit-filter:none;filter:none;border:1px solid #0f1b2e}.btn-primary:not(.disabled):hover{background-image:-webkit-gradient(linear, left top, left bottom, from(#244170), color-stop(50%, #0f1b2e), to(#0b1524))

10 
me.Style.Value( "background-color" ) = "var(--primary)"
me.Style.Value( "background" ) = "linear-gradient(#2c508a, #14243e 50%, #0f1b2e)"
5 Likes
11

Beautiful!!! Thanks Anthony!!!

12

Happy to help.

3 Likes