diff --git a/CS/DxtGaugeInBlazor/Components/App.razor b/CS/DxtGaugeInBlazor/Components/App.razor index 3bd19c5..3592117 100644 --- a/CS/DxtGaugeInBlazor/Components/App.razor +++ b/CS/DxtGaugeInBlazor/Components/App.razor @@ -7,10 +7,12 @@ - - - + @DxResourceManager.RegisterScripts() + @DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => { + properties.UseBootstrapStyles = true; + properties.AddFilePaths(["css/theme-fluent.css"]); + })) diff --git a/CS/DxtGaugeInBlazor/DxtGaugeInBlazor.csproj b/CS/DxtGaugeInBlazor/DxtGaugeInBlazor.csproj index a0dec06..803b49d 100644 --- a/CS/DxtGaugeInBlazor/DxtGaugeInBlazor.csproj +++ b/CS/DxtGaugeInBlazor/DxtGaugeInBlazor.csproj @@ -7,6 +7,6 @@ false - + diff --git a/CS/DxtGaugeInBlazor/Program.cs b/CS/DxtGaugeInBlazor/Program.cs index 0e789f7..f628360 100644 --- a/CS/DxtGaugeInBlazor/Program.cs +++ b/CS/DxtGaugeInBlazor/Program.cs @@ -8,7 +8,6 @@ .AddInteractiveServerComponents(); builder.Services.AddDevExpressBlazor(options => { - options.BootstrapVersion = DevExpress.Blazor.BootstrapVersion.v5; options.SizeMode = DevExpress.Blazor.SizeMode.Medium; }); builder.Services.AddSingleton(); diff --git a/CS/DxtGaugeInBlazor/wwwroot/css/theme-fluent.css b/CS/DxtGaugeInBlazor/wwwroot/css/theme-fluent.css new file mode 100644 index 0000000..06d6ee0 --- /dev/null +++ b/CS/DxtGaugeInBlazor/wwwroot/css/theme-fluent.css @@ -0,0 +1,43 @@ +body { + margin: 0; +} + + +.w-100 { + width: 100%; +} + +.text-danger { + color: var(--DS-color-surface-danger-default-rest); +} + +.p-4 { + padding: 1.5rem; +} + +.navigation-drawer { + --dxbl-drawer-separator-border-width: 0; +} + +.menu-item { + --dxbl-menu-item-color: #fff; + --dxbl-menu-item-image-color: #fff; +} + +[data-fluent-darkmode] .dxbl-theme-fluent .welcome-card { + color: var(--DS-primary-70); +} + +.icon { + --icon-width: 1.25rem; + --icon-height: 1.25rem; + --icon-back-mask-image: url("/images/back-fluent.svg"); + --icon-close-mask-image: url("/images/close-fluent.svg"); + --icon-menu-mask-image: url("/images/menu-fluent.svg"); + --icon-docs-mask-image: url("/images/doc-fluent.svg"); + --icon-demos-mask-image: url("/images/demos-fluent.svg"); + --icon-home-mask-image: url("/images/home-fluent.svg"); + --icon-weather-mask-image: url("/images/weather-fluent.svg"); + --icon-counter-mask-image: url("/images/counter-fluent.svg"); +} + diff --git a/CS/DxtGaugeInBlazor/wwwroot/images/back-fluent.svg b/CS/DxtGaugeInBlazor/wwwroot/images/back-fluent.svg new file mode 100644 index 0000000..9b596d0 --- /dev/null +++ b/CS/DxtGaugeInBlazor/wwwroot/images/back-fluent.svg @@ -0,0 +1,3 @@ + + + diff --git a/CS/DxtGaugeInBlazor/wwwroot/images/close-fluent.svg b/CS/DxtGaugeInBlazor/wwwroot/images/close-fluent.svg new file mode 100644 index 0000000..38064af --- /dev/null +++ b/CS/DxtGaugeInBlazor/wwwroot/images/close-fluent.svg @@ -0,0 +1,3 @@ + + + diff --git a/CS/DxtGaugeInBlazor/wwwroot/images/counter-fluent.svg b/CS/DxtGaugeInBlazor/wwwroot/images/counter-fluent.svg new file mode 100644 index 0000000..8ed0cae --- /dev/null +++ b/CS/DxtGaugeInBlazor/wwwroot/images/counter-fluent.svg @@ -0,0 +1,4 @@ + + + + diff --git a/CS/DxtGaugeInBlazor/wwwroot/images/demos-fluent.svg b/CS/DxtGaugeInBlazor/wwwroot/images/demos-fluent.svg new file mode 100644 index 0000000..f9f4953 --- /dev/null +++ b/CS/DxtGaugeInBlazor/wwwroot/images/demos-fluent.svg @@ -0,0 +1,3 @@ + + + diff --git a/CS/DxtGaugeInBlazor/wwwroot/images/doc-fluent.svg b/CS/DxtGaugeInBlazor/wwwroot/images/doc-fluent.svg new file mode 100644 index 0000000..e746057 --- /dev/null +++ b/CS/DxtGaugeInBlazor/wwwroot/images/doc-fluent.svg @@ -0,0 +1,3 @@ + + + diff --git a/CS/DxtGaugeInBlazor/wwwroot/images/home-fluent.svg b/CS/DxtGaugeInBlazor/wwwroot/images/home-fluent.svg new file mode 100644 index 0000000..0919bd5 --- /dev/null +++ b/CS/DxtGaugeInBlazor/wwwroot/images/home-fluent.svg @@ -0,0 +1,3 @@ + + + diff --git a/CS/DxtGaugeInBlazor/wwwroot/images/menu-fluent.svg b/CS/DxtGaugeInBlazor/wwwroot/images/menu-fluent.svg new file mode 100644 index 0000000..d9cd93e --- /dev/null +++ b/CS/DxtGaugeInBlazor/wwwroot/images/menu-fluent.svg @@ -0,0 +1,3 @@ + + + diff --git a/CS/DxtGaugeInBlazor/wwwroot/images/weather-fluent.svg b/CS/DxtGaugeInBlazor/wwwroot/images/weather-fluent.svg new file mode 100644 index 0000000..f24c5c3 --- /dev/null +++ b/CS/DxtGaugeInBlazor/wwwroot/images/weather-fluent.svg @@ -0,0 +1,3 @@ + + + diff --git a/README.md b/README.md index ae0d976..1f16612 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,3 @@ - -![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/460853146/25.1.3%2B) -[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1069428) -[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) -[![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) - # Blazor - Use DevExtreme Circular Gauge in a Blazor Application This example shows how to embed [DevExtreme widgets](https://js.devexpress.com/Demos/WidgetsGallery/) into your Blazor application. @@ -18,7 +12,6 @@ DevExtreme widgets require DevExtreme scripts and stylesheets. The DevExpress [R ```Razor - @@ -60,9 +53,9 @@ The DevExpress Blazor UI Component Library includes multiple DevExtreme-based co [Add JavaScript-Based Components to an Application](https://docs.devexpress.com/Blazor/403578/common-concepts/add-js-components-to-application) -## Does this example address your development requirements/objectives? - -[](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-use-devextreme-circular-gauge&~~~was_helpful=yes) [](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-use-devextreme-circular-gauge&~~~was_helpful=no) - +## Does this example address your development requirements/objectives? + +[](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-use-devextreme-circular-gauge&~~~was_helpful=yes) [](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-use-devextreme-circular-gauge&~~~was_helpful=no) + (you will be redirected to DevExpress.com to submit your response) diff --git a/circularGauge.png b/circularGauge.png index 9bbbfa4..0f98c40 100644 Binary files a/circularGauge.png and b/circularGauge.png differ