JoinRpg.Common.WebComponents 2026.9.680

JoinRpg.Common.WebComponents

Blazor-компоненты joinrpg.ru: кнопки, поля ввода, диалоги, панели, таблицы, подсказки, иконки, ссылки на пользователей. Все компоненты с примерами — в каталоге components.joinrpg.ru.

dotnet add package JoinRpg.Common.WebComponents

Нужен net10.0, JoinRpg.Common.PrimitiveTypes придёт зависимостью. Сайт — только в корне домена: иконки и скрипты диалогов грузятся по /_content/....

Подключение

1. Пространство имён: в Blazor — @using JoinRpg.Common.WebComponents в _Imports.razor; в Razor Pages — в _ViewImports.cshtml, а компонент рендерится через <component type="typeof(JoinIcon)" render-mode="Static" ... />.

2. Статический CSS пакета — в layout, одной ссылкой (scoped-бандл подключается отдельно, как обычно). Включает общую палитру вариаций (--join-variation-*, без неё JoinBadge, JoinButton, JoinCollapsePanel, JoinDropdownButton, JoinPanel теряют фон) и иконки:

   <link rel="stylesheet" href="_content/JoinRpg.Common.WebComponents/css/join-components.css" />
   

   css/roboto.css — для PrintableBadge (бейджи печатаются Roboto) или если сайту нужен этот шрифт. css/variations.css и css/join-icons.css остаются отдельными файлами, если нужен только один из них.

3. Скрипт (подсказки Tooltip, меню JoinDropdownButton и его обёртки JoinDotsMenu, TypedDropdownButton, TypedSelector, раскрытие JoinCollapsePanel). Blazor загружает его сам при старте интерактивного рантайма; на странице из одних статических компонентов добавьте тег. Адрес — тот же, что у Blazor: с MapStaticAssets ~/ в .cshtml и @Assets[...] в App.razor, иначе на странице с островом модуль выполнится дважды.

   <script src="~/_content/JoinRpg.Common.WebComponents/JoinRpg.Common.WebComponents.lib.module.js" type="module"></script>
   

4. JoinAdminAuthorizeView — обёртка над AuthorizeView: нужны AddCascadingAuthenticationState(), а в WebAssembly ещё AddAuthorizationCore() и AuthenticationStateProvider.

Стили

Bootstrap 3 пакет не приносит. На его CSS рассчитаны JoinPanelWithList, таблицы, FormRow и поля ввода (list-group, table, form-group, col-md-*, form-control, help-block, control-label). Без Bootstrap (и его JS) обходятся JoinPanel, JoinButton, JoinBadge, JoinCollapsePanel, JoinAlert (и рендерящие его JoinLoadingMessage и JoinErrorMessage), JoinInputNumber, JoinTextInput, Tooltip, TypedSelector, JoinDropdownButton и его обёртки JoinDotsMenu и TypedDropdownButton, JoinDialog.

Что зарегистрировать у себя

• IUriLocator<UserLinkViewModel> (IUriLocator<T> — из PrimitiveTypes) — ссылка на профиль пользователя. Обязателен для UserLink и JoinUserLinkEditor: они получают его через @inject.
• IUserLinkResolveClient — превращает введённую строку (ссылку на профиль, id, vk, telegram, email) в пользователя для JoinUserLinkEditor; не нашли — киньте исключение с текстом для пользователя. Необязателен: без него редактор работает как обычное текстовое поле.
• IMoveClient — сохраняет новый порядок элементов. Обязателен, если на странице есть JoinMoveControl: компонент получает его через @inject.
• AddJoinRpgWebComponents() регистрирует SelectorListCache — нужен своим обёрткам над TypedSelector, которые его берут: без кэша N одинаковых селекторов делают N запросов. Компонентам пакета он не нужен.