About Toolbar Item Templete

[Jacky]

Hi Support ,

I have set the SfSwitch Text in the control.

But the only On/Off  is effect. The Text can't display in the Toolbar Item Templete.

Please kindly help.

Best Regards!

Jacky

My razor Code

Show the Page

[Ruksar Moosa Sait]

Hi Jacky,

We have checked on your requirement and suggest you overwrite the default CSS class like the below code to achieve your requirement.

<SfSwitch @bind-Checked="isChecked" CssClass="custom-switch" TChecked="bool?"></SfSwitch>

<style>

    .e-switch-wrapper, .e-css.e-switch-wrapper {

        height: 24px;

        width: 65px;

        border-radius: 0;

   

  .e-switch-wrapper.custom-switch .e-switch-inner:before {

            content: "OFF";

            color: #e3165b;

            left: 3px;

        }

   .e-switch-wrapper.custom-switch .e-switch-inner:after {

            content: "ON";

            right: 5px;

            color: blue;

        }

</style>

For more information kindly refer to the link.

https://blazor.syncfusion.com/documentation/toggle-switch-button/how-to/customize-the-appearance-of-a-switch

Kindly try the attached sample and let us know if this meets your requirement.

Regards,

Ruksar Moosa Sait

Attachment: SfSwitch_fc85c20e.zip

[Jacky]

Hi  Ruksar Moosa Sait,

I got it, Thank for your kindly help.

Best Regards!

Jacky

[Satheesh Kumar Balasubramanian]

Hi Jacky,

Thanks for the update.

We are happy that your problem has been resolved now.

Regards,

Satheesh Kumar B