megabit / blazorise Goto Github PK

How to bind with nullable decimal properties?
TextEdit supports string only.
Is there no equivalent DateEdit control for numbers?

This is planned to be done after the release of Blazor with .Net Core 3.0. See an issue #5500 on AspNetCore.

The problem is mainly that we cannot have components that are named Button, Form, etc because they are messing with the native html tags.

Version 1.0 of Blazorise will be released ONLY AFTER this is implemented.

Make the separate documentation pages for every component instead of grouping them by categories(buttons, forms,...)

Modals should be visible on top of everything. Fix z-index

Consider this:

<Fields>
    <Field ColumnSize="ColumnSize.Is1.OnDesktop">
        <TextEdit IsReadonly="true" Text="@Name" />
    </Field>
    <Field>
        <SimpleButton Color="Color.Danger" Clicked="Remove">Remove</SimpleButton>
    </Field>
    <Field>
        <SimpleButton Color="Color.Warning" Clicked="Show Modal">Edit</SimpleButton>
    </Field>
</Fields>

<Modal ref="modalRef">
    <ModalBackdrop />
    <ModalContent IsCentered="true">
        <ModalHeader>
            <ModalTitle>Edit</ModalTitle>
            <CloseButton Clicked="@HideModal" />
        </ModalHeader>
        <ModalBody>
            <Field>
                <FieldLabel>@Name</FieldLabel>
                <TextEdit Placeholder="Enter name..." />
            </Field>
        </ModalBody>
        <ModalFooter>
            <SimpleButton Color="Color.Secondary" Clicked="@HideModal">X</SimpleButton>
            <SimpleButton Color="Color.Primary" Clicked="@HideModal">Save</SimpleButton>
        </ModalFooter>
    </ModalContent>
</Modal>
@functions
{
    private Modal modalRef;
    [Parameter]
    private string Name { get; set; }
}

Lets say i have to loop these to show them in table.
But using this in for loop in some other component will create hidden modal for each item. Now correct me if i'm wrong but, there's no way to create single modal as generic component and then just pass modal ref and other parameters on click event , right?

So would it be possible to just dynamically render it like this:

@functions {
    RenderFragment ModalProperty { get; set; }
     private Modal modal;
    
        RenderFragment CreateDynamicComponent() => builder =>
    {
        builder.OpenComponent(0, typeof(CustomGenericModal));
        builder.AddAttribute(1, "modalRef", modal);        
        builder.AddAttribute(2, "Name", @Name);          
        builder.CloseComponent();
    };       
    void SetModalPropertyOnClick()
    {
       ModalProperty = CreateDynamicComponent();
    }
}

This way each item would have empty RenderFragment ModalProperty { get; set; }. But modal would only render on click by invoking component dynamically and setting ModalProperty .

Are dependencies for this 0.7.0 (AspNetCore.Blazor.Build and AspNetCore.Blazor.Browser)?
I'm trying to run default client side Blazor template with Blazorise.Bootstrap package but something is exploding in Blazor.MonoRuntime.targets.

Also there's no AddIconProvider().

Blazorise.Charts and Blazorise.Sidebar are extension and should be moved to the Extensions subfolder.

I am leveraging libman to handle client side references in my blazor app and I would like to leverage cdnjs and/or unpkg to reference the material styling.

Could you please tell me where you pulled these files from?

Wrong css is located in the demo project

I guess the question is in the title.

Docs: https://www.chartjs.org/docs/latest/axes/styling.html
Example: https://stackoverflow.com/a/36692545/833106

Rigth now the AddMaterialProviders and AddBootstrapProviders are doing more than they should. They should only do a registrations to the Blazorise.

Create new methods like UseBootstrapProviders, UseMaterialProviders etc to do the custom work when adding the providers.

May be to add a property TextEdit.Step.
With this property, you will be able to write a decimal number using Role="TextRole.Number".

I'm trying to use the new preview with Razor components with VS 2019 Preview + ASP.net 3.0 Preview. I followed the instructions to install the Blazorise.Material nuget packages, index.htm css and js changes, and registrations. I can add components to the default application and don't get any errors. However, I don't get any styling of any kind. Can someone give me a sample solution or step-by-step of getting Material working starting from a new Razor Components app? It looks like I'm missing something. I've tried adding references to the Material css and Material js files without any changes.

Hi, first off let me say great work on this component library for Blazor and I intend to use this for a project at work.
I'm experiencing an issue where clicking on a bar drop down opens the dropdown and will continue to be open unless it's once again clicked. Typically the drop down should toggle itself closed if a different drop down is clicked or one of the links in the drop down is clicked.
Additionally the menu toggle button doesn't seem to work at all nor does anything work on mobile browsers.
Because of these issues I've reverted back to the native bootstrap component.
Here is how I've defined the menu bar with the dropdowns:

<Bar Breakpoint="Breakpoint.Desktop" Background="Background.Dark" Theme="Theme.Dark">
    <BarBrand>POC</BarBrand>
    <BarToggler></BarToggler>
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarDropdownToggler>Home</BarDropdownToggler>
                <BarDropdown>
                    <BarDropdownItem>
                        <BarLink To="">Home</BarLink>
                    </BarDropdownItem>
                    <BarDropdownItem>
                        <BarLink To="About">About</BarLink>
                    </BarDropdownItem>
                    <BarDropdownItem>
                        <BarLink To="Counter">Counter</BarLink>
                    </BarDropdownItem>
                </BarDropdown>
            </BarItem>
            <BarItem>
                <BarDropdownToggler>Contact</BarDropdownToggler>
                <BarDropdown>
                    <BarDropdownItem>
                        <BarLink To="Contact">Contact</BarLink>
                    </BarDropdownItem>
                    <BarDropdownItem>
                        <BarLink To="Contact">Place Holder</BarLink>
                    </BarDropdownItem>
                </BarDropdown>
            </BarItem>
        </BarStart>
    </BarMenu>
</Bar>

How does one bind to a SelectEdit?

Currently this code throws errors - is it still valid?

<ModalHeader Title="Some Text"> <CloseButton Clicked="@ClickEvent" /> </ModalHeader>

This might be related => #22 .

Is there a possibility to opt out of element Id generation? It's not noticeable on small number of components, but on large number of generated components impact on performance is huge.

From my tests, rendering Fields / Form like component 500 times takes 12-13 seconds, vs 1-2 sec for just using plain bootstrap for same stuff. I'm guessing that's because you calculate and set new Id on some elements each time component is re-rendered.

...
           <BarEnd>
                    <BarDropdown>
                        <BarDropdownToggle>Test</BarDropdownToggle>
                        <BarDropdownMenu>
                            <BarDropdownItem>Profile</BarDropdownItem>
                            <BarDropdownItem>Log Out</BarDropdownItem>
                        </BarDropdownMenu>
                    </BarDropdown>
            </BarEnd>
        </BarMenu>

When I activate the drop down, the menu itself renders at the left-edge of the screen rather than under the drop down that opened the menu.

Could you add enum type in SelectEdit?
It accepts only string as parameter atm.

Active color does not exist in any of the css providers.

Apps to show how to use Blazorise:

• TodoApp

Since NET Core 3.0 preview 2 now includes Razor Components (https://blogs.msdn.microsoft.com/webdev/2019/01/29/aspnet-core-3-preview-2/), I would like to use Blazorise with it.

Do you have any plans to support it?

I couldn't find anything related on the Blazorise roadmap.

Load the charts page, click on redraw, hover over the chart.

Try to add SelectedValue property to SelectEdit. This is necessary to have a bind-* feature just like the other input components.

• Spinner on button
• XL on modal

This is extraordinary. Well done.

Do you plan to do Navbars?

Mask will be used to define input formats and to prevent users of entering invalid values.

Mask types:

• Numeric
• Datetime
• Regex

Hi There!
Sorry to be a pain, Im trying to instantiate a similar chart to below in chartjs using your charts package:
https://codepen.io/Shywim/pen/xXYror
So i have the following code:

        protected LineChartOptions chartOptions = new LineChartOptions()
        {
            Tooltips = new Tooltips() {Enabled = false},
            Legend = new Legend(){Display = false},
            Scales = new Scales()
            {
                YAxes = new List<Axe>()
                {
                    new Axe(){Display = false}
                },
                XAxes = new List<Axe>()
                {
                    new Axe(){Display = false}
                }
            },
        };

If i remove the Scales object - the chart renders with my data correctly.
However the chart doesnt render at all with any of the Scale objects.
The other issue is that we are missing the elements object as far as i can see anyway?
Other than that its working great - thank you!
(FYI this is in v 0.5.1)

Icons should be moved to a new project and be available as an extension for Blazorise.

Also icons should be separated further for each icon pack. eg:

• Blazorise.Icons (base project)
• Blazorise.Icons.FontAwesome
• Blazorise.Icons.Material
• Blazorise.Icons.Iconic

etc

Remove gijgo.js and optimize date input to use native date picker.

If there is a need for external library for date input, then in that case it should be created as an Extension and registered as custom date picker inside of Blazorise.

Currently all of the boolean attributes have a prefix Is*. Try to see if there is better way for naming boolean-type attributes. eg:

Sidebar is currently not using much of a Blazorise internal components. It needs to be refactored in a way that it should be using Bar, BarItem etc. That way it will work better with different css framework providers.

Hi there! First of all thank you for your time on these components!
I followed the below steps:

1. Create a new Server Side Blazor App using Blazor 0.7.0
2. In the Client Project, add the nuget package Blazorise.Charts
3. Added the following lines to the _ViewImports.cshtml file:
   @using Blazorise.Charts @addTagHelper *, Blazorise.Charts
4. Added the following lines to the Client Projects Startup.cs file:
   services.AddSingleton<IJSRunner, JSRunner>(); var componentMapper = new ComponentMapper(); services.AddSingleton<IComponentMapper>(componentMapper);
5. Build the project (Build is successful)
6. Run the project
   This creates the following error in the browser console:

Uncaught (in promise) Error: System.ArgumentException: Cannot instantiate implementation type 'Blazorise.JSRunner' for service type 'Blazorise.IJSRunner'.

Thanks again for your awesome project!

I know docs are a work in progress but I'm determined to test every part of this.

Do you think you could throw something together?

Thanks.

(Incidentally, my app is now looking absolutely lovely).

EventCallback is introduced in new RC and in the Blazor 0.9. They're used to better handle events for components.

Problem

When RC raises the "change" event it also calls the StateHasChanged for all of the components on currently opened page. This is not good because it will also force Blazorise to re-render which can greatly damage the performance. One way to fix this is to override ShouldRender and only render what is actually changed.

I noticed that on Safari browser rendering of some elements is not correct. Breadcrumbs are rendered other 2 lines (same on demo project). And table row heights are indirect if the table is not full length. I think there is some issue with padding.

NET Core 3.0 preview 2 is now released and Blazorise should be updated to the latest version of Razor Components. There are two options now.

• Wait for the Razor Components to exit preview version
• Upgrade now and keep track of any changes as they go