diff --git a/common-features/icons.md b/common-features/icons.md index 0576f674c..72dedde1d 100644 --- a/common-features/icons.md +++ b/common-features/icons.md @@ -1,7 +1,7 @@ --- title: Icons page_title: Font and SVG Icons -description: How to use the built-in font icons in the UI for Blazor suite. +description: Blazor Icons are customizable, scalable icons for Blazor apps that enhance UI design with easy styling. slug: common-features-icons tags: telerik,blazor,icon,font,built-in published: True @@ -9,9 +9,9 @@ previous_url: /common-features/font-icons position: 1 --- -# Built-in Font and SVG Icons +# Blazor SVG and Font Icons -Telerik UI for Blazor provides a large set of built-in icons. There are two ways to consume and render them: as font icons or as SVG icons. It is also possible to use custom icons, or define an application-wide setting, which affects the type of icons in all Telerik Blazor components. +Telerik UI for Blazor provides a large set of built-in icons. There are two ways to consume and render them: as font icons or as SVG icons. It is also possible to use custom Blazor icons, or define an application-wide setting, which affects the type of icons in all Telerik Blazor components. The Telerik Blazor components generate the same type of icons (font icons or SVG icons), [depending on the `TelerikRootComponent` configuration](#set-global-icon-type). However, Telerik UI for Blazor includes standalone [`FontIcon`](#fonticon-component) and [`SvgIcon`](#svgicon-component) components, which can be used at the same time. @@ -19,7 +19,7 @@ In general, font icons produce a smaller HTML footprint and the glyph can be ove This article contains the following sections: -* [How do icons work](#how-icons-work) +* [How do icons work](#how-blazor-icons-work) * [Install icon NuGet packages](#icon-nuget-packages) * [Import icon namespaces](#icon-namespaces) * [Register font icon stylesheet](#font-icon-stylesheet) (SVG icons don't need it) @@ -29,12 +29,15 @@ This article contains the following sections: * [`SvgIcon` component](#svgicon-component) * [Render custom SVG Icons with HTML](#render-custom-svg-icons-with-html) * [Use custom SVG icon collection](#use-custom-svg-icon-collection) -* [Set global icon type for the whole application](#set-global-icon-type) +* [Set global icon type for the whole application](#set-global-blazor-icon-type) * [Complete list of built-in icons](#icons-list) -* [How to use custom icons](#custom-icon-support) +* [How to use custom icons](#custom-blazor-icon-support) +{% if site.has_cta_panels == true %} +{% include cta-panel-introduction.html %} +{% endif %} -## How Icons Work +## How Blazor Icons Work The Telerik Blazor icons have three prerequisites to work: @@ -46,7 +49,7 @@ The Telerik Blazor icons have three prerequisites to work: The Telerik Blazor components use built-in icons with the help of two NuGet packages. They are installed **automatically** as dependencies of the `Telerik.UI.for.Blazor` package: -* `Telerik.FontIcons` - defines the `FontIcon` `enum` for easier usage of built-in **font** icons +* `Telerik.FontIcons` - defines the `FontIcon` `enum` for easier usage of built-in **font** Blazor icons * `Telerik.SvgIcons` - defines the `ISvgIcon` interface and the `SvgIcon` static class for built-in **SVG** icons >tip Unlike the `Telerik.UI.for.Blazor` package, the icon packages are available on the `nuget.org` source. Keep this in mind when using [`packageSourceMapping`](slug:installation/nuget#package-source-mapping). @@ -289,7 +292,7 @@ The `ISvgIcon` interface members are: ```` -## Set Global Icon Type +## Set Global Blazor Icon Type It is possible to configure the icon type for the whole application: @@ -328,7 +331,7 @@ Each icon box in the icon list is clickable and reveals the following details: The icon list may contain icons which are not available in older versions of Telerik UI for Blazor or even in the latest one. Such icons will be added in the next product version. -## Custom Icon Support +## Custom Blazor Icon Support Telerik UI for Blazor supports using custom (third-party) icons: @@ -343,4 +346,6 @@ Telerik UI for Blazor supports using custom (third-party) icons: * Built-in Icon List * [Blazor Live Demos](https://demos.telerik.com/blazor-ui) +* [Blazor FontIcon](https://demos.telerik.com/blazor-ui/fonticon/overview) +* [Blazor SVGIcon](https://demos.telerik.com/blazor-ui/svgicon/overview) * [CSS Themes](slug:themes-overview) diff --git a/components/grid/overview.md b/components/grid/overview.md index 8014e47a6..807c52c4e 100644 --- a/components/grid/overview.md +++ b/components/grid/overview.md @@ -12,7 +12,7 @@ position: 0 This article provides a quick introduction to get your first Blazor data grid component up and running in a few seconds. There is a video tutorial and a list of the key features. -The Telerik Blazor Data Grid provides a comprehensive set of ready-to-use features. They cover everything from paging, sorting, filtering, editing, and grouping to row virtualization, optimized data reading, keyboard navigation and accessibility support. +The Telerik Blazor Data Grid provides a comprehensive set of ready-to-use features that cover everything from paging, sorting, filtering, editing, and grouping to row virtualization, optimized data reading, keyboard navigation, and accessibility support. The Telerik Blazor grid is built on native Blazor from the ground up, by a company with a long history of making enterprise-ready Grids. This results in a highly customizable Grid that delivers lighting fast performance. @@ -226,3 +226,17 @@ To execute these methods, obtain reference to the Grid instance via `@ref`. * [Live Demos: Grid](https://demos.telerik.com/blazor-ui/grid/overview) * [Grid API Reference](slug:Telerik.Blazor.Components.TelerikGrid-1) + + \ No newline at end of file diff --git a/getting-started/server-blazor.md b/getting-started/server-blazor.md index dd6d7c78e..d38b99b12 100644 --- a/getting-started/server-blazor.md +++ b/getting-started/server-blazor.md @@ -1,7 +1,8 @@ --- title: Blazor Server App page_title: First Steps with Blazor Server Apps and Telerik UI for Blazor -description: Make your first steps with Telerik UI for Blazor and build an app that runs the UI components server-side in Blazor server. +meta_title: First Steps with Blazor Server-Side UI - Telerik UI for Blazor +description: Blazor Server is a .NET framework that runs C# on the server, enabling interactive UIs via SignalR. slug: getting-started/server-side tags: get,started,first,steps,server published: true @@ -10,12 +11,16 @@ position: 15 # First Steps with Server-Side UI for Blazor -This article explains how to get the Telerik UI for Blazor components in your .NET 6 or 7 Blazor Server app and start using them quickly. You will create a new application from scratch, learn how to add the UI for Blazor components to a project, and finally, add a UI component to a view. +Blazor Server runs C# on the server and updates the UI in the browser through a SignalR connection, enabling interactive web apps without client-side .NET execution. This article explains how to get the Telerik UI for Blazor components in your .NET 6 or 7 Blazor Server app and start using them quickly. You will create a new application from scratch, learn how to add the UI for Blazor components to a project, and finally, add a UI component to a view. > This article applies only to the **Blazor Server App** template in Visual Studio, which exists up to .NET 7. If you are using newer .NET versions, then follow the [tutorial about Blazor Web Apps](slug:getting-started/web-app). @[template](/_contentTemplates/common/get-started.md#prerequisites-tip) +{% if site.has_cta_panels == true %} +{% include cta-panel-introduction.html %} +{% endif %} + ## Prerequisites @[template](/_contentTemplates/common/get-started.md#prerequisites-download) @@ -42,7 +47,7 @@ This article explains how to get the Telerik UI for Blazor components in your .N 1. Right-click the Blazor Server project in the solution and select **Manage NuGet Packages**. -![Manage NuGet Packages](images/manage-nuget-packages-for-server-app.png) +![Manage NuGet Packages in Blazor Server](images/manage-nuget-packages-for-server-app.png) 2. Install the Telerik Blazor NuGet package: @@ -119,3 +124,17 @@ If you prefer video instructions, you can also check the video tutorial below. * [Getting Started Videos for Blazor](https://www.youtube.com/watch?v=aaRAZYaJ4xc&list=PLvmaC-XMqeBYPTwcm478vs8Rujq2tiVJo) * [First Steps with Blazor Web App](slug:getting-started/web-app) * [First Steps with Blazor WebAssembly](slug:getting-started/client-side) + + \ No newline at end of file diff --git a/getting-started/web-app.md b/getting-started/web-app.md index 94ea4154a..72e91b068 100644 --- a/getting-started/web-app.md +++ b/getting-started/web-app.md @@ -17,6 +17,10 @@ This article explains how to use the Telerik UI for Blazor components in a Blazo > Telerik UI for Blazor [requires interactive render mode](#interactive-render-mode). Using [**Global** Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0#apply-a-render-mode-to-the-entire-app) is highly recommended. +{% if site.has_cta_panels == true %} +{% include cta-panel-introduction.html %} +{% endif %} + ## Prerequisites @[template](/_contentTemplates/common/get-started.md#prerequisites-download) diff --git a/integrations/reporting.md b/integrations/reporting.md index 1a4a5b1b3..e50892fcd 100644 --- a/integrations/reporting.md +++ b/integrations/reporting.md @@ -1,6 +1,7 @@ --- title: Reporting page_title: Reporting +meta_title: Blazor Reporting enables creating, viewing, and exporting dynamic reports in Blazor apps, combining .NET with web UI. description: Reporting for Blazor apps. slug: reporting-in-blazor position: 0 @@ -8,7 +9,11 @@ position: 0 # Blazor Reporting -You can utilize the [Telerik Reporting](https://www.telerik.com/products/reporting) product to embed reporting functionality in your Blazor app. We provide the following components for easy integration (find detailed information in the respective articles that are part of the Telerik Reporting product documentation). +To effectively integrate Blazor Reporting functionalities into your Blazor application, you can leverage the capabilities provided by [Telerik Reporting](https://www.telerik.com/products/reporting). This integration offers several components tailored for Blazor, enhancing your application's reporting features. + +{% if site.has_cta_panels == true %} +{% include cta-panel-introduction.html %} +{% endif %} * [Telerik Blazor Report Viewer](#telerik-blazor-report-viewer) * [Telerik Native Blazor Report Viewer](#telerik-native-blazor-report-viewer) @@ -16,7 +21,7 @@ You can utilize the [Telerik Reporting](https://www.telerik.com/products/reporti ## Telerik Blazor Report Viewer -The [Telerik Blazor Report Viewer Component](https://docs.telerik.com/reporting/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/overview) enables you to embed a report preview into you app. The component is built on top of our robust and reliable HTML5 Report Viewer - a JavaScript/jQuery widget with lots of customization options. See this report viewer component into action in the [Dashboard Report Demo](https://demos.telerik.com/reporting/dashboard). This report viewer includes the following functionality: +The [Telerik Blazor Report Viewer Component](https://docs.telerik.com/reporting/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/overview) allows you to embed Blazor Reporting previews directly within your Blazor application. Built upon the robust HTML5 Report Viewer, this component offers extensive customization options. See this report viewer component into action in the [Dashboard Report Demo](https://demos.telerik.com/reporting/dashboard). Key functionalities include: * Preview the pages of the resulting report document on screen; * Print the report; @@ -25,7 +30,7 @@ The [Telerik Blazor Report Viewer Component](https://docs.telerik.com/reporting/ * Use any other interactive features that the Telerik Reporting product offers. >caption Dashboard Report Demo -![dashboard report demo](images/dashboard-report-demo.png) +![Blazor dashboard report demo](images/dashboard-report-demo.png) ## Telerik Native Blazor Report Viewer @@ -33,10 +38,12 @@ The [Telerik Native Blazor Report Viewer Component](https://docs.telerik.com/rep ## Telerik Blazor Report Designer -The [Telerik Blazor Report Designer Component](https://docs.telerik.com/reporting/how-to-blazor-web-report-designer) enables you to embed a Report Designer tool in your Blazor application. This empowers your trusted end-users to edit existing or create new report definitions from scratch. See the Report Designer into action in the [Web Report Designer Demo](https://demos.telerik.com/reporting/designer) +The [Telerik Blazor Report Designer Component](https://docs.telerik.com/reporting/how-to-blazor-web-report-designer) empowers you to embed a Report Designer tool within your Blazor application. This feature enables end users to edit existing reports or create new report definitions from scratch, enhancing the versatility of your Blazor Reporting capabilities. Experience this component in action through the [Web Report Designer Demo](https://demos.telerik.com/reporting/designer). + +By integrating these components, you can significantly enhance the Blazor Reporting functionalities of your application, providing users with comprehensive tools for report viewing, customization, and creation. >caption Web Report Designer Demo -![web report designer demo](images/web-report-designer-demo.png) +![Blazor web report designer demo](images/web-report-designer-demo.png) ## See Also diff --git a/introduction.md b/introduction.md index 014c0c546..0ad7c5143 100644 --- a/introduction.md +++ b/introduction.md @@ -1,7 +1,8 @@ --- title: Introduction page_title: Blazor Documentation for UI Components -description: Check out the Telerik UI for Blazor documentation for guidance and examples on creating web applications with .NET using C# for the front-end. +meta_title: Blazor Documentation - Telerik UI for Blazor +description: Read the Telerik UI for Blazor documentation for guidance and examples on creating web apps with .NET using C#. slug: blazor-overview position: 1 --- @@ -257,3 +258,17 @@ For any issues you might encounter while working with Telerik UI for Blazor, use * Use guided wizards to generate new Telerik Projects in [Visual Studio](slug:getting-started-vs-integration-new-project) and [Visual Studio Code](slug:getting-started-vs-code-integration-overview). * [Convert an existing project to a Telerik-enabled project](slug:getting-started-vs-integration-convert-project) * [Style the Telerik Blazor Components](slug:themes-overview) + + \ No newline at end of file diff --git a/styling-and-themes/overview.md b/styling-and-themes/overview.md index d99fe410e..f9684231f 100644 --- a/styling-and-themes/overview.md +++ b/styling-and-themes/overview.md @@ -20,6 +20,10 @@ Telerik UI for Blazor comes with a set of built-in CSS themes that control the v * How to [register a theme in your app](#using-a-theme) * How to [ensure compatibility between the Telerik components and the theme version](#compatibility-and-maintenance) +{% if site.has_cta_panels == true %} +{% include cta-panel-introduction.html %} +{% endif %} + ## Basics ### What is a Theme?