Editor X: добавление пользовательского элемента на сайт
4 мин. чтения
Editor X переходит на Wix Studio, нашу новую платформу для агентств и фрилансеров.Подробнее о Wix Studio
Улучшите свой сайт с помощью собственных элементов дизайна и возможностей CSS. Вы можете добавить любой компонент Javascript, связав пользовательский элемент с URL-адресом сервера или файлом Velo. При необходимости вы можете установить больше атрибутов прямо из Editor X.
Содержание:
Прежде чем начать:
Убедитесь, что у вашего сайта есть премиум-план и подключен домен без рекламы Editor X. Подробнее
Что такое пользовательские элементы?
Пользовательские элементы позволяют использовать собственные теги HTML на сайте Editor X. Эти элементы работают во всех поддерживаемых браузерах и могут использоваться с любой библиотекой JavaScript ES6 или фреймворком, который работает с HTML 5.
Примеры полезных пользовательских элементов
Требования к коду
Советы:
- Вы можете использовать пользовательские элементы из сторонних источников, просто убедитесь, что поменяли Название тега в Свойствах при добавлении пользовательского элемента на страницу.
- Производительность вашего пользовательского элемента зависит от его реализации.
Добавление и настройка пользовательского элемента
Добавьте на сайт столько пользовательских элементов, сколько вам нужно. После перетаскивания пользовательского элемента на страницу укажите его источник (URL-адрес сервера или файл Velo) и дайте ему имя тега, которое будет отображаться в реестре страниц.
Как это сделать?
в верхней части Editor X.Используйте панель инспектора 
, чтобы пользовательский элемент отлично смотрелся на всех размерах экрана - вы можете настроить его размер, закрепление, выравнивание и многое другое.
, чтобы пользовательский элемент отлично смотрелся на всех размерах экрана - вы можете настроить его размер, закрепление, выравнивание и многое другое.Примечание:
По умолчанию пользовательские элементы отображаются в реестре customElements вашей страницы. Название тега, которое вы вводите для своего пользовательского элемента, определяет его название в этом реестре.
Настройка атрибутов пользовательского элемента
Внесите дополнительные изменения в свойства и поведение элемента, установив атрибуты HTML. Панель Атрибуты элемента позволяет добавлять, редактировать и удалять атрибуты непосредственно из Editor X, поэтому вам не нужно обращаться к фактическому коду.
Как это сделать?
Важно:
Код для вашего пользовательского элемента должен подтверждать и обрабатывать определенные атрибуты. В противном случае они не будут работать должным образом.
Пример пользовательского элемента
Ниже приведен пример добавления базового пользовательского элемента на сайт. Инструкции объясняют, как добавить текст «Hello World» на сайт.
Сначала вам нужно создать элемент и код для него, а затем определить его поведение в файле JavaScript.
Как это сделать?
Затем определите класс пользовательского элемента.
В этом примере мы определили его как HelloWorld, и мы будем использовать то же имя при регистрации пользовательского элемента. Функция connectedCallback () - это функция обратного вызова жизненного цикла, которая запускается автоматически, когда элемент прикреплен к DOM.
1class HelloWorld extends HTMLElement { connectedCallback() { this.innerHTML = 'Hello World!'; } } customElements.define('hello-world', HelloWorld);После определения класса пользовательского элемента мы регистрируем его с помощью
customElements.define(name, class).При добавлении пользовательского элемента на сайт введите зарегистрированное имя в качестве имени тега. После регистрации пользовательский элемент можно использовать на сайте.
1CustomElementRegistry.define('hello-world', HelloWorld);Нужна дополнительная информация?
Нажмите здесь, чтобы узнать, как использовать этот элемент с Velo by Wix.
Была ли статья полезна?
|