Premiär! Fyndchans i SweClockers Månadens Drop

MudBlazor ett Open Source .NET Core Blazor komponent bibliotek

Permalänk

MudBlazor ett Open Source .NET Core Blazor komponent bibliotek

Hej,

Har dom senaste månaderna jobbat nästan dygnet runt för att hinna med mitt vanliga jobb och för att kunna gå public med mitt projekt på Github. Nu har det gottat sig några veckor som publikt och folk verkar gilla det jag påbörjat.

Först och främst vill jag bara säga att jag anser mig själv inte vara en utvecklare, jobbar som IT Konsult, har mest hand om den tekniska driften av SQL och webbservrar och saknar relevant utvecklingsutbildning men har alltid älskat design och att skapa.

2018 hängde jag med några kollegor ner till Göteborg för att kolla på en föreläsning om Azure DevOps men det var något helt annat som fångade mitt intresse, Blazor. Skriva C# direkt i frontend och kunna köra det direkt i webbläsaren hos klienterna. Skippa tjafs som javascript och satsa 100% på bra CSS och C#

Gjorde en intern "azure portal" med kopplingar till våra SQL servrar, webbservrar på mitt företag men efter flertalet .net core previews så insåg jag att jag la mest tid på att underhålla/bygga blazor komponenter. Då andra open source projekt där ute inte fall mig i smaken då dom känndes väldigt "overengineered" buggiga, komplext att lägga till även de enklaste komponenterna och all dess jäka javascript alla trycker in trots Blazor så drog jag i år igång med mitt projekt MudBlazor.

Det är som sagt ett Blazor Komponent bibliotek baserat på Material design, målet är att göra mer med Blazor och använda oss av CSS/SCSS och vi har en "No javascript" policy där vi absolut enbart får använda det om det är något Blazor inte kan. Ofta är det bara grejer som har med hemsidan och användarnas webbläsare att göra.

Det är säkert en del av er här som är .NET utvecklare, kanske känner samma sak som jag och andra gjort om de övriga befintliga open source projekten där ute så får ni gärna kolla in MudBlazor.

https://mudblazor.com/
https://github.com/Garderoben/MudBlazor

Ni kan även testa komponent direkt via https://try.mudblazor.com/ har ni några frågor så kör på här, eller om ni skulle stöta på något fel släng upp ett issue på github.

// Jonny Larsson, MudBlazor

Visa signatur
Permalänk
Medlem

Väldigt, väldigt coolt.

Jag har bara gjort "Hello World" i Blazor, men när jag tittar på det här blir jag sugen att hitta på något mer avancerat.

Jag måste bara lära mig sy ihop detta med OAUTH2 (mot Azure AD) och API-anrop, så finns det hur många interna applikationer som helst att bygga hos nuvarande kunden.

Återkommer kanske i tråden eller på GitHub när jag hunnit testa. Lär inte bli före mellandagarna.

Skrivet av Garderoben:

vi har en "No javascript" policy där vi absolut enbart får använda det om det är något Blazor inte kan.

"Almost no javascript policy" då kanske

Passar mig utmärkt i alla fall.

Permalänk
Skrivet av KAD:

Väldigt, väldigt coolt.

Jag har bara gjort "Hello World" i Blazor, men när jag tittar på det här blir jag sugen att hitta på något mer avancerat.

Jag måste bara lära mig sy ihop detta med OAUTH2 (mot Azure AD) och API-anrop, så finns det hur många interna applikationer som helst att bygga hos nuvarande kunden.

Återkommer kanske i tråden eller på GitHub när jag hunnit testa. Lär inte bli före mellandagarna.

"Almost no javascript policy" då kanske

Passar mig utmärkt i alla fall.

Finns färdiga templates med Azure AD SSO dock bara om du kör server mode men är 0 kod att skriva själv från början väldigt smidigt.
Sen behöver man ju lära sig hur man hanterar azure AD roller osv men ett fungerande exempel har man uppe på några sec.

https://prnt.sc/vdnpd8

Visa signatur
Permalänk
Medlem

Kan bara hålla med om att det är väldigt coolt!

Aldrig prioriterat att lära mig javascript så när Blazor nu kommer på riktigt så är det verkligen läge att försöka lära sig vad detta med WWW är för något påhitt

Saknade i början en liten text om hur man ersätter "default" Blazor templaten UI med MudBlazor. Efter ett tag så fattade jag att kan kunde ta Drawer component exemplet och nära på ctrl-c/v och ersätta allt in MainLayout.Razor och istället för LoremIpsum ha (at)Body, ser rätt ut och fungerar när jag försöker följa tutorials för att lära mig. Hoppas bara det är rätt

@Body verkade tagga en användare, inte mening!
Permalänk
Skrivet av hemmafru:

Kan bara hålla med om att det är väldigt coolt!

Aldrig prioriterat att lära mig javascript så när Blazor nu kommer på riktigt så är det verkligen läge att försöka lära sig vad detta med WWW är för något påhitt

Saknade i början en liten text om hur man ersätter "default" Blazor templaten UI med MudBlazor. Efter ett tag så fattade jag att kan kunde ta Drawer component exemplet och nära på ctrl-c/v och ersätta allt in MainLayout.Razor och istället för LoremIpsum ha (at)Body, ser rätt ut och fungerar när jag försöker följa tutorials för att lära mig. Hoppas bara det är rätt

Hojta om du undrar något! Vissa dokumentations sidor kan vara lite väl hastigt skrivna och inte genomtänkta.
I förra releasen gjorde jag om snackbar en hel del och då dokumentationen. Sitter och gör om Dialog & Dialog docs as we speak.

Tippar på att vi tar ut 1.1.5 i helgen, innehåller mest css fixar eller grejer vi helt enkelt missat/ inte tänkt på. Men tänkte försöka få med något "större" också.

Visa signatur
Permalänk
Medlem

Lyfter upp en fråga som jag googlat runt på men inte fattar riktigt,
Mudblazor grid:
The grid component helps keep layout consistent across various screen resolutions and sizes. Mudblazor comes with a 12 point grid system amd contains 5 types of breakpoints that are used for specific screen sizes.

Så kollar jag på exemplen och ex xs=6 sm=3 och jag fattar inte som sagt.
Om xs (extra smal), använd 6 punkter, om sm (smal) använd 3 punkter av de totala antalet 12 punkter? Men den logiken(?) går helt mot exempelsidan, https://mudblazor.com/components/grid, så där bara xs=6 används, så kryper de rutorna bara ju smalare jag gör webbläsaren med med xs=6 sm=3 så beter det sig mer reaktivt.

Ett år senare och jag fattar, tror jag.
De där 12 punkterna är som 12 kolumner som tar upp 1/12 var av skärmbredden
Så om jag gör såhär
<MudItem xs="12" sm="6" lg="12">
<MudPaper>xs=12 sm=6 lg=12</MudPaper>
</MudItem>
<MudItem xs="12" sm="6" lg="12">
<MudPaper>xs=12 sm=6 lg=12</MudPaper>
</MudItem>

Så vid fullskärm kommer varje item ta upp en hel rad. Minskas skärmstorleken så att det hamnar under lg, så kommer de istället ta upp en halv rad var (6/12) för att sedan då skrärmen blir mindre än sm, ta upp en hel rad var igen..