User-defined classes are applied first, which means they are usually overriden by component classes.
They should be applied last.
Code:

<BlazorStyled.Styled @bind-Classname="@AppBarStyle">
    z-index: calc(var(--theme-zindex-drawer, 1200) + 1);
</BlazorStyled.Styled>

<AppBar class="@AppBarStyle" Position="@AppBarPosition.Fixed">
...
</AppBar>

Also you can notice that AppBar classes are applied twice - but that is not what this issue is about.

Can't find the Tooltip component. I wanna make sure it's not just me being unable to find it. If it's not the case I would try implementing it.

Love the components!

One thing i am running into is that when using blazor webassembly i cannot get the dashboard to work correctly when CascadingAuthenticationState is added to the DashboardView.razor.

The dashboard loads but the sidebar does not pop out unless i adjust the size of the browser window.

This is ONLY a problem for Browser Hosted AND ONLY when i am using CascadingAuthenticationState.

To release 2.0.0

• Nuget packages

• Medium post

Many congratulations @skclusive for the work.

I am using cards and within the same Typography, if the text is very large is it possible that it will decrease in size to fit just one line?

I'm trying out https://skclusive.github.io/Skclusive.Blazor.Samples/Dashboard/ on mobile and every clickable control has double ripple effect, like I double clicked it. Is that a bug or?

place holder issue. need to update the breaking changes.

1. To remove @using Skclusive.Material.Script in _imports.razor and Skclusive.Script.DomHelpers is the replaced in .cs files

2. <ThemeProvider /> updates. info here #66

3. Badge parameter renamed to BadgeText. <Badge Badge="10" /> renamed to <Badge BadgeText="10" />

4. MediaQueryMatcher, HistoryBackHelper, DetectThemeHelper and EventDelegator moved from Skclusive.Material.Script to Skclusive.Script.DomHelpers.

5. RegisterAsync and UnRegisterAsync methods are renamed to InitAsync and DisposeAsync respectively for MediaQueryMatcher, HistoryBackHelper, DetectThemeHelper and EventDelegator

6. remove @using Skclusive.Material.Theme from _Imports.razor to avoid 'Typography' is an ambiguous reference between 'Skclusive.Material.Theme.Typography' and 'Skclusive.Material.Typography.Typography'

When using the Link component in Blazor WebAsembly I get the following error when I click the Link:

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Unknown edit type: 0 Error: Unknown edit type: 0 at e.applyEdits (https://localhost:44391/_framework/blazor.webassembly.js:1:15008) at e.updateComponent (https://localhost:44391/_framework/blazor.webassembly.js:1:12880) at Object.t.renderBatch (https://localhost:44391/_framework/blazor.webassembly.js:1:1704) at Object.window.Blazor._internal.renderBatch (https://localhost:44391/_framework/blazor.webassembly.js:1:34784) at _mono_wasm_invoke_js_unmarshalled (https://localhost:44391/_framework/wasm/dotnet.3.2.0.js:1:172099) at wasm_invoke_iiiiii (https://localhost:44391/_framework/wasm/dotnet.wasm:wasm-function[3160]:0x9b33d) at icall_trampoline_dispatch (https://localhost:44391/_framework/wasm/dotnet.wasm:wasm-function[5777]:0xfe711) at mono_wasm_interp_to_native_trampoline (https://localhost:44391/_framework/wasm/dotnet.wasm:wasm-function[4607]:0xca81d) at ves_pinvoke_method (https://localhost:44391/_framework/wasm/dotnet.wasm:wasm-function[3209]:0x9cd40) at interp_exec_method (https://localhost:44391/_framework/wasm/dotnet.wasm:wasm-function[1120]:0x2598d) Microsoft.JSInterop.JSException: Unknown edit type: 0 Error: Unknown edit type: 0 at e.applyEdits (https://localhost:44391/_framework/blazor.webassembly.js:1:15008) at e.updateComponent (https://localhost:44391/_framework/blazor.webassembly.js:1:12880) at Object.t.renderBatch (https://localhost:44391/_framework/blazor.webassembly.js:1:1704) at Object.window.Blazor._internal.renderBatch (https://localhost:44391/_framework/blazor.webassembly.js:1:34784) at _mono_wasm_invoke_js_unmarshalled (https://localhost:44391/_framework/wasm/dotnet.3.2.0.js:1:172099) at wasm_invoke_iiiiii (https://localhost:44391/_framework/wasm/dotnet.wasm:wasm-function[3160]:0x9b33d) at icall_trampoline_dispatch (https://localhost:44391/_framework/wasm/dotnet.wasm:wasm-function[5777]:0xfe711) at mono_wasm_interp_to_native_trampoline (https://localhost:44391/_framework/wasm/dotnet.wasm:wasm-function[4607]:0xca81d) at ves_pinvoke_method (https://localhost:44391/_framework/wasm/dotnet.wasm:wasm-function[3209]:0x9cd40) at interp_exec_method (https://localhost:44391/_framework/wasm/dotnet.wasm:wasm-function[1120]:0x2598d) at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,T2,TResult] (System.String identifier, T0 arg0, T1 arg1, T2 arg2) <0x30a7ff8 + 0x00046> in <filename unknown>:0 at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,TResult] (System.String identifier, T0 arg0, T1 arg1) <0x30a7f18 + 0x00014> in <filename unknown>:0 at Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.UpdateDisplayAsync (Microsoft.AspNetCore.Components.RenderTree.RenderBatch& batch) <0x30a7e20 + 0x0001e> in <filename unknown>:0 at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue () <0x2cf55a8 + 0x000f2> in <filename unknown>:0

In Blazor Server the problem does not occur.

I found some issues in the dotnet github (17926 and 21241) that suggests it is some kind of problem with the blur event.

Removing the blur event in the component seems to fix the problem.
Can I make a pull request removing the event or you intend to use it?
Currently it just add a CSS class to it, but I don't think it is necessary as we can just use the :focus selector.

I'm trying to two-way bind the TextField.Value but for some reason it does not work. Here is my code:

        <TextField Label="Anything" Type="text" Variant="@TextFieldVariant.Filled"
                                   @bind-Value="@Name" OnChange="OnNameChanged"/>

        private string m_str = "Hello";
        private string Name
        {
            get { return m_str; }
            set
            {
                m_str = value;
            }
        }

        private void OnNameChanged(ChangeEventArgs args)
        {
            string temp = Name;
            temp = args.Value?.ToString();
            temp = null;
        }

This is a server-side application. The Name.get method is called and used by the TextField, however the set method is never called. Interesting that the OnNameChanged is called but the Name is always the original "Hello".

The same code with InputText works however.

Can you help me what am I doing wrong?
Thanks! :-)

PS: Great job with this library :-)

When using <Tab> component with link, like this: <Tab component="a" href="..."> the parent <Tabs> component does not update and the OnChange is never called.
This works in material-ui. They use their own <Link> component instead of <a> so maybe that makes the difference.

Do you have any plans to do the following components?

https://material-ui.com/components/selects/
https://material-ui.com/components/pagination/

Thanks!!

How to use tab components? I get an error when typing TabPanel when using the tab component. What should I do to fix it?

This is the result when I run the application. The tabs is not working when I clicked.

I have created a test app using Skclusive Io framework.
Is it possible to replace svg icon in the left corner of the toolbar with my own? How to do it?
Thnx

I'd like to make use of the Tabbing components as seen here: https://skclusive.github.io/Skclusive.Material.Docs/tabs

Sample usage from docs:

<TabPanel
        Id="vertical-tabpanel"
        Label="vertical-tab"
        Value="@Value"
        Index="1">
        Item One
    </TabPanel>

The TabPanel component is not recognised however and I'm not able to find it as part of the source on here. Am I missing something or this has been removed?

currently using generic class names. better to prefix or provide option for prefixing via theme.

I don't need Edge right now, so no hurry. I just tried the minimal Material examples in Microsoft Edge 44.18362.449.0 and here is my report:

Material.Server.Host

• Drawer is not showing
• on the counter Page Button can not be clicked, increment not going up
• Ripple not showing on button click

Error message in JavaScript console:

[2020-06-20T09:43:41.801Z] Error: Microsoft.JSInterop.JSException: Could not find 'Skclusive' in 'window'.
Error: Could not find 'Skclusive' in 'window'.
   at Anonymous function (https://localhost:44314/_framework/blazor.server.js:8:30742)
   at Array.prototype.forEach (native code)
   at p (https://localhost:44314/_framework/blazor.server.js:8:30693)
   at Anonymous function (https://localhost:44314/_framework/blazor.server.js:8:31414)
   at Promise (native code)
   at e.jsCallDispatcher.beginInvokeJSFromDotNet (https://localhost:44314/_framework/blazor.server.js:8:31384)
   at Anonymous function (https://localhost:44314/_framework/blazor.server.js:1:19193)
   at Array.prototype.forEach (native code)
   at e.prototype.invokeClientMethod (https://localhost:44314/_framework/blazor.server.js:1:19171)
   at e.prototype.processIncomingData (https://localhost:44314/_framework/blazor.server.js:1:17160)

   at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args)

   at Mi

Material.Browser.Host

• Drawer not showing
• Counter is working, increment goes up!
• Ripple is not showing on button click

Error messages in console:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Could not find 'Skclusive' in 'window'.
      Error: Could not find 'Skclusive' in 'window'.
         at Anonymous function (https://localhost:5001/_framework/blazor.webassembly.js:1:9192)
         at Array.prototype.forEach (native code)
         at p (https://localhost:5001/_framework/blazor.webassembly.js:1:9142)
         at Anonymous function (https://localhost:5001/_framework/blazor.webassembly.js:1:9866)
         at Promise (native code)
         at e.jsCallDispatcher.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.webassembly.js:1:9835)
         at _mono_wasm_invoke_js_marshalled (https://localhost:5001/_framework/wasm/dotnet.3.2.0-rc1.20222.2.js:1:171315)
         at Module[_mono_wasm_invoke_method] (https://localhost:5001/_framework/wasm/dotnet.3.2.0-rc1.20222.2.js:1:195702)
         at BINDING.call_method (https://localhost:5001/_framework/wasm/dotnet.3.2.0-rc1.20222.2.js:1:160862)
         at BINDING.set_task_result (https://localhost:5001/_framework/wasm/dotnet.3.2.0-rc1.20222.2.js:1:150613)
Microsoft.JSInterop.JSException: Could not find 'Skclusive' in 'window'.
Error: Could not find 'Skclusive' in 'window'.
   at Anonymous function (https://localhost:5001/_framework/blazor.webassembly.js:1:9192)
   at Array.prototype.forEach (native code)
   at p (https://localhost:5001/_framework/blazor.webassembly.js:1:9142)
   at Anonymous function (https://localhost:5001/_framework/blazor.webassembly.js:1:9866)
   at Promise (native code)
   at e.jsCallDispatcher.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.webassembly.js:1:9835)
   at _mono_wasm_invoke_js_marshalled (https://localhost:5001/_framework/wasm/dotnet.3.2.0-rc1.20222.2.js:1:171315)
   at Module[_mono_wasm_invoke_method] (https://localhost:5001/_framework/wasm/dotnet.3.2.0-rc1.20222.2.js:1:195702)
   at BINDING.call_method (https://localhost:5001/_framework/wasm/dotnet.3.2.0-rc1.20222.2.js:1:160862)
   at BINDING.set_task_result (https://localhost:5001/_framework/wasm/dotnet.3.2.0-rc1.20222.2.js:1:150613)
  at System.Threading.Tasks.ValueTask`1[TResult].get_Result () <0x343bbb8 + 0x0002c> in <filename unknown>:0 
  at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync (Microsoft.JSInterop.IJSRuntime jsRuntime, System.String identifier, System.Object[] args) <0x334e0a8 + 0x000e4> in <filename unknown>:0 
  at Skclusive.Script.DomHelpers.DomHelpers.MoveContentAsync (System.Nullable`1[T] source, System.Nullable`1[T] target, System.Nullable`1[T] targetBody) <0x334d540 + 0x00138> in <filename unknown>:0 
  at Skclusive.Material.Core.Portal.OnAfterRenderAsync () <0x334ab90 + 0x00226> in <filename unknown>:0 
  at Skclusive.Core.Component.RenderComponentBase.OnAfterRenderAsync (System.Boolean firstRender) <0x3349138 + 0x002a8> in <filename unknown>:0 
  at Skclusive.Core.Component.DisposableComponentBase.OnAfterRenderAsync (System.Boolean firstRender) <0x3343900 + 0x000d4> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask (System.Threading.Tasks.Task taskToHandle) <0x335e1e0 + 0x000ca> in <filename unknown>:0 
blazor.webassembly.js (1,37753)

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Could not find 'Skclusive' in 'window'.
      Error: Could not find 'Skclusive' in 'window'.
         at Anonymous function (https://localhost:5001/_framework/blazor.webassembly.js:1:9192)
         at Array.prototype.forEach (native code)
         at p (https://localhost:5001/_framework/blazor.webassembly.js:1:9142)
         at Anonymous function (https://localhost:5001/_framework/blazor.webassembly.js:1:9866)
         at Promise (native code)
         at e.jsCallDispatcher.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.webassembly.js:1:9835)
         at _mono_wasm_invoke_js_marshalled (https://localhost:5001/_framework/wasm/dotnet.3.2.0-rc1.20222.2.js:1:171315)
         at Module[_mono_wasm_invoke_method] (https://localhost:5001/_framework/wasm/dotnet.3.2.0-rc1.20222.2.js:1:195702)
         at BINDING.call_method (https://localhost:5001/_framework/wasm/dotnet.3.2.0-rc1.20222.2.js:1:160862)
         at BINDING.set_task_result (https://localhost:5001/_framework/wasm/dotnet.3.2.0-rc1.20222.2.js:1:150613)
Microsoft.JSInterop.JSException: Could not find 'Skclusive' in 'window'.
Error: Could not find 'Skclusive' in 'window'.
   at Anonymous function (https://localhost:5001/_framework/blazor.webassembly.js:1:9192)
   at Array.prototype.forEach (native code)
   at p (https://localhost:5001/_framework/blazor.webassembly.js:1:9142)
   at Anonymous function (https://localhost:5001/_framework/blazor.webassembly.js:1:9866)
   at Promise (native code)
   at e.jsCallDispatcher.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.webassembly.js:1:9835)
   at _mono_wasm_invoke_js_marshalled (https://localhost:5001/_framework/wasm/dotnet.3.2.0-rc1.20222.2.js:1:171315)
   at Module[_mono_wasm_invoke_method] (https://localhost:5001/_framework/wasm/dotnet.3.2.0-rc1.20222.2.js:1:195702)
   at BINDING.call_method (https://localhost:5001/_framework/wasm/dotnet.3.2.0-rc1.20222.2.js:1:160862)
   at BINDING.set_task_result (https://localhost:5001/_framework/wasm/dotnet.3.2.0-rc1.20222.2.js:1:150613)
  at System.Threading.Tasks.ValueTask`1[TResult].get_Result () <0x343bbb8 + 0x0002c> in <filename unknown>:0 
  at Skclusive.Material.Script.EventDelegator.RegisterAsync (Microsoft.AspNetCore.Components.ElementReference reference, System.String name, System.Int32 delay) <0x33643d8 + 0x00116> in <filename unknown>:0 
  at Skclusive.Material.Transition.SlideComponent.OnAfterMountAsync () <0x3363a78 + 0x001d4> in <filename unknown>:0 
  at Skclusive.Core.Component.RenderComponentBase.OnAfterRenderAsync (System.Boolean firstRender) <0x3349138 + 0x00114> in <filename unknown>:0 
  at Skclusive.Core.Component.DisposableComponentBase.OnAfterRenderAsync (System.Boolean firstRender) <0x3343900 + 0x000d4> in <filename unknown>:0 
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask (System.Threading.Tasks.Task taskToHandle) <0x335e1e0 + 0x000ca> in <filename unknown>:0 
blazor.webassembly.js (1,37753)

2SCRIPT1028: SCRIPT1028: Expected identifier, string or number
counter (1,2028)

I'm trying to insert a Fab buttom on my page, but the Ripple effect is missing:

<Fab Size="@Size.Large"
     Color="@Color.Primary"
     aria-label="add"
     Style="margin: 8px;"
     Class="demo-fab-button">
    <AddIcon />
</Fab>

Am I missing something?

I tried a very simple Blazor Server project with only a few buttons and the ripple doesn't show when clicking on the buttons. When I create a Blazor WASM project with the same code the ripple works.

There is a lot of <style/> tags at the start of the document that should be in head.

How to catch row selection on click and call my own function?
For example,

1. user clicks on row, the row is selected and the row details displayed in other component.
2. user selects row and wants to download the object or print it etc.

Something like this is partially implemented in
https://github.com/gustavnavar/Grid.Blazor

It is

I.e. on row click OrderDetail component called.

I had a problem with Menu sometimes displaying in the corner even with AnchorRef correctly set.
Found the problem in Popover.cs in GetPositioningStylesAsync. There's this line:

styles.Add("left", $"{left}px");

In my CultureInfo, which is Slovak, or sk-SK, it is translated to "1296,5px" (comma instead of dot) which is not valid CSS. I fixed it in my code like this:

styles.Add("left", $"{left.ToString(CultureInfo.InvariantCulture)}px");

which is a thing I have to always use with floating point numbers. I guess this is going to be a global issue, so I'm not gonna create a PR for this small fix which fixes it in only one place.

Hi, I wanted to use the drawer component for a navigation menu.

https://skclusive.github.io/Skclusive.Material.Docs/drawer
So I copied the example from the docs:

<DrawerFrame>
    <AppBar
        Position="@AppBarPosition.Sticky"
        Class="clipped-left-app-bar">
        <Toolbar>
            <Typography
                Variant="@TypographyVariant.H6"
                NoWrap>
                Clipped drawer
            </Typography>
        </Toolbar>
    </AppBar>
    <Drawer
        Absolute
        Open
        Anchor="@Anchor.Left"
        Style="width: 240px; flex-shrink: 0; height: 100%;"
        PaperStyle="width: 240px;"
        Variant="@DrawerVariant.Permanent">
        <DrawerList
            Side>
            <div
                class="clipped-left-drawer-header" />
        </DrawerList>
    </Drawer>
    <main
        class="clipped-left-content">
        <Typography
            Paragraph>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
            ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
            facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
            gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
            donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
            adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
            Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
            imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
            arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
            donec massa sapien faucibus et molestie ac.
        </Typography>
        <Typography
            Paragraph>
            Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
            facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
            tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
            consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
            vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
            hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
            tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
            nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
            accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
        </Typography>
    </main>
</DrawerFrame>

But as it seems, Visual Studio recognized the "Drawer" component but not the "DrawerFrame" and "DrawerList" component, so I can't get the drawer to work.

Error - Found markup element with unexpected name 'DrawerList'. If this is intended to be a component, add a using directive for its namespace.

Error - Found markup element with unexpected name 'DrawerFrame'. If this is intended to be a component, add a using directive for its namespace.

How to catch row selection on click and call my own function?
For example,

user clicks on row, the row is selected and the row details displayed in other component.
user selects row and wants to download the object or print it etc.
Something like this is partially implemented in
https://github.com/gustavnavar/Grid.Blazor

It is
I.e. on row click OrderDetail component called.

Pretty much what's in the title. There's npm run build command but no installation command.

Can you point me to documentation on how to use the Material.Component?

Portal does not work when using default values for parameters. Should use document.body as stated here in the docs: https://material-ui.com/api/portal/
Edit: I'm not entirely sure why this happens
[2020-06-09T15:35:59.089Z] Error: There was an error applying batch 43.
Uncaught (in promise) TypeError: Cannot read property 'ownerDocument' of null

Material.Script project has javascript script requirements for other components. As extension added in each component better to keep the scripts on to their specific components.

• Menu

• Selection (RadioGroup)

• Popover

• Transition (Slide)

• Modal (FocusTrap)

Is this achievable right now with Material.Component?
https://material-ui.com/components/selects/
Or does that need to be implemented?

As for me it may be useful to have possibility to pass parameters and receive Result from a modal dialogs, for example:
I'd like to ask user "Would you really like to delete the record?" and to receive what user selected.

Something like here
https://github.com/Blazored/Modal

This problem only occurs in server side Blazor.

This bug is reproducable in the Dashboard demo Skclusive.Blazor.Dashboard by running Dashboard.Server.Host. The default browser window with the sample page should open without any problems. However, when navigating to the same page in a new tab while leaving the original one open, the second circuit runs into an exception:

fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit 'yIps8o-SOzz4DiBX8NBdOQEaYtW_Pqts_2JpsEtFVr8'.
Microsoft.JSInterop.JSException: Could not find 'Skclusive' in 'window'.
Error: Could not find 'Skclusive' in 'window'.
    at https://localhost:5001/_framework/blazor.server.js:8:30944
    at Array.forEach (<anonymous>)
    at p (https://localhost:5001/_framework/blazor.server.js:8:30904)
    at https://localhost:5001/_framework/blazor.server.js:8:31614
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.server.js:8:31587)
    at https://localhost:5001/_framework/blazor.server.js:1:20052
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (https://localhost:5001/_framework/blazor.server.js:1:20022)
    at e.processIncomingData (https://localhost:5001/_framework/blazor.server.js:1:18006)
   at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args)
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at Skclusive.Script.DomHelpers.DomHelpers.MoveContentAsync(Nullable`1 source, Nullable`1 target, Nullable`1 targetBody)
   at Skclusive.Material.Core.Portal.OnAfterRenderAsync() in C:\Repos\Skclusive.Material.Component\Core\src\Core\Portal.cs:line 71
   at Skclusive.Core.Component.RenderComponentBase.OnAfterRenderAsync(Boolean firstRender)
   at Skclusive.Core.Component.DisposableComponentBase.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

After reloading the second tab the web app works normally. The problem only occurs when the tab navigating to the web app is newly opened.

This problem is not local to the browser. I have deployed a web app on a server and I get the same behavior accross different devices. Whenever a tab navigates to the web app and another circuit is active, it first runs into an error. Only after refreshing the web app behaves normally.

Is it possible about Stepper component in next version release?

Missing material design icons:
notifications_active
notifications_none
notifications_paused
notifications_off

How to forward Href parameter when using <ListItem Button>?
Using Compoent="a" is not a good solution since the styling is not alright.

I'm seeing this exception in Console 2x. I identified it is caused by adding <MaterialScripts /> to App.razor file. I guess something is wrong in the ScriptHelpersScript.GetScript JS string and also in the DomHelpersScript.

Is it something which can be safely ignored?

I wanted to get an overview what is missing in this library so I put together a (probably incomplete) list of Material Design components I know from popular MD libraries such as Vuetify, etc. I understand this library started out as a port of React's Material-UI but I guess it could go much further than that. At least I see great potential for it.

Implemented components are checked off. Feel free to edit/update.

• Alert
• App Bar
• Autocomplete
• Avatar
• Backdrop
• Badge
• Breadcrumbs
• Bottom Navigation
• Buttons
• Button Group
• Calender
• Carousels
• Cards
• Checkboxes
• Chips ... implemented by @henon, Issue #42
• Circular Progress
• Color Picker
• Data Table
• Date Picker
• Dialogs
• Divider
• Drawers
• Expansion Panel
• FAB
• Floating Label
• Form
• Grid
• Grid List
• Hidden
• Icon Button
• Image
• Image List
• Layout Grid
• Line Ripple
• Linear Progress
• Link
• Lists
• Menus
• Modal
• Overlay (as Backdrop)
• Paper
• Pagination ... requested via Issue #11 by @Mhirji
• Parallax
• Popover
• Radio buttons
• Rating
• Ripple
• RTL (right-to-left) ... requested via Issue #43 by @T-Alkathiri
• Select ... requested via Issue #11 by @Mhirji
• Shape
• Slider
• Snackbars
• Sparklines
• Stepper ... requested via Issue #32 by @komsanb
• Switch
• Tabs
• Tab Bar
• Tab Scroller
• Textarea
• Textfield
• Time Picker
• Timeline
• Theme
• Toolbar
• Tooltip ... WIP by @esso23, Issue #12, PR #40
• Treeview ... requested via #6 by @Oleg26Dev
• Typography
• Virtual Scroller

Edit: merged with Issue #19

Next set of components to be implemented. just a holder issue to track.

Not in any order. People who are interested in contributing can create separate issue for respective components and work on it.

1. Select
2. Pagination
3. Tooltip #12
4. GridList
5. ButtonGroup
6. Slider
7. Bottom Navigation
8. Breadcrumbs
9. Snackbar
10. Alert
11. Autocomplete
12. Rating
13. TreeView
14. Stepper #32

I'm getting a spam of following errors after including the projects and compiling.

CS0104 'Styled' is an ambiguous reference between 'BlazorStyled.Styled' and 'Skclusive.Core.Component.Styled' Paragon.Tedis.Mobile D:...\Shared\MainLayout.razor

Am I doing something wrong? If not, it would be nice if Skclusive.Core.Component.Styled could be renamed, since writing <BlazorStyled.Styled></BlazorStyled.Styled> everywhere is quite annoying and both are included globally so it's not easy to manage. Or is there some good solution to this?

Edit:
I'm also getting this:

Multiple components use the tag 'Styled'. Components: BlazorStyled.Styled, BlazorStyled.Styled, Skclusive.Core.Component.Styled, Microsoft.AspNetCore.Components.Bind

There are hundreds of those...

The menu item when open, seem like delay. It's seem open twice. And the first menu item is gone.

How can I add a modern-ui theme? Do I have to change the source code?

Thank you for your work on this library.

@skclusive does your framework have a way to pass a class into a given user-defined RenderFragment? The RenderFragement component should append the class to its own classes.

I am getting this error.

Unhandled exception rendering component: Cannot provide a value for property 'DomHelpers' on type 'Skclusive.Material.Button.ButtonBase'. There is no registered service of type 'Skclusive.Script.DomHelpers.DomHelpers'.

I have registered
@using Skclusive.Material.Button
@using Skclusive.Script.DomHelpers

It may can be a bug. Some other components are working

I suggest adding the popular bootstrap classes for margin and padding. They have been adopted in many frameworks, so a lot of people will be familiar with them. I think they are essential to content layout because of their clarity and brevity.

Thoughts? Where could they be added to be globally accessible?

Hello,
I tried using OnClick on Card component, but that just doesn't work.
By what I understand OnClick isn't implemented on Card Component
so I tried to use @onclick.

Razor:

<Card Class="game-card-root"
      @onclick="@(e => HandleClickAsync(e))">
      ...
</Card>

Code:

[Parameter] public EventCallback Clicked { get; set; }
private async Task HandleClickAsync(MouseEventArgs args)
{
    await Clicked.InvokeAsync(args);
}

Error I get:
InvalidOperationException: Unable to set property 'onclick' on object of type 'Skclusive.Material.Card.Card'. The error was: Unable to cast object of type 'Microsoft.AspNetCore.Components.EventCallback`1[Microsoft.AspNetCore.Components.Web.MouseEventArgs]' to type 'Microsoft.AspNetCore.Components.EventCallback`1[System.EventArgs]'.

How can I use my own wwwroot\images\mylogo.png file instead of AppLayout.razor svg image as in Dashboard sample?

How can I set the maxlength of a input? (TextField)

I started working on a Chip implementation because it is a fairly simple component and thus ideal for me to learn what it takes to add components to this library.

The code is still incomplete but already PRed as #44

Thank you very much for the excellent tools.
Is thw textbox support RTL direction, if not could you please add it.
Again thank you very much.

Sometimes need to have a component to work with hierarchical data.

It may be very useful to have a Tree/TreeView component.
Something like this
https://github.com/ctrl-alt-d/BlazorServerTree

Currently <Hidden /> component exposes the media query class via context.Class

ex:

<Hidden SmallUp>
   <Paper Class="@context.Class">content here</Paper/>
</Hidden>

we could add new parameter named Wrap which could wrap the content inside div and style with hidden class.

ex:

<Hidden SmallUp Wrap>
   <Paper>content here</Paper/>
</Hidden>

would wrap the <Paper /> inside a <div />

#21 for details.

How to reproduce:
Create an empty Blazor server-side project, install Hidden component, include in Imports and paste this to MainLayout:

    <Hidden SmallDown>
        <p>SMALL DOWN</p>
    </Hidden>
    
    <Hidden MediumUp>
        <p>MEDIUM UP</p>
    </Hidden>

Both texts will be displayed at all times.