diff --git a/blazor/appearance/figma.md b/blazor/appearance/figma.md index a8e2a88b89..ac21c03dc4 100644 --- a/blazor/appearance/figma.md +++ b/blazor/appearance/figma.md @@ -1,27 +1,27 @@ --- layout: post -title: Figma UI kits for Syncfusion Blazor - Syncfusion +title: Figma UI Kits for Blazor Components with Design Tokens | 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 control: Common documentation: ug --- -# Figma UI kits for Syncfusion® controls +# Figma UI Kits for Blazor Components with Design Tokens -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). +Syncfusion® provides [Figma UI kits](https://www.figma.com/@syncfusion) to streamline collaboration between designers and developers. The kits match the themes used by [Blazor components](https://www.syncfusion.com/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). -Each kit contains reusable design controls with states and variants, along with detailed figures, measurements, and icons that represent Syncfusion® controls. +Each kit contains reusable design components with states and variants, along with detailed figures, measurements, and icons that represent Blazor components. ![Preview of the Material 3 Figma UI kit](./images/material3.webp) ## Advantages of UI kits 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. +- Detailed information about components, including lists, states, and variants, to quickly understand available options. +- Design components follow the [atomic design methodology](https://atomicdesign.bradfrost.com/chapter-2/), making customization straightforward. +- Developers can match [Blazor components](https://www.syncfusion.com/blazor-components) to design requirements for alignment and accuracy. +- Standardized components and themes maintain a consistent look and feel across projects. ## Downloading the UI kits @@ -34,48 +34,49 @@ The Syncfusion® Figma UI kits are available ## Structure of the UI kits -The Figma UI kits are structured for easy navigation and exploration of controls. They include the following pages: +The Figma UI kits are structured for easy navigation and exploration of components. 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. -- **Icons**: Contains a collection of all icons used in the design controls. -- **UI Controls**: At the core of the UI kit, this section features a wide range of essential UI controls. Each control is meticulously designed with detailed figures, measurements, and icons, showcasing various states and variants. +- **Cover**: This page serves as the cover page for the UI kit. +- **Change Log**: A chronological record of updates with dates, change type, and concise notes to track additions, fixes, deprecations, and removals across the kit. +- **Index**: Here, users can find a detailed list of all component names, making it simple to identify and locate specific components within the UI kit. +- **Icon**: Contains a collection of all icons used in the design components. +- **UI Components**: At the core of the UI kit, this section features a wide range of essential UI components. Each component is meticulously designed with detailed figures, measurements, and icons, showcasing various states and variants. -![Layout](./images/layout.webp) +![Layout](./images/figma-kit-structure.webp) ## Customizing the UI kits -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. +The Syncfusion® Figma UI kits are customizable to meet specific needs, allowing unique designs and color adjustments to match brand guidelines. Because the components are built using the [atomic design methodology](https://atomicdesign.bradfrost.com/chapter-2/), customizations will be seamlessly reflected across multiple components and variants. -Here's how to customize the primary button color of the Material 3 theme within your layout: +Here's how to customize the primary button color of the Material 3 theme in your Figma design: 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 **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, 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**. +6. To customize the primary button color, click outside the button to reveal the **Variables** panel. It contains the design tokens for color variables. Click **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. -![Customize a component primary color using local variables](./images/customize.webp) +![Customize a component primary color using local variables](./images/customize-ui-kit.webp) -In addition to changing the button color, you can also customize other aspects like font, spacing, shadows, etc., of the UI controls: +In addition to changing the button color, you can also customize other aspects like font, spacing, shadows, etc., of the UI components. Feel free to experiment with these customization options to create a design that perfectly matches your requirements. ## Download customized styles -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 styles as design 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 `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. +- In Figma, navigate to **Resources > Plugins** and click **Syncfusion® Design Tokens**. +- Open **Syncfusion® Design Tokens** and 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. @@ -84,8 +85,9 @@ Follow these steps to download the customized styles from the Figma UI Kit: ### Use design tokens The exported zip file includes the following files: - - `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. + +- `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). The `` placeholder represents the selected theme (e.g., `material3-tokens.json`, `fluent-tokens.json`). This file 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. @@ -93,7 +95,7 @@ This streamlined process ensures that your unique design vision, crafted in Figm 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. +- Monitor the [Figma community page](https://www.figma.com/@syncfusion) or [Syncfusion release notes](https://blazor.syncfusion.com/documentation/release-notes) for updates or new versions of UI kits. - Before upgrading, back up your ongoing projects to prevent data loss or compatibility issues. - Share feedback regarding the upgraded UI kits, including any issues encountered or suggestions for improvement. diff --git a/blazor/appearance/icons.md b/blazor/appearance/icons.md index 0ce8037d8b..0829471159 100644 --- a/blazor/appearance/icons.md +++ b/blazor/appearance/icons.md @@ -1,30 +1,51 @@ --- layout: post -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. +title: Blazor Icons Library Usage and Customization | Syncfusion +description: Learn how to use the Blazor Icon component with SfIcon and e-icons, set sizes and tooltips, customize appearance, and integrate with other Blazor components. platform: Blazor control: Common documentation: ug --- -# Blazor icons library +# Blazor Icons Library Usage and Customization -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. +The Syncfusion® Blazor library provides a set of base64-formatted font icons used across [Blazor components](https://www.syncfusion.com/blazor-components). Icons can be used via the `SfIcon` component or the `e-icons` CSS class. Watch a quick-start video for the Blazor Icon component: {% youtube "youtube:https://www.youtube.com/watch?v=H1nQCAHzKZ0"%} +## Prerequisites + +Before using the Blazor Icon component, set up your Blazor application by following the [Blazor Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) guide. + +Next, install the [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) NuGet package using the following command. + +{% tabs %} +{% highlight bash tabtitle="Package Manager" %} + +Install-Package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }} + +{% endhighlight %} +{% highlight bash tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Buttons --version {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} + +For the complete list of available packages, refer to the [Blazor NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). + ## Icon component -Syncfusion® Icon component provides support to render predefined Syncfusion® icons or custom font icons. +The Blazor Icon component provides support for rendering predefined Blazor icons or custom font icons. -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 how to render built-in Blazor icons from predefined [IconName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.IconName.html) options by using the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfIcon.html#Syncfusion_Blazor_Buttons_SfIcon_Name) property in the `SfIcon` tag. -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. +{% tabs %} +{% highlight razor %} -```cshtml @using Syncfusion.Blazor.Buttons @@ -33,7 +54,9 @@ The following code example shows the rendering of built-in Syncfusion -``` + +{% endhighlight %} +{% endtabs %} ![Blazor Icon Component](./images/icons/icon.webp) @@ -41,11 +64,13 @@ The following code example shows the rendering of built-in SyncfusionSmaller icons

@@ -69,17 +94,21 @@ The font size of the icon can be changed using the [Size](https://help.syncfusio -``` + +{% endhighlight %} +{% endtabs %} ![Icon size customization Blazor Icon Component](./images/icons/icon-size.webp) -N> The `Size` property is applicable only when defining the icon using `Name` property. Otherwise, use [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfIcon.html#Syncfusion_Blazor_Buttons_SfIcon_IconCss) property to customize the icon. +N> The [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfIcon.html#Syncfusion_Blazor_Buttons_SfIcon_Size) property is applicable only when defining the icon using the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfIcon.html#Syncfusion_Blazor_Buttons_SfIcon_Name) property. Otherwise, use the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfIcon.html#Syncfusion_Blazor_Buttons_SfIcon_IconCss) property to customize the icon. ### Tooltip for icons -`Title` property is used to set title attribute for the icon to improve accessibility with screen readers and shows a tooltip on mouseover. The following example code displays tooltip text for appropriate icons. +The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfIcon.html#Syncfusion_Blazor_Buttons_SfIcon_Title) property is used to set the title attribute for the icon, which improves accessibility with screen readers and shows a tooltip on mouseover. The following code example displays tooltip text for appropriate icons. + +{% tabs %} +{% highlight razor %} -```cshtml @using Syncfusion.Blazor.Buttons @@ -89,17 +118,21 @@ N> The `Size` property is applicable only when defining the icon using `Name` pr -``` + +{% endhighlight %} +{% endtabs %} ![ToolTip for Blazor Icon Component](./images/icons/icon-title.webp) ### Icon appearance customization -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 [SfIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfIcon.html) component supports customizing color and size by overriding the `e-icons` class. + +The following code example demonstrates custom font-size and color for icons. -The following example code demonstrates the custom font-size and color for icons. +{% tabs %} +{% highlight razor %} -```cshtml @using Syncfusion.Blazor.Buttons @@ -115,28 +148,36 @@ The following example code demonstrates the custom font-size and color for icons font-size: 26px !important; } -``` + +{% endhighlight %} +{% endtabs %} ![Blazor Icon Component Customization](./images/icons/custom-icon.webp) -### Third‑party icons integration +### Third-party icons integration + +The [SfIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfIcon.html) component supports rendering 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 font name, font size, and content for the icon. -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. +The following code explains how to render `open-iconic` icons using the `IconCss` property. -The following code explains how to render `open-iconic` icons using `IconCss` property. +* For **Blazor Web Apps**, add the stylesheet reference to the `` section of `~/Components/App.razor`. -Include the stylesheet reference in the `` section of the **~/App.razor** file as shown below: +* For **Blazor WebAssembly standalone apps**, add the stylesheet reference to the `` section of `~/wwwroot/index.html`. -Example link tag: +{% tabs %} +{% highlight html tabtitle="App.razor or index.html" %} -```html - .... + ... -``` -```cshtml +{% endhighlight %} +{% endtabs %} + +{% tabs %} +{% highlight razor %} + @using Syncfusion.Blazor.Buttons @@ -147,59 +188,82 @@ Example link tag: -``` + +{% endhighlight %} +{% endtabs %} ![Load custom icon in Blazor Icon Component](./images/icons/icon-css.webp) -### HTML attribute support +### Create custom icons with Syncfusion Metro Studio + +[Syncfusion Metro Studio](https://help.syncfusion.com/metro-studio/overview) is a desktop tool for creating and customizing icon fonts for applications. It includes more than 7,000 flat and wireframe icon templates that you can modify to fit your design needs. You can also customize existing icons and export them in multiple formats, including SVG. + +After exporting the icon font, use the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfIcon.html#Syncfusion_Blazor_Buttons_SfIcon_IconCss) property of the [SfIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfIcon.html) component to display the custom icon in your application. -You can add the additional HTML attributes to the icon element using [HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfIcon.html#Syncfusion_Blazor_Buttons_SfIcon_HtmlAttributes) property. HTML attributes can be added by specifying as inline attributes or by specifying `@attributes` razor directive. +For more information, refer to the [Metro Studio documentation](https://help.syncfusion.com/metro-studio/overview). -The following example shows the icon font size customization using `@attributes` directive. +### Icon styling with inline attributes + +You can customize the icon element by applying HTML attributes directly to the `SfIcon` component. To reuse the same attribute values across multiple icons, use the `@attributes` Razor directive. + +The following example demonstrates how to customize the icon font size using the `@attributes` directive. + +{% tabs %} +{% highlight razor %} -```cshtml @using Syncfusion.Blazor.Buttons + + @code{ Dictionary customAttribute = new Dictionary() { - { "style", "font-size: 20px" } + { "style", "font-size: 30px" } }; } -``` + +{% endhighlight %} +{% endtabs %} + +![Custom icon styling using inline attributes](./images/icons/htmlattributes-icon.webp) ## Icon integration with Button component -The built-in Syncfusion® icons can be integrated with other Blazor components without defining the `` tag. To use Syncfusion® icons, add `e-icons` class that contains the font-family and common property of the font icons. Add the icon class with the corresponding icon name from the [available icons](#icons-list) with `e-` prefix. +The built-in Blazor icons can be integrated with other Blazor components without defining the `` tag. To use Blazor icons, add the `e-icons` class that contains the font-family and common properties of the font icons. Add the icon class with the corresponding icon name from the [available icons](#icons-list) with the `e-` prefix. + +The following example shows how to integrate icons with the [Blazor Button](https://www.syncfusion.com/blazor-components/blazor-button) component by defining the icon class in the `IconCss` property of the button. -The following example shows how to integrate the icons with Syncfusion® button component by defining the icon class in the `IconCss` property of button. +{% tabs %} +{% highlight razor %} -```cshtml @using Syncfusion.Blazor.Buttons -``` -![Using Icons with Blazor Button Component](./images/icons/button-integration.webp) +{% endhighlight %} +{% endtabs %} +![Using Icons with Blazor Button Component](./images/icons/button-integration.webp) ## Use icons directly in an HTML element -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. +Built-in Blazor 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. +The following code example explains the direct rendering of the Blazor `search` icon in a span element. + +{% tabs %} +{% highlight razor %} -```cshtml -``` -## Icons list +{% endhighlight %} +{% endtabs %} -The complete pack of Syncfusion® Blazor icons is listed in the following table. The corresponding icon content can be referred to the content section. +## Icons list - +The complete pack of Blazor icons is listed in the following table. The corresponding icon content can be found in the content section. diff --git a/blazor/appearance/images/customize-ui-kit.webp b/blazor/appearance/images/customize-ui-kit.webp new file mode 100644 index 0000000000..91019c67f2 Binary files /dev/null and b/blazor/appearance/images/customize-ui-kit.webp differ diff --git a/blazor/appearance/images/figma-kit-structure.webp b/blazor/appearance/images/figma-kit-structure.webp new file mode 100644 index 0000000000..84703a4156 Binary files /dev/null and b/blazor/appearance/images/figma-kit-structure.webp differ diff --git a/blazor/appearance/images/icons/htmlattributes-icon.webp b/blazor/appearance/images/icons/htmlattributes-icon.webp new file mode 100644 index 0000000000..35bc1cf3a7 Binary files /dev/null and b/blazor/appearance/images/icons/htmlattributes-icon.webp differ