Начало›Фреймворки

Фреймворки

Это обычный тег HTML, поэтому его рендерит любой фреймворк. Подключите определение один раз в точке входа приложения.

React

React 19 передаёт атрибуты и свойства кастомным элементам как есть.

import "@edinstvo/glass/define";

export function Card() {
  return <edinstvo-glass frost="0.4" jelly="0.8">Hello</edinstvo-glass>;
}

Vue

Скажите компилятору, что это не компонент Vue.

vue({ template: { compilerOptions: { isCustomElement: (tag) => tag.startsWith("edinstvo-") } } })

Svelte

Настраивать ничего не нужно, тег работает сразу.

Рендеринг на сервере

Импорт пакета на сервере безопасен, но определению нужен браузер. Загружайте @edinstvo/glass/define на клиенте. До этого тег будет пустым блоком с вашим CSS.

TypeScript

Типы идут вместе с пакетом: Material, Motion, GlassOptions и GlassSource.

Браузеры

Всё, где есть WebGL 2: свежие Chrome, Edge, Firefox и Safari, а также webview в Tauri и Electron. Без него элемент переходит на backdrop-filter.