Toolbar Control with Sprite Support | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (182).NET Core  (28).NET MAUI  (233)Angular  (117)ASP.NET  (49)ASP.NET Core  (81)ASP.NET MVC  (87)Azure  (42)Black Friday Deal  (1)Blazor  (244)BoldSign  (15)DocIO  (24)Essential JS 2  (110)Essential Studio  (201)File Formats  (74)Flutter  (140)JavaScript  (227)Microsoft  (122)PDF  (86)Python  (1)React  (107)Streamlit  (1)Succinctly series  (131)Syncfusion  (993)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (46)Webinar  (53)Windows Forms  (59)WinUI  (72)WPF  (165)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (11)Business intelligence  (55)Button  (4)C#  (164)Chart  (154)Chart of the week  (62)Cloud  (16)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (74)Development  (694)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (43)Extensions  (31)File Manager  (8)Gantt  (23)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (530)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (48)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (426)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (648)What's new  (354)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)

Toolbar Control with Sprite Support

Haven’t you ever experienced a slower load time issue in your application due to image resources? The obvious solution would be sprite images! Sprite image support is one of the interesting features of the Syncfusion Toolbar control in ASP.NET, wherein you can use your own sprite images for any toolbar that displays images.

The Toolbar control provides a very easy way to use sprite images “just-like-that.” CSS Sprites can majorly reduce the number of HTTP requests for images referenced by a page. Sprite Images can be used in a toolbar by setting the EnableSpriteImage property to True, allowing the toolbar to support CSS sprites. The sprite image can be set to the toolbar by setting the background image CSS class to the SpriteImageCSSClass property of the toolbar. [ASPX]

<syncfusion:toolbar id="ToolBar1" runat="server" locked="True" controlrootcssclass="TBRoot" enablespriteimage="true" spriteimagecssclass="Sprite" autoformat="Office2007 Blue">
                <syncfusion:toolbaritem text="Bold" appearancemode="ImageOnly"></syncfusion:toolbaritem>
                <syncfusion:toolbaritem text="Angry" appearancemode="ImageOnly"></syncfusion:toolbaritem>
                <syncfusion:toolbaritem text="Computer" appearancemode="ImageOnly"></syncfusion:toolbaritem>
                <syncfusion:toolbaritem text="Cut" appearancemode="ImageOnly"></syncfusion:toolbaritem>
                <syncfusion:toolbaritem text="Clock" appearancemode="ImageOnly"></syncfusion:toolbaritem>
                <syncfusion:toolbaritem text="Embarrassed" appearancemode="ImageOnly"></syncfusion:toolbaritem>
                <syncfusion:toolbaritem text="WindowRefresh" appearancemode="ImageOnly"></syncfusion:toolbaritem>


.About { background-position: 0 0; width: 23px; height: 22px; } 
 .Angry { background-position: -33px 0; width: 19px; height: 19px; } 
 .Bold { background-position: -153px 0; width: 23px; height: 22px; } 
 .Clock { background-position: -281px 0; width: 19px; height: 19px; } 
 .Computer { background-position: -339px 0; width: 19px; height: 19px; }  
 .Cut { background-position: -430px 0; width: 23px; height: 22px; }  
 .Embarrassed { background-position: -851px 0; width: 19px; height: 19px; } 
 .WindowRefresh { background-position: -743px -34px; width: 23px; height: 22px; } 
 .Sprite { background-image:url('Sprite.png'); }

There are many sprite image generators found on the internet that will generate sprite images and provide the CSS for them in a couple of minutes. You have to use the CSS whose class name is the same as the Text property of the toolbar item. The sprite image can then be embedded via CSS and the CSS class has to be mapped to the “SpriteImageCSSClass” property of the toolbar.

The Syncfusion RichTextEditor control internally uses the toolbar control with sprite images enabled, which has significantly improved the image load time of the RichTextEditor.



Toolbar with Sprite



RichTextEditor with Toolbar Sprite Support


To find examples that show the implementation of a sprite image in a toolbar, follow the link below.


Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed