ENRU
Справочник

Покрытие фреймворков

Четыре библиотеки отдают одни и те же классы, поэтому всё, что есть в обеих, выглядит одинаково. Но набор того, что в них есть, — разный. Эта страница генерируется из того же реестра, что и страницы компонентов, так что приукрасить она не может.

Один и тот же интерфейс, четыре библиотеки

React, Vue и Svelte — настоящие островки, оживлённые своими пакетами, а не скриншоты. Ни один из них не задаёт тему: все наследуют data-theme от страницы, поэтому переключатели в шапке перекрашивают все колонки разом.

React

accentsuccesswarningdanger
tag

Vue

accentsuccesswarningdanger
tag

Svelte

accent success warning danger
tag

Angular

accentsuccesswarningdanger
tag
Angular-колонка статическая.

Astro не может поднять здесь Angular-островок: Angular 22 требует TypeScript 6, а интеграция Svelte — TypeScript 5, и вдобавок Vite-плагин @analogjs/astro-angular забирает себе все .ts-файлы проекта, ломая остальные три рендерера. Поэтому колонка собирается на этапе сборки из собственных хелперов классов Angular-пакета — того файла, который сам себя называет «контрактом визуального соответствия». Разметка настоящая; не хватает только интерактивности.

По компонентам

КомпонентReactVueSvelteAngular
Темизация
AuraProvider●●●●
Примитивы
Typography●●●●
Button●●●●
Card●●●●
Badge●●●●
IconButton●●●●
Chip●●●●
Switch●●●◐
Field●●●●
Scroll●●●●
Checkbox●●●●
RadioGroup●●●●
Radio●●●●
Textarea●●●●
Select●●●●
MultiSelect●●●●
Fieldset●●●●
Accordion●●●●
SegmentedControl●●●●
Alert●●●●
Avatar●●●●
AvatarGroup●●●●
Skeleton●●●●
Loader●●●●
Progress●●●●
Code▣▣▣▣
Blockquote▣▣▣▣
List●●●●
Mark▣▣▣▣
Anchor▣▣▣▣
Indicator●●●●
RingProgress●●●●
Toast●●●●
Tabs●●●●
Dialog●●●●
Popover●●●●
Menu●●●●
Tooltip●●●●
HabitHeatmap●●●●
DataTable●●●●
StepWizard●●●●
TimeGrid●●●●
Лэйаут
Stack●●●●
Flex●●●●
Group●●●●
Grid●●●●
Container●●●●
Masonry●●●●
Divider●●●◐
Spacer▣▣▣▣
Рецепты
StatBadge◇◇◇◇
CalloutList◇◇◇◇
ProgressCard◇◇◇◇
FormDialog◇◇◇◇
CommandPalette◇◇◇◇
  • ●совпадает с React
  • ◐есть, но с задокументированными расхождениями
  • ○не портирован
  • ▣класс, обёртка не нужна
  • ◇пример, ставить нечего

Чего карта не говорит

Зелёная строка означает тот же компонент, а не тот же код.

Четыре библиотеки по-прежнему называют вещи по-своему, и таблицы на страницах компонентов это показывают: то, что в React колбэк (onCheckedChange), в Vue — эмит (update:modelValue), в Svelte — проп-колбэк (onchange), а в Angular — выход (checkedChange). Гарантируются DOM и классы, а не имена пропсов.

Angular оставляет в DOM свои следы.

Примитивы там — директивы, поэтому селектор остаётся на элементе (<button auraButton class="aura-btn">), а те немногие компоненты, которым нужен собственный тег, его добавляют (<aura-field>, <aura-chip>). Такие хосты объявлены display: contents, поэтому боксов не создают и вёрстка совпадает — но дерево буквально не идентично остальным трём.