Skip to content

Instantly share code, notes, and snippets.

View conficient's full-sized avatar
🤓
Loving BLAZOR!

Howard Richards conficient

🤓
Loving BLAZOR!
58 followers · 28 following
View GitHub Profile
@conficient
conficient / dabblet.css
Created November 16, 2012 07:51
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
body {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}
.d0 { width: 100%; padding:0; margin:0 }
@conficient
conficient / tinyMCE.html
Created March 9, 2016 10:28
TinyMCE test
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
<textarea>Easy (and free!) You should check out our premium features.</textarea>
</body>
</html>
@conficient
conficient / BlazorModalExample.razor
Last active November 6, 2024 15:39
Blazor Modal Dialog with no JS interop
<button class="btn btn-primary" @onclick="@ModalShow">Show Dialog!</button>
@if (showModal)
{
<div class="modal fade show" id="myModal" style="display:block" aria-modal="true" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
@conficient
conficient / AppState.cs
Created September 13, 2019 15:05
Blazor - State machines with events - example from FlightFinder
using FlightFinder.Shared;
using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Net.Http;
using System.Threading.Tasks;
namespace FlightFinder.Client.Services
{
public class AppState
@conficient
conficient / appsettings.md
Last active October 6, 2023 09:55
AppSettings - in different environments

appsettings

In a JSON file, appsettings can be a nested heirachy, e.g.

{
    "Top": {
        "Second": {
            "Key": "value"
        }
 }
@conficient
conficient / DevOnly.razor
Created July 30, 2020 16:42
Blazor DevOnly component - only show the content of the component in Development mode
@using Microsoft.Extensions.Hosting
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment env
@if (isDevelopment)
{
@ChildContent
}
@code {
[Parameter] public RenderFragment ChildContent { get; set; }
@conficient
conficient / SizeCheck.razor
Last active May 4, 2021 20:42
Blazor SizeCheck - puts a small badge top-right of the screen on Bootstrap 4.x - see also the DevOnly component
@* see DevOnly at https://gist.github.com/conficient/aca15e92931a15d76047cee598df2e0c *@
@* a small coloured badge appears on the top right of the screen to show the current Bootstrap 4.x
screen breakpoint (see https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)
This component can be put into your `MainLayout.razor` template so it appears on every page.
It's wrapped in a `<DevOnly>` component, so will only render in Debug mode. In production it won't appear.
*@
<DevOnly>
<div style="position:absolute; top: 10px; right: 10px;">
<span class="badge badge-primary d-none d-xl-inline">xl</span>
<span class="badge badge-info d-none d-lg-inline d-xl-none">lg</span>
@conficient
conficient / GreyOutZone.razor
Created July 30, 2020 17:23
Blazor - GreyOutZone - adapted from FlightFinder but with embedded styles so works stand-alone
@* creates a container component that greys-out the content when the `IsGreyedOut` parameter is set to true *@
<div style="@(IsGreyedOut ? greyout : null)">
<div style="@cover"></div>
@ChildContent
</div>
@code {
const string greyout = "position: absolute; width: 100%; min-height: 100%;";
const string cover = "background: rgba(150, 150, 150, 0.5); position: absolute; width: 100%; height: 100%; z-index: 1;";
@conficient
conficient / Test.cs
Last active August 6, 2020 16:38
IEnumerable does not protect your list..
using Microsoft.VisualStudio.TestTools.UnitTesting;
using System;
using System.Collections.Generic;
namespace Tests
{
[TestClass]
public class Test
{
[TestMethod]
@conficient
conficient / Loading.razor
Created September 1, 2020 15:26
Loading content control for Razor
/* shows a loading gif/text if a value is null */
@if (Value == null)
{
<div><img src="/img/SmallLoader.gif" alt="loading" /> Loading</div>
}
else
{
@ChildContent
}
@code {