Публикации по теме 'web-components'


Как использовать маршрутизацию в веб-компонентах Angular
Angular Router - это очень мощный инструмент, который очень легко настроить в обычном Angular Project. Но как вы можете использовать его возможности в своем веб-компоненте Angular? Сначала представьте следующую структуру приложения: RootApplication ├── ComponentA ├── ComponentB ├── WebComponents ├── ElementA │ └── SettingsHome │ └── SettingsProfile └── ElementB └── ElementBComponent Наш index.html выглядит примерно так: <app-root..
Как использовать Angular ngModel и ngForms с WebComponents
Веб-компоненты - это действительно интересный инструмент, который может изменить наш подход к работе с веб-технологиями, поскольку они позволяют нам забыть о выбранном фреймворке и начать думать независимо от фреймворка. Но, помимо всех этих преимуществ, иногда довольно сложно интегрироваться с нашим любимым фреймворком, в данном случае с Angular. Нам потребуются некоторые изменения, чтобы структура правильно взаимодействовала с веб-компонентами. Сегодня мы поговорим о типах..
Многоразовые компоненты
В мире фронтенда уже давно ходят разговоры об идеальном будущем, где вокруг будут тонны готовых компонентов на любой случай и нам останется только слить их воедино и бум, есть готовый проект. И, кажется, мы почти у цели. Посмотрите, там куча компонентов, и таких, и таких, и для любых фреймворков. И все вокруг уже привыкли к компонентам. Звучит так: дайте еще пару лет, и мы будем в этом будущем. Да? Нет. Думаю, нет. Конечно компонентов будет больше, а существующие сделаем лучше, но нет...
Как создавать НАСТОЯЩИЕ веб-компоненты с помощью Angular 6
Трудный путь через неудачи к успеху Я решил написать эту статью, потому что потратил 2 недели, пытаясь собрать чистый, независимый и, возможно, автономный веб-компонент из проекта Angular 6, используя новый пакет @ angular / elements . Буду рад прочитать эту статью в самом начале. Если вы нашли эту историю, отчаянно ища руководство, как просто и безболезненно создать веб-компонент из приложения Angular 6, то вы попали в нужное место. Наверное. Для тех, кто не хочет читать всю..
Повысьте производительность рендеринга страницы с помощью веб-компонента видимости контента.
В августе 2020 года я наткнулся на Intersection Observer веб-API в случайном твите, затем проверил документ MDN API, я был так взволнован и хотел интегрировать его, чтобы улучшить производительность рендеринга нашей страницы. К счастью, уже существует версия React Hook для обозревателя пересечений, react-intersection-observer , поэтому на интеграцию у нас не ушло времени. С тех пор Intersection Observer - мой любимый веб-API 😍 всякий раз, когда мне нужно переключать / анимировать..
Элементы PatternFly | Как собрать демонстрационный компонент
PatternFly Elements - это новый захватывающий подход к созданию веб-компонентов для удовлетворения наших потребностей в интерфейсе в Red Hat и не только (ура, открытый исходный код!). С этой целью, когда я изучаю новую концепцию кодирования, мне нравится заставлять руки печатать как можно быстрее. Вот несколько ссылок на шаблоны кодирования, с которых вы можете начать прямо сейчас. Ниже я немного расскажу о различиях между тем, как пишутся шаблоны, и тем, как работает репо. Что они..
Истинная конфиденциальность компиляции / времени выполнения в веб-компонентах с TypeScript 2.7
Как мы знаем, стандартный шаблон для реализации свойств Custom Element выглядит следующим образом: внутреннее «частное» свойство класса, которое сохраняет текущее значение свойства получатель этой «частной» собственности для общественного использования установщик «частной» собственности для публичного использования Допустим, для нашей title опоры необходимо реализовать следующее class Toggleable extends HTMLElement { private _title = 'No title provided' set title(value:..