Skip to content

Commit 5fee78e

Browse files
committed
v1.2.0
1 parent 5897d0b commit 5fee78e

File tree

72 files changed

+852
-289
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+852
-289
lines changed
+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
public class Startup
2+
{
3+
public void ConfigureServices(IServiceCollection services)
4+
{
5+
services.AddRazorPages();
6+
services.AddServerSideBlazor();
7+
services.AddBlazorStyled();
8+
}
9+
10+
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
11+
{
12+
if (env.IsDevelopment())
13+
{
14+
app.UseDeveloperExceptionPage();
15+
}
16+
else
17+
{
18+
app.UseExceptionHandler("/Home/Error");
19+
app.UseHsts();
20+
}
21+
22+
app.UseHttpsRedirection();
23+
app.UseStaticFiles();
24+
25+
app.UseRouting();
26+
27+
app.UseEndpoints(endpoints =>
28+
{
29+
endpoints.MapBlazorHub<App>(selector: "app");
30+
endpoints.MapFallbackToPage("/_Host");
31+
});
32+
}
33+
}
+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@inherits LayoutComponentBase
2+
<ServerSideStyled />
3+
4+
<div class="sidebar">
5+
<NavMenu />
6+
</div>
7+
8+
<div class="main">
9+
<div class="top-row px-4">
10+
<a href="https://docs.microsoft.com/en-us/aspnet/" target="_blank">About</a>
11+
</div>
12+
13+
<div class="content px-4">
14+
@Body
15+
</div>
16+
</div>

docs/_content/SampleCore/basic1.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Styled @bind-Classname="@example1">
2+
background-color: hotpink;
3+
</Styled>
4+
5+
<div class="@example1">The background of this div is hotpink</div>
6+
7+
@code {
8+
private string example1;
9+
}

docs/_content/SampleCore/basic2.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@inject IStyled Styled
2+
3+
<button @onclick="@(x => click(" red"))">Make the div red</button>
4+
5+
<button @onclick="@(x => click(" hotpink"))">Make the div hotpink</button>
6+
7+
@code {
8+
private string example2;
9+
10+
protected void click(string color)
11+
{
12+
example2 = Styled.Css($"background-color: {color};");
13+
StateHasChanged();
14+
}
15+
}

docs/_content/SampleCore/basic3.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<Styled @bind-Classname="@link">
2+
display: block;
3+
font-size: 24px;
4+
font-weight: 300;
5+
color: #1B1D1D;
6+
text-decoration: none;
7+
margin: 0;
8+
font-size: 16px;
9+
padding-bottom: 6px;
10+
padding-left: 0;
11+
padding-right: 0;
12+
&:hover {
13+
color: #C865B9;;
14+
}
15+
</Styled>
16+
17+
<Styled>
18+
.active {
19+
color: #D36AC2;
20+
font-size: 16px;
21+
padding-top: 6px;
22+
padding-bottom: 6px;
23+
padding-left: 0;
24+
padding-right: 0;
25+
}
26+
</Styled>
27+
28+
<NavLink class="@link" href="" Match="NavLinkMatch.All">
29+
Introduction
30+
</NavLink>
31+
32+
@code {
33+
private string link;
34+
}

docs/_content/SampleCore/basic4.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<Styled>
2+
p > code {
3+
font-family: 'Fira Code', monospace;
4+
margin-top: 20px;
5+
color: #1B1D1D;
6+
font-weight: 400;
7+
line-height: 1.7em;
8+
background-color: rgba(117,63,131,0.07);
9+
border-radius: 0.325rem;
10+
margin: 0;
11+
padding: 0.2rem 0.325rem;
12+
}
13+
code {
14+
line-height: 1.25em;
15+
}
16+
pre {
17+
line-height: 1.25em;
18+
}
19+
h1 {
20+
margin-top: 0px;
21+
}
22+
@@media only screen and (min-width:768px) {
23+
html {
24+
height: 100%;
25+
}
26+
body {
27+
height: 100%;
28+
overflow: hidden;
29+
margin: 0px;
30+
}
31+
}
32+
@@media only screen and (max-width:768px) {
33+
margin-top: 0px;
34+
}
35+
</Styled>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<MyButton OnClick="@onclick">Green Button</MyButton>
2+
<MyButton OnClick="@onclick" Color="hotpink">Hotpink Button</MyButton>
3+
4+
@code {
5+
private void onclick(MouseEventArgs e)
6+
{
7+
Console.WriteLine("Onclick");
8+
}
9+
}
+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<Styled @bind-Classname="@button">
2+
font-size:16px;
3+
margin:18px;
4+
border:none;
5+
cursor:pointer;
6+
display:inline-block;
7+
padding:10px 20px;
8+
text-align:center;
9+
transition:0.25s cubic-bezier(0.17, 0.67, 0.52, 0.97);
10+
border-radius:4px;
11+
color:#fff;
12+
box-shadow:0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
13+
background-color:@Color;
14+
</Styled>
15+
16+
<Styled Classname="@button" PseudoClass="PseudoClasses.Hover">
17+
opacity: 0.7;
18+
transform:translateY(-1px);
19+
box-shadow:0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
20+
</Styled>
21+
22+
<Styled Classname="@button" PseudoClass="PseudoClasses.Focus">
23+
outline:0;
24+
</Styled>
25+
26+
<Styled Classname="@button" PseudoClass="PseudoClasses.Active">
27+
transform:translateY(1px);
28+
</Styled>
29+
30+
<button class="@button" @onclick="@OnClick">@ChildContent</button>
31+
32+
@code {
33+
[Parameter] public RenderFragment ChildContent { get; set; }
34+
[Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
35+
[Parameter] public string Color { get; set; } = "green";
36+
37+
private string button;
38+
}
+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<Styled @bind-Classname="@grey">
2+
label: white;
3+
background-color: white;
4+
</Styled>
5+
6+
<Styled @bind-Classname="@bigFont">
7+
label: big-font;
8+
font-size: 32px;
9+
</Styled>
10+
11+
<Styled @bind-Classname="@div" Compose1="@grey" Compose2="@bigFont" Compose2If="@_showBig" />
12+
13+
<div class="@div">
14+
Some text
15+
</div>
16+
17+
<button @onclick="@onclick">Toggle Font Size</button>
18+
19+
@code {
20+
private string div, grey, bigFont;
21+
private bool _showBig = false;
22+
23+
private void onclick()
24+
{
25+
_showBig = !_showBig;
26+
}
27+
}

docs/_content/SampleCore/fonts1.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<Styled>
2+
@font-face {
3+
font-family: 'Indie Flower';
4+
font-style: normal;
5+
font-weight: 400;
6+
font-display: swap;
7+
src: local('Indie Flower'), local('IndieFlower'), url(https://fonts.gstatic.com/s/indieflower/v10/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2) format('woff2');
8+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
9+
}
10+
</Styled>
11+
12+
<Styled @bind-Classname="@p">
13+
font-family: 'Indie Flower';
14+
</Styled>
15+
16+
<p class="@p">This paragraph is in Indie Flower font.</p>
17+
18+
@code {
19+
private string p;
20+
}
+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<StyledGoogleFont Name="Geostar" Styles="normal" />
2+
3+
<Styled @bind-Classname="@geostar">
4+
font-family: Geostar;
5+
</Styled>
6+
7+
<p class="@geostar">This is the Geostar font</p>
8+
9+
@code {
10+
private string geostar;
11+
}
+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<StyledGoogleFont Name="Roboto" Styles="normal,700" />
2+
3+
<Styled @bind-Classname="@roboto">
4+
font-family: Roboto;
5+
font-weight: 700;
6+
</Styled>
7+
8+
<p class="@roboto">This is the (bold) Roboto font</p>
9+
10+
@code {
11+
private string roboto;
12+
}

docs/_content/SampleCore/index1.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<Styled @bind-Classname="@hover">
2+
label: hover-example;
3+
padding: 32px;
4+
background-color: hotpink;
5+
font-size: 24px;
6+
border-radius: 4px;
7+
</Styled>
8+
9+
<Styled Classname="@hover" PseudoClass="PseudoClasses.Hover">
10+
color: @color;
11+
</Styled>
12+
13+
<div class="@hover">
14+
Hover to change color.
15+
</div>
16+
17+
@code {
18+
private string hover;
19+
private string color = "white";
20+
}
+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
public class Program
2+
{
3+
public static async Task Main(string[] args)
4+
{
5+
var builder = WebAssemblyHostBuilder.CreateDefault(args);
6+
7+
builder.Services.AddBlazorStyled();
8+
9+
builder.RootComponents.Add<App>("app");
10+
11+
builder.RootComponents.Add<ClientSideStyled>("#styled");
12+
13+
await builder.Build().RunAsync();
14+
}
15+
}
+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<title>Blazor Styled</title>
7+
<base href="/" />
8+
<style id="styled"></style>
9+
</head>
10+
<body>
11+
<app>Loading...</app>
12+
<script src="_framework/blazor.webassembly.js"></script>
13+
</body>
14+
</html>
+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@using System.Net.Http
2+
@using Microsoft.AspNetCore.Authorization
3+
@using Microsoft.AspNetCore.Components.Forms
4+
@using Microsoft.AspNetCore.Components.Layouts
5+
@using Microsoft.AspNetCore.Components.Routing
6+
@using Microsoft.JSInterop
7+
@using SampleCore
8+
@using SampleCore.Shared
9+
@using BlazorStyled
+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@inject IStyled Styled
+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
public class Startup
2+
{
3+
public void ConfigureServices(IServiceCollection services)
4+
{
5+
services.AddRazorPages();
6+
services.AddServerSideBlazor();
7+
services.AddBlazorStyled();
8+
}
9+
10+
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
11+
{
12+
if (env.IsDevelopment())
13+
{
14+
app.UseDeveloperExceptionPage();
15+
}
16+
else
17+
{
18+
app.UseExceptionHandler("/Home/Error");
19+
app.UseHsts();
20+
}
21+
22+
app.UseHttpsRedirection();
23+
app.UseStaticFiles();
24+
25+
app.UseRouting();
26+
27+
app.UseEndpoints(endpoints =>
28+
{
29+
endpoints.MapBlazorHub();
30+
endpoints.MapFallbackToPage("/_Host");
31+
});
32+
}
33+
}

0 commit comments

Comments
 (0)