Page 1 of 1

[ANGULAR] Changing Button color

Posted: Thu May 12, 2022 5:14 pm
by mv2022

How would I change the button color? For example, if I add a custom class b-test in the cls, would the class style be added in the gantt.stockholm.css file?

  <bryntum-button
            text = 'Save'
            cls = 'b-test'
            (onAction)="save()"
        ></bryntum-button>

Re: [ANGULAR] Changing Button color

Posted: Thu May 12, 2022 9:24 pm
by mats

You can set

            cls = 'b-green'

or other basic colors red/blue etc.


Re: [ANGULAR] Changing Button color

Posted: Thu May 12, 2022 9:34 pm
by mv2022

what if I want to add a custom color to the button, the background-color to be #00897b ? Thanks


Re: [ANGULAR] Changing Button color

Posted: Fri May 13, 2022 12:48 pm
by mats

Then you can either set a cls and include that color in your stylesheet, or use https://bryntum.com/docs/scheduler/api/Core/widget/Button#config-style


Re: [ANGULAR] Changing Button color

Posted: Fri May 13, 2022 5:20 pm
by mv2022

Sorry, I can't seem to get this to work.

If you can provide a small example of how this would be used in the inline-project demo if I wanted to add a custom class to the button.

I tried doing the following and didn't work in the inline-data demo project.

    <bryntum-button
        text = 'Change data'
        cls="test"
        style="background-color: red;"
        (onAction) = "onChangeData()"
    ></bryntum-button>

app.component.scss

.test{
    background-color: red;
    color: blue;
}

Re: [ANGULAR] Changing Button color

Posted: Fri May 13, 2022 8:15 pm
by mats

You will need to use a bit more specificity, as the default styling is using:

.b-button:not(.b-tab)