Xeretis
Xeretis
Explore posts from servers
CC#
Created by Xeretis on 6/5/2024 in #help
Blazor reactive state
Hi, I’m pretty new to blazor and I made a component which I expect to reactively update state. It’s called PinInput and it looks like this:
<div class="max-w-sm p-6 bg-white border flex items-center flex-col border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
<p id="helper-text-explanation" class="…">@Label</p>
<div class="…">
@for (var i = 0; i < Code.Length; i++)
{
<div>
<label for="@($"code-{i + 1}")" class="sr-only">Code @(i + 1)</label>
<input @bind="@Code[i]" type="text" maxlength="1" data-focus-input-init data-focus-input-prev="@($"code-{i}")" data-focus-input-next="@($"code-{i + 2}")" id="@($"code-{i + 1}")" class="…" required/>
</div>
}
</div>
</div>

<script>

</script>

@code
{
[Parameter] public string Label { get; set; }

[Parameter] public char?[] Code { get; set; }

[Parameter] public EventCallback<char?[]> CodeChanged { get; set; }

private async Task HandleCodeChanged()
{
await CodeChanged.InvokeAsync(Code);
}
}
<div class="max-w-sm p-6 bg-white border flex items-center flex-col border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
<p id="helper-text-explanation" class="…">@Label</p>
<div class="…">
@for (var i = 0; i < Code.Length; i++)
{
<div>
<label for="@($"code-{i + 1}")" class="sr-only">Code @(i + 1)</label>
<input @bind="@Code[i]" type="text" maxlength="1" data-focus-input-init data-focus-input-prev="@($"code-{i}")" data-focus-input-next="@($"code-{i + 2}")" id="@($"code-{i + 1}")" class="…" required/>
</div>
}
</div>
</div>

<script>

</script>

@code
{
[Parameter] public string Label { get; set; }

[Parameter] public char?[] Code { get; set; }

[Parameter] public EventCallback<char?[]> CodeChanged { get; set; }

private async Task HandleCodeChanged()
{
await CodeChanged.InvokeAsync(Code);
}
}
I’m using this component the following way:
<div class="h-screen flex justify-center items-center flex-col">
<h1 class="text-4xl font-extrabold dark:text-white mb-4">Kocka póker</h1>
<PinInput Label="A játék kódja:" @bind-Code="@Code"/>
<div class="mt-2">
<button type="…">Belépés</button>
<button type="…">Új játék</button>
</div>
@{ new string(Code.Where(c => c.HasValue).Select(c => c.Value).ToArray()); }
</div>

@code
{
public char?[] Code { get; set; } = new char?[6];
}
<div class="h-screen flex justify-center items-center flex-col">
<h1 class="text-4xl font-extrabold dark:text-white mb-4">Kocka póker</h1>
<PinInput Label="A játék kódja:" @bind-Code="@Code"/>
<div class="mt-2">
<button type="…">Belépés</button>
<button type="…">Új játék</button>
</div>
@{ new string(Code.Where(c => c.HasValue).Select(c => c.Value).ToArray()); }
</div>

@code
{
public char?[] Code { get; set; } = new char?[6];
}
The problem is that I don’t see the state updating and I even get an index out of bounds error at an unspecified place in the component. Can anyone point me in the right direction where I went wrong? Thanks for the help in advance!
5 replies
FFilament
Created by Xeretis on 10/30/2023 in #❓┊help
Disabling the navigation menu entirely
Hi! I was wondering if it’s possible to completely disable the while navigation menu on a custom page…? (Only on that page) So for example when using the sidebar navigation, the page would take up the full width of the screen, because I tried to conditionally hide all items, but the sidebar still takes up space and the content is shifted to the right. I already tried searching for this in the docs and here in the discord message history but couldn’t find anything. Thanks for the help in advance!
4 replies