From 17177abf1258774fe86a5838682556ce6d0c758d Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Wed, 8 Oct 2025 18:55:06 +0530 Subject: [PATCH 1/5] Updated the Blazor common UG documentation --- blazor/appearance/figma.md | 60 +++++++++++++++---------------- blazor/appearance/icons.md | 26 +++++++------- blazor/appearance/size-modes.md | 30 +++++++++------- blazor/appearance/theme-studio.md | 34 +++++++++--------- blazor/appearance/themes.md | 43 +++++++++++----------- 5 files changed, 99 insertions(+), 94 deletions(-) diff --git a/blazor/appearance/figma.md b/blazor/appearance/figma.md index 7b22679bcf..192dc6dde0 100644 --- a/blazor/appearance/figma.md +++ b/blazor/appearance/figma.md @@ -1,31 +1,31 @@ --- layout: post -title: Introduction to the Figma UI Kit in Blazor - Syncfusion -description: Check out and learn about the introduction to the Figma UI Kit in the Syncfusion Blazor and more details. +title: Figma UI kits for Syncfusion Blazor - Syncfusion +description: Learn about Syncfusion’s Figma UI kits for Blazor, available for Material 3, Fluent, Tailwind, and Bootstrap 5 themes, and how to export design tokens. platform: Blazor -component: Common +control: Common documentation: ug --- -# Figma UI Kits for Syncfusion® Controls +# Figma UI kits for Syncfusion® controls -Syncfusion® offers [Figma UI kits](https://www.figma.com/@syncfusion) to facilitate effective collaboration between designers and developers. The Figma UI kits are available in four themes: [Material 3](https://www.figma.com/community/file/1385969023252455137/syncfusion-ui-kit-material-3-theme), [Fluent](https://www.figma.com/community/file/1385969120047188707/syncfusion-ui-kit-fluent-theme), [Tailwind](https://www.figma.com/community/file/1385969065626384098/syncfusion-ui-kit-tailwind-theme), and [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272/syncfusion-ui-kit-bootstrap-5-theme). These kits match the themes used in Syncfusion® controls. +Syncfusion® provides [Figma UI kits](https://www.figma.com/@syncfusion) to streamline collaboration between designers and developers. The kits match the themes used by Syncfusion® Blazor components and are available for [Material 3](https://www.figma.com/community/file/1454123774600129202/syncfusion-ui-kit-material-3-theme), [Fluent](https://www.figma.com/community/file/1385969120047188707/syncfusion-ui-kit-fluent-theme), [Tailwind](https://www.figma.com/community/file/1385969065626384098/syncfusion-ui-kit-tailwind-theme), and [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272/syncfusion-ui-kit-bootstrap-5-theme). -The kits contain reusable design controls with various possible states and variants, along with detailed figures, measurements, and icons, representing the Syncfusion® controls. +Each kit contains reusable design controls with states and variants, along with detailed figures, measurements, and icons that represent Syncfusion® controls. -![Material 3](./images/material3.png) +![Preview of the Material 3 Figma UI kit](./images/material3.png) ## Advantages of UI kits -The Syncfusion® Figma UI kit offers the following key advantages: -- The UI kit includes detailed information about Syncfusion® controls, such as available control lists, their states, and variants. This facilitates a quick understanding of Syncfusion® controls. -- Design controls are developed using the [atomic design methodology](https://atomicdesign.bradfrost.com/chapter-2/), making customization straightforward and efficient. -- Developers can seamlessly match Syncfusion® controls with your design requirements, ensuring alignment and accuracy. -- By using standardized controls and themes, the UI kit ensures consistency in your designs, maintaining a uniform look and feel across projects. +The Syncfusion® Figma UI kits offer the following advantages: +- Detailed information about controls, including lists, states, and variants, to quickly understand available options. +- Design controls follow the [atomic design methodology](https://atomicdesign.bradfrost.com/chapter-2/), making customization straightforward. +- Developers can match Syncfusion® controls to design requirements for alignment and accuracy. +- Standardized controls and themes maintain a consistent look and feel across projects. ## Downloading the UI kits -Syncfusion® Figma UI kits are available in the [Figma community](https://www.figma.com/@syncfusion). You can download the Syncfusion® theme-specific Figma UI kits from the following links: +The Syncfusion® Figma UI kits are available in the [Figma community](https://www.figma.com/@syncfusion). Download the theme-specific kits from the following links: - [Material 3](https://www.figma.com/community/file/1454123774600129202/syncfusion-ui-kit-material-3-theme) - [Fluent](https://www.figma.com/community/file/1385969120047188707/syncfusion-ui-kit-fluent-theme) @@ -34,7 +34,7 @@ Syncfusion® Figma UI kits are available in ## Structure of the UI kits -Syncfusion’s Figma UI kit is structured to offer a comprehensive and user-friendly layout, facilitating easy navigation and exploration of various controls. It includes the following pages: +The Figma UI kits are structured for easy navigation and exploration of controls. They include the following pages: - **Thumbnail**: This page serves as the cover page for the UI kit. - **Index**: Here, users can find a detailed list of all control names, making it simple to identify and locate specific controls within the UI kit. @@ -45,57 +45,57 @@ Syncfusion’s Figma UI kit is structured to offer a comprehensive and user-frie ## Customizing the UI kits -The Syncfusion® Figma UI kits are easily customizable to meet your specific needs, allowing you to create unique designs and adjust colors to match your brand guidelines. The [atomic design methodology](https://atomicdesign.bradfrost.com/chapter-2/) used in developing these controls, your customizations will be seamlessly reflected across multiple controls and their variants. +The Syncfusion® Figma UI kits are customizable to meet specific needs, allowing unique designs and color adjustments to match brand guidelines. Because the controls are built using the [atomic design methodology](https://atomicdesign.bradfrost.com/chapter-2/), customizations will be seamlessly reflected across multiple controls and variants. Here's how to customize the primary button color of the Material 3 theme within your layout: 1. Visit our [UI kits](#downloading-the-ui-kits) and choose your preferred theme, such as the Material 3 theme. -2. Open the selected theme in the Figma web application by clicking the **Open in Figma** button. -3. For the desktop application, click the **Import** button in the top-right corner of the page. Select the downloaded Syncfusion® fig file you want to import and click the **Open** button. +2. Open the selected theme in the Figma web application by clicking **Open in Figma**. +3. For the desktop application, click **Import** in the top-right corner. Select the downloaded Syncfusion® Figma file and click **Open**. 4. Identify the button you wish to customize within your layout. -5. On the right side of the Figma interface, find the color variable options listed. For example, the variable for a particular button color might be labeled as `$primary-bg-color`, derived from the primary color variable. -6. To customize this primary button control color, click outside the button to see the **Local variables** option on the right side of the Figma interface. It contains the design token for the color variables. Click the **Local variables** option. +5. On the right side of the Figma interface, locate the color variables. For example, a button color variable might be labeled `$primary-bg-color`, derived from the primary color variable. +6. To customize the primary button color, click outside the button to reveal the **Local variables** panel. It contains the design tokens for color variables. Click **Local variables**. 7. A popup will show the design token list. You can change the primary color using a color palette. 8. Once you've selected the new color (e.g., pink) for the primary variable, the button's color pattern will be updated accordingly. You'll see the changes reflected in real-time within your design. -![Customization](./images/customize.png) +![Customize a component primary color using local variables](./images/customize.png) In addition to changing the button color, you can also customize other aspects like font, spacing, shadows, etc., of the UI controls: Feel free to experiment with these customization options to create a design that perfectly matches your requirements. -## Downloading the customized styles +## Download customized styles -Effortlessly download customized style changes as tokens and CSS variables using the `Syncfusion® Design Tokens` plugin. This plugin bridges the gap between design and development by converting Figma design variables into Syncfusion® tokens for direct use in your applications to ensure a smooth transition from design to implementation. +Download customized style changes as tokens and CSS variables using the Syncfusion® Design Tokens plugin. This plugin bridges the gap between design and development by converting Figma design variables into Syncfusion® tokens for direct use in your applications to ensure a smooth transition from design to implementation. ### Exporting design tokens Follow these steps to download the customized styles from the Figma UI Kit: - First, open a [Syncfusion® Figma UI Kit](https://www.figma.com/@syncfusion). -- Navigate to the `Plugin & widgets` section in Figma and search for the `Syncfusion® Design Tokens`. -- Once found, run the plugin. A popup will appear with an `Export` button. +- Navigate to the `Plugins and widgets` section in Figma and search for **Syncfusion® Design Tokens**. +- Run the plugin. A dialog appears with an `Export` button. - Click the `Export` button. This action will generate a zip file containing your design tokens. - Select a directory to save the exported files. - Extract the downloaded zip file to access its contents. ![export-design-tokens](./images/syncfusion-design-tokens.png) -### Utilizing design tokens +### Use design tokens The exported zip file includes the following files: - - `css-variables.css`: The css-variables.css file contains CSS variables for both light and dark themes, directly derived from your Figma designs. You can easily import this file into your application alongside the component styles to reflect your custom designs. - - `-tokens.json`: This file (e.g., material3-tokens.json) contains style variables and values in a JSON format compatible with [Theme Studio](./theme-studio). This file, prefixed with the corresponding theme name, can be [imported](./theme-studio#import-previously-changed-settings-into-the-theme-studio) into [Theme Studio](./theme-studio) for further customization. After processing in [Theme Studio](./theme-studio), you can [download](./theme-studio#download-the-customized-theme) the updated styles file and integrate it into your application, bringing your custom themes to life. + - `css-variables.css`: Contains CSS variables for light and dark themes derived from the Figma design. Import this file alongside component styles to reflect custom designs. + - `-tokens.json`: Contains style variables and values in a JSON format compatible with [Theme Studio](./theme-studio). This file, prefixed with the corresponding theme name, can be [imported](./theme-studio#import-previously-changed-settings-into-the-theme-studio) into [Theme Studio](./theme-studio) for further customization. After processing in [Theme Studio](./theme-studio), you can [download](./theme-studio#download-the-customized-theme) the updated styles file and integrate it into your application, bringing your custom themes to life. This streamlined process ensures that your unique design vision, crafted in Figma, is accurately translated into your final application, maintaining consistency between design and implementation. -## Upgrading the UI kits +## Upgrade the UI kits -To upgrade your UI kits, download the latest version from the provided links. Follow these guidelines for a seamless upgrade process: +To upgrade the UI kits, download the latest versions from the links above. Follow these guidelines for a seamless upgrade: - Keep track of updates or new versions of UI kits from Syncfusion. - Before upgrading, back up your ongoing projects to prevent data loss or compatibility issues. -- Share your experience with Syncfusion® regarding the upgraded UI kits, including any issues encountered or suggestions for improvement. +- Share feedback regarding the upgraded UI kits, including any issues encountered or suggestions for improvement. ## See also diff --git a/blazor/appearance/icons.md b/blazor/appearance/icons.md index 016b2911b2..fb5b7efe4f 100644 --- a/blazor/appearance/icons.md +++ b/blazor/appearance/icons.md @@ -1,17 +1,17 @@ --- layout: post -title: Icons Library in Blazor - Syncfusion -description: Checkout and learn here all about how to use Icons in the Syncfusion Blazor Component and its type of icons. +title: Blazor icons library - Syncfusion +description: Learn how to use the Syncfusion Blazor icons with SfIcon and e-icons, set sizes and tooltips, customize appearance, and integrate third-party icon fonts. platform: Blazor -component: Common +control: Common documentation: ug --- -# Blazor Icons Library +# Blazor icons library -The Syncfusion® Blazor library provides the set of `base64` formatted font icons which are being used in the Syncfusion® Blazor components. These icons can be utilized in the web applications using `SfIcon` component or `e-icons` class. +The Syncfusion® Blazor library provides a set of base64-formatted font icons used across Syncfusion® Blazor components. Icons can be used via the `SfIcon` component or the `e-icons` CSS class. -Check out the video to quickly get started with the Blazor Icon component: +Watch a quick-start video for the Blazor Icon component: {% youtube "youtube:https://www.youtube.com/watch?v=H1nQCAHzKZ0"%} @@ -20,7 +20,7 @@ Check out the video to quickly get started with the Blazor Icon component: Syncfusion® Icon component provides support to render predefined Syncfusion® icons or custom font icons. -You can refer [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio page](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) for the introduction and configuring the common specifications. +Refer to the [Getting started with Syncfusion Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) guide for installation and common configuration. The following code example shows the rendering of built-in Syncfusion® icons from predefined [IconName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.IconName.html) options using [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfIcon.html#Syncfusion_Blazor_Buttons_SfIcon_Name) property by defining them in `SfIcon` tag. @@ -39,7 +39,7 @@ The following code example shows the rendering of built-in Syncfusion The `Size` property is applicable only when defining the icon using `Name` pr ### Icon appearance customization -The [SfIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfIcon.html) supports to customize color and size by overriding the `e-icons` class. +The [SfIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfIcon.html) supports customizing color and size by overriding the `e-icons` class. The following example code demonstrates the custom font-size and color for icons. @@ -119,7 +119,7 @@ The following example code demonstrates the custom font-size and color for icons ![Blazor Icon Component Customization](./images/icons/custom-icon.png) -### Third party icons integration +### Third‑party icons integration The [SfIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfIcon.html) supports to render custom font icons using the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfIcon.html#Syncfusion_Blazor_Buttons_SfIcon_IconCss) property. To render custom font icons define the required font CSS that provides the required font name, font size, and content for the icon. @@ -127,6 +127,8 @@ The following code explains how to render `open-iconic` icons using `IconCss` pr Include the stylesheet reference in the `` section of the **~/App.razor** file as shown below: +Example link tag: + ```html .... @@ -183,9 +185,9 @@ The following example shows how to integrate the icons with Syncfusion® icons can be rendered directly in the HTML element by defining `e-icons` class that contains the font-family and common property of font icons, and defining the [available icon's](#icons-list) class with `e-` prefix. +Built-in Syncfusion® icons can be rendered directly in an HTML element by adding the `e-icons` class (font family and common properties) and the [available icon](#icons-list) class with the `e-` prefix. The following code example explains the direct rendering of Syncfusion® `search` icon in the span element. diff --git a/blazor/appearance/size-modes.md b/blazor/appearance/size-modes.md index d617a97959..800fe28c6e 100644 --- a/blazor/appearance/size-modes.md +++ b/blazor/appearance/size-modes.md @@ -1,19 +1,20 @@ --- layout: post -title: Component Size Modes in Blazor - Syncfusion -description: Check out and learn here all about component size mode for Syncfusion Blazor Components and much more. +title: Size modes for Blazor components - Syncfusion +description: Learn here how to enable touch-friendly sizing with the .e-bigger class in Syncfusion Blazor, apply it app-wide or per component, and toggle at runtime. platform: Blazor -component: Appearance +control: Appearance documentation: ug --- -# Size Mode for Blazor Components +# Size modes for Syncfusion® Blazor components -Syncfusion® Blazor components supports touch (bigger theme) and normal size modes. The following topics explain how to enable the same in your application. +Syncfusion® Blazor components support two size modes: normal and touch (bigger theme). The following sections show how to enable them. -## Size mode for application +## Size mode for the application + +You can enable touch mode (bigger theme) for an application by adding the `.e-bigger` class in your app stylesheet (`~/wwwroot/css/app.css or site.css`) and applying it to the `body` element. -You can enable touch mode (bigger theme) for an application by adding `.e-bigger` class in `~/wwwroot/css/app.css or site.css` file ou your Blazor App and assign to the `body` as follows, * For **Blazor Web App**, assign `.e-bigger` class to `body` element of **~/Components/App.razor** file. * For **Blazor WebAssembly application**, assign `.e-bigger` class to `body` element of **wwwroot/index.html** file. * For **Blazor Server application**, assign `.e-bigger` class to `body` element of @@ -37,11 +38,11 @@ You can enable touch mode (bigger theme) for an application by adding `.e-bigger ``` -## Size mode for a control +## Size mode for a component You can enable touch mode (bigger theme) for a control by adding `.e-bigger` class and assign to the `div` which contains the control. -If you create Blazor web App with interactivity location as `Per page/component`, make ensure the define a render mode at the top of the Syncfusion® Blazor Component included page, as follows: +If the Blazor Web App uses interactivity location `Per page/component`, ensure a render mode is defined at the top of the page that includes the Syncfusion® Blazor component, as follows: {% tabs %} {% highlight razor %} @@ -85,7 +86,7 @@ If you create Blazor web App with interactivity location as `Per page/component` ``` -## Change size mode for application at runtime +## Change size mode for the application at runtime You can change the size mode of an application between touch and normal (mouse) mode at runtime by adding and removing `.e-bigger` using `JavaScriptInterop`. @@ -99,7 +100,10 @@ Follow below steps to change the size mode for an application at runtime. } ``` -2. Add the following JavaScript methods inside the script tag of `~/Components/App.razor`(Blazor Web App) or `wwwroot/index.html` (Blazor WebAssembly App) or `Pages/_Host.cshtml` (Blazor Server App) to switch between touch and mouse mode using `e-bigger` class. +2. Add the following JavaScript methods to switch between touch and mouse modes using the `e-bigger` class. Place the script in the appropriate file: + - Blazor Web App: `~/Pages/_Layout.cshtml` + - Blazor WebAssembly App: `~/wwwroot/index.html` + - Blazor Server App: `~/Pages/_Host.cshtml` ```cshtml