Я пишу приложение в Blazor do tnet core 3.1 и хочу настроить текст по умолчанию при перезагрузке / потерянное соединение с сервером на локализованный текст с анимированным svg, чтобы пользователь знал, что он переподключается.
Проблема в том, что моя текущая версия не скрывает текст, не знает, как и где сделать так, чтобы он был видимым / невидимым.
Использовал следующие ссылки:
https://docs.microsoft.com/de-de/aspnet/core/blazor/hosting-models?view=aspnetcore-3.1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="components-reconnect-modal" class="my-reconnect-modal components-reconnect-hide">
<div class="show">
<p>
This is the message when attempting to connect to server
</p>
</div>
<div class="failed">
<p>
This is the custom message when failing
</p>
</div>
<div class="refused">
<p>
This is the custom message when refused
</p>
</div>
</div>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Мой стиль:
.components-reconnect-hide > div
{
display: none;
}
.components-reconnect-show > div
{
display: none;
}
.components-reconnect-show > .show
{
display: block;
}
.components-reconnect-failed > div
{
display: none;
}
.components-reconnect-failed > .failed
{
display: block;
}
.components-reconnect-refused >div
{
display: none;
}
.components-reconnect-refused > .refused
{
display: block;
}
Есть идеи, как сделать sh правильно?
Спасибо!