1. Home
  2. Forum
  3. Blazor
  4. Hide a Button & Centre an icon in a Button

Hide a Button & Centre an icon in a Button

Hi

I have two questions about the Button (sfButton) in SyncFusion Blazor v18.4.043.

The attached screen.shot shows a round button with a yellow horn/speaker icon.  The required behaviour is for the button to be enabled/disabled dynamically and for the background to lighten and a tooltip to be displayed when the user passes their mouse over the button.

  1. sfButton includes a Disabled property but no Hidden or Visible properties.  How do I dynamically hide/show a sfButton?
  2. I've spent ages trying to centre the yellow horn/speaker icon within the sfButton with no success.  Can you help me with the CSS to achieve that please?

My razor (incl the CSS classes I'm using) and code file is also attached.

Thanks for your help.


Peter

Attachment: sfButton_Files_6eec07ab.zip

3 Replies 1 reply marked as answer
GK Gayathri KarunaiAnandam Syncfusion Team March 1, 2021 01:28 PM UTC

Hi Peter, 

Thank you for contacting Syncfusion support. 

We have checked your reported query.  

Query 1: button to be enabled/disabled dynamically 
We can enable/disable the button component dynamically by using Disabled property as demonstrated in the below code snippet. 
 
Index.Razor  
 
<SfButton ID="btnTreatment" CssClass="e-custom" IconCss="e-icons e-DoubleArrowLeft" IconPosition="IconPosition.Left" Disabled="@OkayDisabled" OnClick="Click"></SfButton> 
 
@code { 
// To disable/enable the button on click 
    public bool OkayDisabled = false; 
    public void Click() 
    { 
        OkayDisabled = !OkayDisabled; 
    } 
} 

Query 2: tooltip to be displayed when the user passes their mouse over the button 
We can add tooltip for button component by HtmlAttributes property as demonstrated in the below code snippet 
 
<SfButton Content="Toggle" OnClick="toggle" HtmlAttributes="@primButton"></SfButton> 
 
@code { 
 
//Tooltip for button 
    private Dictionary<string, object> primButton = new Dictionary<string, object>() 
    { 
        { "title", "Toggle Button"} 
    }; 
} 


Query 3: How do I dynamically hide/show a sfButton? 
We can hide/show the button component by using Css styles as demonstrated in the below code snippet. 

<SfButton ID="btnTreatment" CssClass="e-custom" IconCss="e-icons e-DoubleArrowLeft" IconPosition="IconPosition.Left" Disabled="@OkayDisabled" OnClick="Click"></SfButton> 
 
<SfButton Content="Toggle" OnClick="toggle" HtmlAttributes="@primButton"></SfButton> 
@code { 
 
    private string display = "block"; 
    //To hide/show the button 
    private void toggle() 
    { 
        if (display == "block") 
        { 
            display = "none"; 
        } else 
        { 
            display = "block"; 
        } 
    } 
} 
<style> 
        .e-custom { 
            display:@display;  
            border-radius: 25px; 
            height: 48px; 
            width: 48px; 
             
        } 
</style> 

Query 4: center the icon 
We can center the button icon using Css style as demonstrated in the below code snippet. 
<style> 
.e-DoubleArrowLeft::before { 
            content: '\e7ba'; 
            color: yellow; 
            font-size: 40px; 
            margin: 0 -16px; // To position the icon 
        } 
 
    </style> 

For your reference, we have prepared a sample based on your requirement. Please check the below link. 


Please check the above link and get back to us, if you need further assistance. 

Regards, 
Gayathri K 


Marked as answer
PE Peter March 2, 2021 04:08 AM UTC

Thank you Gayathri

The examples you have provided have enabled me to resolve the issues I was struggling to solve on my own.  Many thanks for your prompt response.

Peter,

GK Gayathri KarunaiAnandam Syncfusion Team March 3, 2021 06:08 AM UTC

Hi Peter, 

Thanks for the update. 
 
We are happy to hear that your requirement has been fulfilled. Please feel free to contact us if you need any further assistance on this. 
 
Regards, 
Gayathri K 


Loader.
Up arrow icon