Code Monkey home page Code Monkey logo

Comments (6)

coderdnewbie avatar coderdnewbie commented on June 6, 2024 2

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.

vnbaaij avatar vnbaaij commented on June 6, 2024

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.

AJ1000 avatar AJ1000 commented on June 6, 2024

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" />

error

Please try it yourself.

from fluentui-blazor.

AJ1000 avatar AJ1000 commented on June 6, 2024

Here is the screenshot of it working in Version="4.6.1"

worksin461

from fluentui-blazor.

AJ1000 avatar AJ1000 commented on June 6, 2024

In Version="4.7.1", I have to change the code to make it work, as in this screenshot, by removing the 'ToAttributeValue' feature:

commentedoutworksin471

from fluentui-blazor.

vnbaaij avatar vnbaaij commented on June 6, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.