mudblazor / trymudblazor Goto Github PK

View Code? Open in Web Editor NEW

This project forked from blazorrepl/blazorrepl

71.0 71.0 35.0 25.61 MB

A playground for trying out and testing MudBlazor components entirely in the browser.

Home Page: https://try.mudblazor.com/

License: GNU General Public License v2.0

HTML 19.68% C# 54.03% CSS 4.89% JavaScript 14.94% SCSS 6.46%

blazor blazor-fiddle components-library fiddle hacktoberfest mudblazor mudblazor-codepen mudblazor-fiddle repl

trymudblazor's Introduction

Material Design components for Blazor

MudBlazor is an ambitious Material Design component framework for Blazor with an emphasis on ease of use and clear structure. It is perfect for .NET developers who want to rapidly build web applications without having to struggle with CSS and Javascript. MudBlazor, being written entirely in C#, empowers you to adapt, fix or extend the framework. There are plenty of examples in the documentation, which makes understanding and learning MudBlazor very easy.

Documentation & Demo

Why is MudBlazor so successful?

Clean and aesthetic graphic design based on Material Design.
Clear and easy to understand structure.
Good documentation with many examples and source snippets.
All components are written entirely in C#, no JavaScript allowed (except where absolutely necessary).
Users can make beautiful apps without needing CSS (but they can of course use CSS too).
No dependencies on other component libraries, 100% control over components and features.
Stability! We strive for a complete test coverage.
Releases often so developers can get their PRs and fixes in a timely fashion.

Prerequisites

MudBlazor	.NET	Support
1.x.x - 2.0.x	.NET 3.1	Ended 03/2021
5.x.x	.NET 5	Ended 01/2022
6.x.x	.NET 6, .NET 7, .NET 8	✔️
7.x.x	.NET 7, .NET 8	✔️

ℹ️ Currently only interactive rendering modes are supported - Learn more.

⚠️ Blazor only supports current browser versions. To ensure a seamless experience with MudBlazor, please use an up-to-date web browser. If a browser version is no longer maintained by its publisher, we cannot guarantee compatibility with MudBlazor.

Stats

Contributing

👋 Thanks for wanting to contribute!
Contributions from the community are what makes MudBlazor successful.

If you are familiar with technologies like C#, Blazor, JavaScript, or CSS, and wish to give something back, please consider submitting a pull request! We try to merge all non-breaking bugfixes and will deliberate the value of new features for the community. Please note there is no guarantee your PR will be merged, so if you want to be sure before investing the work, feel free to contact the team first.

Check out the contribution guidelines to understand our goals and learn more about the internals of the project.

Getting Started

Full installation instructions can be found on our website.
Alternatively use one of our templates from the MudBlazor.Templates repo.

Quick Installation Guide

Install Package

dotnet add package MudBlazor

Add the following to _Imports.razor

@using MudBlazor

Add the following to the MainLayout.razor or App.razor

<MudThemeProvider/>
<MudPopoverProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>

Add the following to index.html (client-side) or _Host.cshtml (server-side) in the head

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

Add the following to index.html or _Host.cshtml in the body

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

Add the following to the relevant sections of Program.cs

using MudBlazor.Services;

builder.Services.AddMudServices();

Usage

<MudText Typo="Typo.h6">MudBlazor is @Text</MudText>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="ButtonOnClick">@ButtonText</MudButton>

@code {
  public string Text { get; set; } = "????";
  public string ButtonText { get; set; } = "Click Me";
  public int ButtonClicked { get; set; }

  void ButtonOnClick()
  {
      ButtonClicked += 1;
      Text = $"Awesome x {ButtonClicked}";
      ButtonText = "Click Me Again";
  }
}

trymudblazor's People

Contributors

Stargazers

Watchers

trymudblazor's Issues

Session crashes when running a snippet containing only a component definition

When the following snippet is pasted into the initial razor file, the session crashes. Restarting the application resolves the issue, clearing browser cache & data resolves the issue.

@typeparam T
@inherits MudSelectItem<T>

<MudSelectItem @onmouseenter="ShowButtons" @onmouseleave="HideButtons" T="@T"
               Class="@Class"
               Value="@Value"
               Command="@Command"
               Disabled="@Disabled"
               Href="@Href"
               Style="@Style"
               Tag="@Tag"
               CommandParameter="@CommandParameter"
               DisableRipple="@DisableRipple"
               ForceLoad="@ForceLoad"
               OnClick="@OnClick">
    <MudContainer Class="d-inline-flex ma-0 pa-0">
        <MudText Class="d-inline-flex flex-shrink-0">@(Text ?? Value.ToString())</MudText>
        <MudContainer Class="d-inline-flex flex-grow-1"/>
        @if (_showButtons)
        {
            <MudIconButton Class="d-inline-flex z-10" Size="Size.Small" Title="@EditTitle" Icon="@EditIcon" Color="@EditColor" OnClick="@(async () => await OnEdit(Value))"/>
            <MudDivider Class="mx-2" Vertical="true" FlexItem="true" />
            <MudIconButton Class="d-inline-flex z-10" Size="Size.Small" Title="@DeleteTitle" Icon="@DeleteIcon" Color="@DeleteColor" OnClick="@(async () => OnDelete(Value))"/>
        }
    </MudContainer>
</MudSelectItem>

@code {
    [Parameter]
    public string? Text { get; set; }

    [Parameter]
    public Func<T, Task> OnEdit { get; set; }
    
    [Parameter]
    public Func<T, Task> OnDelete { get; set; }

    [Parameter]
    public string? EditTitle { get; set; } = "Edit";

    [Parameter]
    public string? DeleteTitle { get; set; } = "Delete";

    [Parameter]
    public string? EditIcon { get; set; } = Icons.Material.Outlined.Edit;

    [Parameter]
    public string? DeleteIcon { get; set; } = Icons.Material.Outlined.Delete;

    [Parameter]
    public Color EditColor { get; set; } = Color.Info;

    [Parameter]
    public Color DeleteColor { get; set; } = Color.Error;

    private bool _showButtons { get; set; }

    private async Task HideButtons(MouseEventArgs args)
    {
        _showButtons = false;
        InvokeAsync(StateHasChanged);
    }

    private void ShowButtons(MouseEventArgs args)
    {
        _showButtons = true;
        InvokeAsync(StateHasChanged);
    }

    private async void InvokeEdit()
    {
        await OnEdit(Value);
    }

    private async void InvokeDelete()
    {
        await OnDelete(Value);
    }
}

Editor showing default theme on first load

When you load the UserPage for the first time the editor will be themed default and the rest will be in vs-dark mode. I tried the following change:

        create: function (id, value, language) {
            if (!id) { return; }
            let _theme = "vs-dark"; // was "default"
            let userPreferences = localStorage.getItem("userPreferences");
            if (userPreferences) {
                const userPrefer
encesJSON = JSON.parse(userPreferences);
                if (userPreferencesJSON.hasOwnProperty("DarkTheme") && userPreferencesJSON.DarkTheme) {
                    _theme = "vs-dark";
                }

Which appears to fix it at first until you refresh the page when you have the theme set to default. The editor shows in vs-dark mode. The problem appears to be a failure to load the setting properly when you refresh or when there's no userPreferences set.

Unable to open try mudblazor from few days.

Here is the exception it is throwing.

[Feature Request] Add Mudblazor designer

It would be great if we had a WYSIWYG designer.

It doesen't need to be too advanced, just enought to quickly scaffold some code.

This would be a great help to some people who are getting started (like me) with Mudblazor.

Any thoughts?

Try Mudblazor is broken from the main page!

I just went to check it out and it doesn't load ???

Consider adding antivirus/firewall bypasses to the site

Blazor WASM sites often get blocked by corporate firewalls because of the fetch of dll's. Firewalls will often identify them as unsafe due to the dll extension or the file starting with the "MZ" header (executable) meaning you can't access the tryblazor or mudblazor.com sites behind a lot of corporate firewalls.

This nuget package works well to bypass the issue by Xor'ing the dll's and changing the file extension on publish.
https://github.com/stavroskasidis/BlazorWasmAntivirusProtection

Mudtable with Expansion Panels

I have a Item data model with a List propery sessions, it is a 1 -> many relationship and I want to be able to have a table of expansion panels that open up to the itemized sessions and I can't figure out how to do this. Is there a way to alter the TableGroupDefinnition to have the parent object as the group by and the session id as the selector? Can i do some kind of renderfragment situation? Any ideas? I feel like this is a common data structure and would be a great addition to the componenets for mudtable. Thank you!

Update monaco-editor

https://github.com/MudBlazor/TryMudBlazor/tree/a4d7438c155a62fdb99d77555dcb24b8163a1f3e/src/TryMudBlazor.Client/wwwroot/lib/monaco-editor

Better text on the right side panel of uncompiled snippets

This is What REPL now has:

Welcome to Blazor REPL!
How to start?
Run the code on the left by clicking the "RUN" button or pressing Ctrl+S.

Share your snippets!
Share your snippet easily by following the steps:

Click the "SAVE" button
Confirm that you agree with the terms
Copy the URL of the snippet and paste it wherever you need
What are the editor's features?
We are using Microsoft's Monaco Editor. It is the code editor that powers VS Code. You can access its Command Palette by focusing on the editor and clicking F1 button on your keyboard. You will see the list of all available commands. You can use the commands' shortcuts too.

Some of the most commonly used commands are:

Ctrl+K Ctrl+C comments out the current line
Ctrl+Shift+K deletes a line
Command Palette -> Editor Font Zoom In/Out changes the font size
If you want to dig a little deeper into Monaco Editor's features, you can do so here.

Enjoy creating!

Description of the snippet

Proposal
Force the user that wants to create a tryMudBlazor snippet to add a description of what this snippet is meant to.
So, when you revisit old ones, you know what the purpose is.

Show TryMudBlazor version in footer

Show a link to the latest commit version in the footer so you know what it's running.

footer.mp4

GitVersioning is a possibility and includes automatically increasing version numbers.

Provide data services/apis for the table snippets

Multiple popovers appear when you use more than one .razor file

See MudBlazor/MudBlazor#3249

Reproduction: https://try.mudblazor.com/snippet/QEQbFlEIThPxeNT

Support IntelliSense and auto-completion.

This might be difficult but should be investigated with the new razor tooling engine.

[Feature Request] Search

Duplicate of my issue on the main repo - I didn't know about this repo.

It would be nice to quickly find samples of mudblazor code.

Is it possible to make the TryMudBlazor site searchable?

I'm sure there's a large number of very useful samples in there, but there's no way to find them.

Remove the "Leave Site" Alert when closing, it is annoying

[Known Issue] "The operation is insecure" in Firefox Private mode

Official Mozilla Documentation states that: "Furthermore, because CacheStorage requires file-system access, it may be unavailable in private mode in Firefox."

Bugzilla#1724607 and Bugzilla#1320796 claims that: "Cache Storage/Service Worker implementation requires file system access. It's disabled in Firefox private mode whereas Chrome/Edge/Safari incognito mode uses a memory file system."

Add css support

It would be helpful to specify css, either inline somehow or in another tab.

Issue in private tab

I previously reported this issue in Discord, but to ensure it is not overlooked, I am now creating a formal issue here.

Steps to reproduce:

Open a private tab in Edge
Navigate to https://try.mudblazor.com/snippet
An exception will appear
Refresh the page and the error disappears
Close all instances of Edge and repeat step 1 to see the error reappear.

Exception:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Cannot read properties of null (reading 'DarkTheme')
      TypeError: Cannot read properties of null (reading 'DarkTheme')
          at Object.create (https://try.mudblazor.com/editor/main.js?v=943ea4c5-58cf-4e31-8931-f3aa76c9c0fd:116:67)
          at Object.invokeJSFromDotNet (https://try.mudblazor.com/_framework/blazor.webassembly.js:1:3219)
          at Object.Gt [as invokeJSFromDotNet] (https://try.mudblazor.com/_framework/blazor.webassembly.js:1:62602)
          at Object.Ii (https://try.mudblazor.com/_framework/dotnet.7.0.4.n8uw76titq.js:5:71922)
          at _mono_wasm_invoke_js_blazor (https://try.mudblazor.com/_framework/dotnet.7.0.4.n8uw76titq.js:14:103886)
          at https://try.mudblazor.com/_framework/dotnet.wasm:wasm-function[313]:0x1d507
          at https://try.mudblazor.com/_framework/dotnet.wasm:wasm-function[283]:0x1c935
          at https://try.mudblazor.com/_framework/dotnet.wasm:wasm-function[221]:0xe025
          at https://try.mudblazor.com/_framework/dotnet.wasm:wasm-function[220]:0xce95
          at https://try.mudblazor.com/_framework/dotnet.wasm:wasm-function[8115]:0x1a21ff
Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'DarkTheme')
TypeError: Cannot read properties of null (reading 'DarkTheme')
    at Object.create (https://try.mudblazor.com/editor/main.js?v=943ea4c5-58cf-4e31-8931-f3aa76c9c0fd:116:67)
    at Object.invokeJSFromDotNet (https://try.mudblazor.com/_framework/blazor.webassembly.js:1:3219)
    at Object.Gt [as invokeJSFromDotNet] (https://try.mudblazor.com/_framework/blazor.webassembly.js:1:62602)
    at Object.Ii (https://try.mudblazor.com/_framework/dotnet.7.0.4.n8uw76titq.js:5:71922)
    at _mono_wasm_invoke_js_blazor (https://try.mudblazor.com/_framework/dotnet.7.0.4.n8uw76titq.js:14:103886)
    at https://try.mudblazor.com/_framework/dotnet.wasm:wasm-function[313]:0x1d507
    at https://try.mudblazor.com/_framework/dotnet.wasm:wasm-function[283]:0x1c935
    at https://try.mudblazor.com/_framework/dotnet.wasm:wasm-function[221]:0xe025
    at https://try.mudblazor.com/_framework/dotnet.wasm:wasm-function[220]:0xce95
    at https://try.mudblazor.com/_framework/dotnet.wasm:wasm-function[8115]:0x1a21ff
   at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeJS(String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)
   at Microsoft.JSInterop.JSInProcessRuntime.Invoke[IJSVoidResult](String identifier, Int64 targetInstanceId, Object[] args)
   at Microsoft.JSInterop.JSInProcessRuntime.Invoke[IJSVoidResult](String identifier, Object[] args)
   at Microsoft.JSInterop.JSInProcessRuntimeExtensions.InvokeVoid(IJSInProcessRuntime jsRuntime, String identifier, Object[] args)
   at TryMudBlazor.Client.Components.CodeEditor.OnAfterRender(Boolean firstRender)
   at Microsoft.AspNetCore.Components.ComponentBase.Microsoft.AspNetCore.Components.IHandleAfterRender.OnAfterRenderAsync()
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.NotifyRenderCompletedAsync()

Unhandled Error when loading try.mudblazor.com on Firefox

When trying to load try.mudblazor.com on Firefox, there is an unhandled error. No snippits can be loaded nor can the base site.

System.AggregateException: One or more errors occurred. (Could not resolve type with token 0100006c from typeref (expected class 'Try.UserComponents.__Main' in assembly 'Try.UserComponents, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null'))
 ---> System.TypeLoadException: Could not resolve type with token 0100006c from typeref (expected class 'Try.UserComponents.__Main' in assembly 'Try.UserComponents, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null')
   at TryMudBlazor.Client.Program.Main(String[] args)
   --- End of inner exception stack trace --- blazor.webassembly.js:1:46102
    callEntryPoint https://try.mudblazor.com/_framework/blazor.webassembly.js:1

new feature request - "full screen" mode

It would be nice if there was a button in the bottom (status bar) that could toggle into "full screen" mode.
Ideally to show the full "Run" pane, so that one can test it in a mobile browser.
Having full screen mode for code page could be useful too.