1. Home
  2. Forum
  3. Blazor
  4. SampleBaseComponent class

SampleBaseComponent class

I'm evaluating the Blazor Sidebar and wish to customise the Sidebar Menu in Blazor Sidebar Component demo.

The source includes an Inherits statement that references the SampleBaseComponent class.  Can you supply that?
I've replaced SampleBaseComponent with Syncfusion.Blazor.BaseComponent but it's not rendering as nicely as the demo on your web site.  Thanks.



7 Replies
SP Sowmiya Padmanaban Syncfusion Team April 9, 2020 11:18 AM UTC

Hi Peter,  
 
We have checked your reported problem. We would like to let you know that it is local class reference used for our sample browser site. There is no need to use this reference to render Sidebar (or any other SF Blazor components) in your application. 
 
We have prepared a sample for rendering the Sidebar with menu component. 
 
Refer the below links for Sidebar component. 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


PE Peter April 12, 2020 03:19 AM UTC

Sowmiya

Thankyou very much for the Sidebar example.  I've opened that and am experimenting with it to customise the icons and menu items.

I can see the example references the Open Iconic set of icons and I'd like to try substituting some of the icons in the example and referenced in Index.razor page with another icon from the Open Iconic library.

For example, the second Menu Item in the Sidebar example you've supplied is labelled "Notification" and is accompanied by a bell icon:

.sidebar-menu .icon-bell-alt:before {
        content: '\e802';}

If I want to substitute it with the Open Iconic Briefcase icon how do I do that?  I've tried adding the following:

.sidebar-menu .oi-briefcase:before {
        content: '\e024';
    }

and referencing that in:

new MenuItem {
            Text = "Notification",
            //IconCss = "icon-bell-alt icon",
            IconCss = "oi-briefcase icon",
            Items = new List<MenuItem> {
                new MenuItem{ Text = "Change Profile" },
                new MenuItem{ Text = "Add Name" },
                new MenuItem{ Text = "Add Details" }
            }

... but the briefcase icon is not correctly displayed.

I only have a basic understanding of CSS and would appreciate your help.  Thanks


Peter,

SD Saranya Dhayalan Syncfusion Team April 13, 2020 11:17 AM UTC

Hi Peter, 
 
Solution – 1 : We have checked your reported query, we suspect that you have referred the iconify design icon, so you need to refer the below script file in your sample.  
 
Host.cshtml 
<script src="https://code.iconify.design/1/1.0.5/iconify.min.js"></script> 
 
You need to add the below url in the content. 
Index.razor 
.sidebar-menu .oi-briefcase:before{ 
         content: url('https://api.iconify.design/oi-briefcase.svg?height=8'); 
 
    } 
 
Please find the below documentation link 
 
  
Please let us know if you need further assistance. 
 
Regards, 
Saranya D 


PE Peter April 14, 2020 04:39 AM UTC

Thankyou Saranya.  Your reply has been most helpful and I have now replaced some of the sample icons in my prototype project with some from the Open Iconic set.  I'm starting to understand how this is all done now.

I do have a further question about how I can reference SVG icons that I download individually from other sources but it will be a while before I need to do that so will leave that for another post.

Thanks again for your help.


Peter,

SD Saranya Dhayalan Syncfusion Team April 14, 2020 07:23 AM UTC

Hi Peter, 
 
Most welcome. 
 
Query: how I can reference SVG icons in the MenuItems. 
 
We have checked your query, we can achieve this by using IconCss property. Please find the below code snippet: 
 
@using Syncfusion.EJ2.Blazor.Navigations 
 
<EjsMenu Items="@MenuItems"></EjsMenu> 
 
@code { 
    public List<MenuItem> MenuItems = new List<MenuItem>{ 
        new MenuItem{ Text = "File", IconCss = "e-file", Items = new List<MenuItem>{ 
            new MenuItem { Text= "Open" }, 
            new MenuItem { Text= "Save" }, 
            new MenuItem { Separator= true }, 
            new MenuItem { Text= "Exit" }} 
    }       
    }; 
} 
<style> 
      
    .e-file { 
        background-image: url('img.jpg');       
     } 
 
    .e-menu-wrapper ul .e-menu-item .e-menu-icon { 
        width: 30px; 
             height: 30px; 
 
    } 
 
     
</style> 
 
For your convenience we have prepared a sample. Please find the below sample link: 
 
 
Could you please check the above sample and get back to us if you need further assistance on this?  
 
Regards,  
Saranya D 


PE Peter April 15, 2020 11:52 PM UTC

Saranya

Thanks.  Your example of how to reference SVG icon files within in the MenuItems is most usefual.  Thanks for your help.


Peter,

SD Saranya Dhayalan Syncfusion Team April 16, 2020 05:47 AM UTC

  
Hi Peter, 
 
Most Welcome… 
 
We are happy to hear that your requirement has been fulfilled. Kindly get back to us if you need any further assistance. 
 
Regards, 
Saranya D 


Loader.
Up arrow icon