Skip to content

Commit 0a027d6

Browse files
committed
Add child to parent event sample
1 parent f4c0bac commit 0a027d6

File tree

14 files changed

+153
-1
lines changed

14 files changed

+153
-1
lines changed

projects/hydro/README.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,8 @@
22

33
* [Hello World](hello-world)
44

5-
This sample introduces the usage of a Hydro component.
5+
This sample introduces the usage of a Hydro component.
6+
7+
* [Child to Parent Event](event-child-parent)
8+
9+
This sample introduces the usage of dispatching event from child to parent component.
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"workbench.colorCustomizations": {
3+
"activityBar.activeBackground": "#9a3acf",
4+
"activityBar.background": "#9a3acf",
5+
"activityBar.foreground": "#e7e7e7",
6+
"activityBar.inactiveForeground": "#e7e7e799",
7+
"activityBarBadge.background": "#4d3813",
8+
"activityBarBadge.foreground": "#e7e7e7",
9+
"commandCenter.border": "#e7e7e799",
10+
"sash.hoverBorder": "#9a3acf",
11+
"statusBar.background": "#7e2aac",
12+
"statusBar.debuggingBackground": "#58ac2a",
13+
"statusBar.debuggingForeground": "#15202b",
14+
"statusBar.foreground": "#e7e7e7",
15+
"statusBarItem.hoverBackground": "#9a3acf",
16+
"statusBarItem.remoteBackground": "#7e2aac",
17+
"statusBarItem.remoteForeground": "#e7e7e7",
18+
"titleBar.activeBackground": "#7e2aac",
19+
"titleBar.activeForeground": "#e7e7e7",
20+
"titleBar.inactiveBackground": "#7e2aac99",
21+
"titleBar.inactiveForeground": "#e7e7e799"
22+
},
23+
"peacock.color": "#7e2aac"
24+
}
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@model Events.Pages.Components.Message
2+
3+
<div>
4+
<h1>@Model.Text</h1>
5+
<message-button/>
6+
</div>
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
using Hydro;
2+
3+
namespace Events.Pages.Components;
4+
public class Message : HydroComponent
5+
{
6+
public string Text { get; set; }
7+
8+
public Message()
9+
{
10+
Subscribe<MessageChangedEvent>(e => Text = e.Message);
11+
}
12+
}
13+
14+
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@model Events.Pages.Components.MessageButton
2+
3+
<div>
4+
<button on:click="@(() => Model.Show("This greeting comes from MessageButton component"))">Show</button>
5+
</div>
6+
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
using Hydro;
2+
3+
namespace Events.Pages.Components;
4+
5+
public class MessageButton : HydroComponent
6+
{
7+
public void Show(string text)
8+
{
9+
Dispatch(new MessageChangedEvent(text));
10+
}
11+
}
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
namespace Events.Pages.Components;
2+
3+
public record MessageChangedEvent(string Message);
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@page "/"
2+
@using Hydro
3+
@{
4+
Layout = "/Pages/Shared/_Layout.cshtml";
5+
}
6+
7+
<message></message>
8+
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<html>
2+
<head>
3+
<meta name="hydro-config" />
4+
<script defer src="~/hydro/hydro.js" asp-append-version="true"></script>
5+
<script defer src="~/hydro/alpine.js" asp-append-version="true"></script>
6+
</head>
7+
<body>
8+
@RenderBody()
9+
10+
<script src="/_framework/aspnetcore-browser-refresh.js"></script>
11+
</body>
12+
</html>
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@addTagHelper *, Hydro
2+
@addTagHelper *, Events
3+
@using Events.Pages.Components

0 commit comments

Comments
 (0)