Как заставить демо vaadin-context-menu работать?

Здесь vaadin-context-menu страница документации.

На этой странице есть кнопка с надписью TRY IT OUT, которая ссылается на демонстрационную страницу здесь.

Моя проблема в том, что я не могу заставить демонстрационную страницу что-либо делать. Я не вижу ошибок в консоли.

Проблема в моем конце? Или с демо что-то не так? Если это последнее, как я могу исправить код, чтобы заставить демо работать?

Пожалуйста, покажите решение в рабочем jsBin или Codepen.

https://jsbin.com/yihupap/1/edit?html,output 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>vaadin-context-menu demo</title>
  <script src="https://cdn.vaadin.com/vaadin-core-elements/master/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-context-menu/vaadin-context-menu.html">

  <!-- import paper-menu and paper-item -->
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-listbox/paper-listbox.html">
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-item/paper-item.html">
</head>
<body>

<vaadin-context-menu>
  <template>
    <paper-listbox>
      <paper-item>First menu item</paper-item>
      <paper-item>Second menu item</paper-item>
    </paper-listbox>
  </template>

  <p>This paragraph has the context menu provided in the above template.</p>
  <p>Another paragraph with the context menu.</p>
</vaadin-context-menu>
</body>
</html>
Источник

2 ответа

Решение

Проблема на самом деле с JSBin и Safari. Я не могу даже получить чертову страницу для загрузки в Safari (Версия 10.1.1 12603.2.4).

Но главная демо-страница работает в сафари, Chrome и т. Д.: http://vaadin.com/elements/-/element/vaadin-context-menu

Используйте это вместо этого.

Как и было запрошено, здесь есть рабочий кодекс, использующий тот же пример в вашем вопросе: https://codepen.io/anon/pen/MozOxG

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>vaadin-context-menu demo</title>
  <script src="https://cdn.vaadin.com/vaadin-core-elements/master/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-context-menu/vaadin-context-menu.html">

  <!-- import paper-menu and paper-item -->
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-listbox/paper-listbox.html">
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/paper-item/paper-item.html">
</head>
<body>

<vaadin-context-menu>
  <template>
    <paper-listbox>
      <paper-item>First menu item</paper-item>
      <paper-item>Second menu item</paper-item>
    </paper-listbox>
  </template>

  <p>This paragraph has the context menu provided in the above template.</p>
  <p>Another paragraph with the context menu.</p>
</vaadin-context-menu>
</body>
</html>
Источник

Редактировать: @petey указывает в комментарии, что этот ответ применяется только при попытке запустить vaadin-context-menu от jsBin. Таким образом, проблема может быть между JSBin и Safari, а не Vaadin и Safari.

Этот ответ относится только к JSBin.

Работает в Chrome. Но не на сафари. (Запуск macOS Sierra v.10.12.5.)

vaadin-context-menu
Browser  Support
-------  -------
Chrome     ✅
Safari     ❌

Safari, видимо, не поддерживает vaadin-context-menu в это время. Ниже приведены записи экрана с использованием Safari, а затем Chrome.

(Примечание. В приведенных ниже записях: зеленые кружки обозначают щелчок правой кнопкой мыши. Черные кружки обозначают щелчок левой кнопкой мыши.)

Сафари ❌

v10.1.1 (12603.2.4):

введите описание изображения здесь

Хром ✅

v59.0.3071.115 (Официальная сборка) (64-битная версия):

введите описание изображения здесь

Источник
Другие вопросы по тегам