Skip to content

Commit 83c65b7

Browse files
datvmdatvm
committed
v1.3.0
1 parent 1a4b001 commit 83c65b7

File tree

13 files changed

+476
-310
lines changed

13 files changed

+476
-310
lines changed

‎BlazorMaterialWeb.Bundled/wwwroot/webmaterial.esm.min.js‎

Lines changed: 272 additions & 244 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎BlazorMaterialWeb.Demo/BlazorMaterialWeb.Demo.csproj‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
22

33
<PropertyGroup>
4-
<TargetFramework>net7.0</TargetFramework>
4+
<TargetFramework>net8.0</TargetFramework>
55
<Nullable>enable</Nullable>
66
<ImplicitUsings>enable</ImplicitUsings>
77
</PropertyGroup>
88

99
<ItemGroup>
10-
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.10" />
11-
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.10" PrivateAssets="all" />
10+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.17" />
11+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.17" PrivateAssets="all" />
1212
</ItemGroup>
1313

1414
<ItemGroup>

‎BlazorMaterialWeb.Demo/Pages/Card.razor‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
@page "/card"
2+
@inject HttpClient Http;
3+
4+
<PageTitle>Card - Blazor Material Web</PageTitle>
5+
6+
<article>
7+
<h1>Cards</h1>
8+
9+
<MarkdownBlock>
10+
This is **NOT** an official component but since the project is now in maintenance mode,
11+
I decided to implement a crude version of it using a modified `MdElevation` container.
12+
13+
Note that the `MdCard` needs to render a container `.blazor-md-card-container` wrapping the actual `blazor-md-card`.
14+
You can use `ContainerClass` and `Class` parameters to add more classes to the elements.
15+
</MarkdownBlock>
16+
17+
<div class="row mb-3">
18+
@for (int i = 0; i < 4; i++)
19+
{
20+
<MdCard ContainerClass="col-3" Class="py-5" ElevationLevel="elevation">
21+
<div class="text-center vstack gap-3">
22+
<p>
23+
Elevation: @(elevation)
24+
</p>
25+
<p>
26+
<MdButton ButtonStyle="MdButtonStype.Outlined" @onclick="() => ChangeElevation(-1)">-</MdButton>
27+
<MdButton ButtonStyle="MdButtonStype.Outlined" @onclick="() => ChangeElevation(1)">+</MdButton>
28+
</p>
29+
</div>
30+
</MdCard>
31+
}
32+
</div>
33+
34+
<div class="row mb-3">
35+
@for (int i = 0; i < 2; i++)
36+
{
37+
<MdCard ContainerClass="col-6" Class="py-5" ElevationLevel="elevation">
38+
<div class="text-center vstack gap-3">
39+
<p>
40+
Elevation: @(elevation)
41+
</p>
42+
<p>
43+
<MdButton ButtonStyle="MdButtonStype.Outlined" @onclick="() => ChangeElevation(-1)">-</MdButton>
44+
<MdButton ButtonStyle="MdButtonStype.Outlined" @onclick="() => ChangeElevation(1)">+</MdButton>
45+
</p>
46+
</div>
47+
</MdCard>
48+
}
49+
</div>
50+
51+
<CodeBlock Code="@(demoCode)" />
52+
53+
</article>
54+
55+
@code {
56+
57+
int elevation = 3;
58+
string? demoCode;
59+
60+
void ChangeElevation(int delta)
61+
{
62+
elevation = Math.Clamp(elevation + delta, 0, 5);
63+
}
64+
65+
protected override async Task OnInitializedAsync()
66+
{
67+
demoCode = await Http.GetStringAsync("https://github.com/datvm/BlazorMaterialWeb/blob/master/BlazorMaterialWeb.Demo/Pages/Card.razor");
68+
}
69+
70+
}

‎BlazorMaterialWeb.Demo/Pages/Index.razor‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
</li>
6060
<li>
6161
<p>
62-
<em>Optional:</em> Add Roboto to your stylesheet, for example in your <code>app.css</code>:
62+
<em>Optional:</em> Add the default theme and Roboto to your stylesheet, for example in your <code>app.css</code>:
6363
</p>
6464

6565
<ul>
@@ -68,18 +68,10 @@
6868

6969
<div class="my-3">
7070
<pre><code>@@import "/_content/BlazorMaterialWeb.Bundled/roboto/css/roboto.css";
71+
/* Now with BlazorMaterialWeb.css, you no longer need to set Roboto font in your CSS /*
72+
@@import "/_content/BlazorMaterialWeb/BlazorMaterialWeb.css";
7173

72-
body {
73-
font-family: var(--md-ref-typeface-plain);
74-
/* ... */
75-
}
7674

77-
:root, :host {
78-
--md-ref-typeface-plain: Roboto,system-ui;
79-
/* ... */
80-
}
81-
82-
/* ... /*
8375
</code></pre>
8476
</div>
8577
</li>

‎BlazorMaterialWeb.Demo/Shared/MainLayout.razor‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@
1212

1313
<div class="ms-auto"></div>
1414

15-
16-
1715
<MdIconButton Target="_blank" Href="https://github.com/datvm/BlazorMaterialWeb/">
1816
<img src="/img/github.svg" />
1917
</MdIconButton>
@@ -25,13 +23,11 @@
2523
<PageNav />
2624
</nav>
2725
<main class="page-content-container p-3">
28-
<div class="page-content-elevation">
29-
<MdElevation ElevationLevel="3" />
30-
26+
<MdCard Class="page-content-card p-3">
3127
<div class="container-fluid page-content">
3228
@Body
3329
</div>
34-
</div>
30+
</MdCard>
3531
</main>
3632
</div>
3733

‎BlazorMaterialWeb.Demo/Shared/MainLayout.razor.css‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,13 +46,10 @@
4646
align-items: stretch;
4747
}
4848

49-
.page-content-container .page-content-elevation {
49+
.page-content-container .page-content-card {
5050
flex-grow: 1;
51-
position: relative;
52-
border-radius: var(--catalog-shape-m, .75rem);
5351
min-height: 0;
5452
height: 100%;
55-
background-color: var(--md-sys-color-surface);
5653
}
5754

5855
.page-content {

‎BlazorMaterialWeb.Demo/Shared/PageNav.razor‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
("Setup", "/"),
88
("Features", "/features"),
99
("-", "-"),
10+
("Cards", "/card"),
11+
("-", "-"),
1012
("Buttons", "/button"),
1113
("Checkbox", "/checkbox"),
1214
("Chips", "/chip"),

‎BlazorMaterialWeb.Demo/wwwroot/css/app.css‎

Lines changed: 2 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
@import "/_content/BlazorMaterialWeb.Bundled/roboto/css/roboto.css";
2+
@import "/_content/BlazorMaterialWeb/BlazorMaterialWeb.css";
3+
24

35
html, body {
46
width: 100%;
@@ -8,11 +10,8 @@ html, body {
810
}
911

1012
body {
11-
font-family: var(--md-ref-typeface-plain);
1213
display: flex;
1314
flex-direction: column;
14-
background-color: var(--md-sys-color-surface-container);
15-
color: var(--md-sys-color-on-surface);
1615
}
1716

1817
#app {
@@ -33,44 +32,6 @@ article p {
3332
}
3433

3534
:root, :host {
36-
--md-ref-typeface-plain: Roboto,system-ui;
37-
--md-sys-color-background: #fcf8ff;
38-
--md-sys-color-on-background: #1b1b24;
39-
--md-sys-color-surface: #fcf8ff;
40-
--md-sys-color-surface-dim: #dbd8e6;
41-
--md-sys-color-surface-bright: #fcf8ff;
42-
--md-sys-color-surface-container-lowest: #ffffff;
43-
--md-sys-color-surface-container-low: #f5f2ff;
44-
--md-sys-color-surface-container: #efecfa;
45-
--md-sys-color-surface-container-high: #e9e6f4;
46-
--md-sys-color-surface-container-highest: #e3e1ee;
47-
--md-sys-color-on-surface: #1b1b24;
48-
--md-sys-color-surface-variant: #e3e0f5;
49-
--md-sys-color-on-surface-variant: #454556;
50-
--md-sys-color-inverse-surface: #302f3a;
51-
--md-sys-color-inverse-on-surface: #f2effd;
52-
--md-sys-color-outline: #767587;
53-
--md-sys-color-outline-variant: #c6c4d8;
54-
--md-sys-color-shadow: #000000;
55-
--md-sys-color-scrim: #000000;
56-
--md-sys-color-surface-tint: #4243eb;
57-
--md-sys-color-primary: #221bd2;
58-
--md-sys-color-on-primary: #ffffff;
59-
--md-sys-color-primary-container: #4d4ff5;
60-
--md-sys-color-on-primary-container: #ffffff;
61-
--md-sys-color-inverse-primary: #c0c1ff;
62-
--md-sys-color-secondary: #5457a0;
63-
--md-sys-color-on-secondary: #ffffff;
64-
--md-sys-color-secondary-container: #b8b9ff;
65-
--md-sys-color-on-secondary-container: #262870;
66-
--md-sys-color-tertiary: #8d039c;
67-
--md-sys-color-on-tertiary: #ffffff;
68-
--md-sys-color-tertiary-container: #b93fc5;
69-
--md-sys-color-on-tertiary-container: #ffffff;
70-
--md-sys-color-error: #ba1a1a;
71-
--md-sys-color-on-error: #ffffff;
72-
--md-sys-color-error-container: #ffdad6;
73-
--md-sys-color-on-error-container: #410002;
7435
--catalog-display-xl-font-size: 88px;
7536
--catalog-display-m-font-size: 45px;
7637
--catalog-title-l-font-size: 22px;

‎BlazorMaterialWeb/MdCard.razor‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@inherits DefaultMdComponent
2+
3+
<div class="blazor-md-card-container @(ContainerClass)">
4+
<div class="blazor-md-card @(Class)" @attributes="AdditionalAttributes">
5+
<MdElevation ElevationLevel="ElevationLevel" />
6+
7+
@ChildContent
8+
</div>
9+
</div>

‎BlazorMaterialWeb/MdCard.razor.cs‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
namespace BlazorMaterialWeb;
2+
3+
partial class MdCard
4+
{
5+
6+
[Parameter]
7+
public int ElevationLevel { get; set; } = 3;
8+
9+
[Parameter]
10+
public string Class { get; set; } = "";
11+
12+
[Parameter]
13+
public string? ContainerClass { get; set; }
14+
15+
}

0 commit comments

Comments
 (0)