Comments (6)
Yes, I missed that I had to add the following namespace to the _Imports.razor file.
@using Microsoft.FluentUI.AspNetCore.Components.Extensions
It now works the same as 4.6.1.
My name is Jay Tandon, and would like to thank you for your work on this project. I will close this as completed. The Split Button I was asking for is the same as the 'Close with Comment'/''Reopen Issue' split button on this page, which is the only type of button that is missing for my upgrade from MVC to Blazor. The demo was good, and you do have a navbar, which is called Header in the Layout page of your examples. Thanks again for your work, I am unfortunately too busy, as I am the only developer in my company, to work on side projects and write a split button myself.
from fluentui-blazor.
What is your @context
?. You can only use ToAttributeValue
on an enum. My guess is this is not a regression. CustomColor
should be supplied with an actual color value.
from fluentui-blazor.
The code is from the demo site. In the Themes section. Here is the full code (I just used the copy button to get the code). It ran without error before the upgrade, but errors after the upgrade. No code was changed.
<FluentDesignTheme @bind-Mode="@Mode"
@bind-OfficeColor="@OfficeColor"
OnLoaded="@OnLoaded"
OnLuminanceChanged="@OnLuminanceChanged"
StorageName="theme" />
<div style="min-height: 250px;">
<FluentGrid>
<FluentGridItem>
<FluentSelect Label="Theme"
Width="250px"
Items="@(Enum.GetValues<DesignThemeModes>())"
@bind-SelectedOption="@Mode" />
</FluentGridItem>
<FluentGridItem>
<FluentSelect Label="Color"
Items="@(Enum.GetValues<OfficeColor>().Select(i => (OfficeColor?)i))"
Height="200px"
Width="250px"
@bind-SelectedOption="@OfficeColor">
<OptionTemplate>
<FluentStack>
<FluentIcon Value="@(new Icons.Filled.Size20.RectangleLandscape())"
Color="Color.Custom"
CustomColor="@(@context.ToAttributeValue() != "default" ? context.ToAttributeValue() : "#036ac4" )" />
<FluentLabel>@context</FluentLabel>
</FluentStack>
</OptionTemplate>
</FluentSelect>
<FluentButton Appearance="Appearance.Accent" OnClick="PickRandomColor">Feeling lucky?</FluentButton>
</FluentGridItem>
</FluentGrid>
<FluentStack Style="margin: 30px 0px; padding: 30px; border: 1px solid var(--accent-fill-rest);">
<FluentIcon Value="@(new Icons.Regular.Size24.Airplane())" />
<FluentLabel>Example of content</FluentLabel>
<FluentButton Appearance="Appearance.Outline">Outline button</FluentButton>
<FluentButton Appearance="Appearance.Accent">Accent button</FluentButton>
</FluentStack>
</div>
@code
{
public DesignThemeModes Mode { get; set; }
public OfficeColor? OfficeColor { get; set; }
void OnLoaded(LoadedEventArgs e)
{
DemoLogger.WriteLine($"Loaded: {(e.Mode == DesignThemeModes.System ? "System" : "")} {(e.IsDark ? "Dark" : "Light")}");
}
void OnLuminanceChanged(LuminanceChangedEventArgs e)
{
DemoLogger.WriteLine($"Changed: {(e.Mode == DesignThemeModes.System ? "System" : "")} {(e.IsDark ? "Dark" : "Light")}");
}
void PickRandomColor()
{
OfficeColor = OfficeColorUtilities.GetRandom();
}
}
Before the upgrade, which still runs without error, the versions were <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.6.1" />,
<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.DataGrid.EntityFrameworkAdapter" Version="4.6.1" /> and
<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="4.6.1" />
After the upgrade, which has the error .. see the screenshot, the versions were <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.7.1" />,
<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.DataGrid.EntityFrameworkAdapter" Version="4.7.0" /> and
<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="4.7.0" />
Please try it yourself.
from fluentui-blazor.
Here is the screenshot of it working in Version="4.6.1"
from fluentui-blazor.
In Version="4.7.1", I have to change the code to make it work, as in this screenshot, by removing the 'ToAttributeValue' feature:
from fluentui-blazor.
I think you are running into the breaking change we mentioned in the blogs, WhatsNew and upgrade guide...
Extension methods are moved to a new namespace. Add that new namespace to the _Imports file and it should be fine.
from fluentui-blazor.
Related Issues (20)
- FluentCheckbox issue HOT 1
- Tree component HOT 2
- Fluent Blazor Web App bogus focus on first body element HOT 4
- fix: Circular constraint dependency involving 'Icon' and 'Icon' in FluentIcon HOT 2
- fix: Interactive Search - NoMatch exception
- fix: expanding & collapsing in FluentNavMenu HOT 2
- fix: navigation does not expand when navigating through the page by bookmark or link HOT 1
- Weather sample page regenerates data on sort HOT 1
- fix: FluentValidationMessage won't show message for an empty FluentTextArea component. HOT 5
- RefreshDataAsync ignored with Virtualize=true HOT 2
- fix: Cannot control the Value of a FluentTextField or a FluentTextArea. HOT 4
- fix: [FluentNumberField Required validation error?] in [EditForm?] HOT 1
- DataGrid: add access to columns HOT 2
- fix: Popups/dropdowns not displaying in FluentProfileMenu and other places HOT 3
- FluentDataGrid: Focus gets mixed up when virtualizing Grid HOT 1
- fix: NotFound component not rendering when included in Routes component in Blazor Hybrid App. HOT 1
- fix: TimePicker flickers in InteractiveServer rendermode HOT 13
- fix: TimePicker flickers in InteractiveServer rendermode HOT 5
- [FluentTextArea] When the input data is too large, it will automatically disconnect and lose data HOT 1
- fix: Value "[object Object]" is set to css variable when using WithDefault/ToSwatch HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fluentui-blazor.