Here is the vaadin-context-menu documentation page. Sur cette page, il y a un bouton étiqueté TRY IT OUTthat links to a demo page here.Comment faire fonctionner la démo du menu contextuel vaadin?

Mon problème est que je ne peux pas obtenir la page de démonstration pour faire quoi que ce soit. Je ne vois aucune erreur dans la console.

Est-ce que le problème est de mon côté? Ou y a-t-il quelque chose qui ne va pas avec la démo? Si c'est le dernier, comment puis-je corriger le code pour que la démo fonctionne?

Veuillez montrer la solution dans un jsBin ou Codepen en cours de fonctionnement.

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>

Source

2017-07-07 Mowzer

En utilisant ces liens jsbin, je reçois un menu contextuel semi-transparent quand un clic droit sur les paragraphes Chrome 59.0.3071.115, donc je soupçonne quelque chose de votre côté. – Morfic

Fonctionne pour moi aussi. Avez-vous fait un clic droit sur le premier paragraphe. – petey

les exemples de travail sont ici: https://vaadin.com/elements/-/element/vaadin-context-menu#demos – petey

Le problème est en fait avec JSBin et Safari. Je ne peux même pas obtenir la page darn à charger dans Safari (Version 10.1.1 12603.2.4).

Mais la principale page de démonstration fonctionne dans Safari, Chrome, etc: http://vaadin.com/elements/-/element/vaadin-context-menu#demos

utiliser à la place.

Comme demandé ici est un groupe de travail codepen en utilisant le même exemple dans votre question: 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>

Source

2017-07-10 18:00:19 petey

Edit: @petey souligne dans un commentaire que cette réponse ne s'applique que lorsque vous essayez d'exécuter vaadin-context-menu de jsBin. Donc, le problème pourrait être entre jsBin et Safari et non Vaadin et Safari.

Cette réponse ne s'applique qu'à JSBin.

Cela fonctionne dans Chrome. Mais pas sur Safari. (Running macOS Sierra v.10.12.5.)

vaadin-context-menu

Browser Support 
------- ------- 
Chrome  ✅ 
Safari  ❌

Safari ne semble supporte pas vaadin-context-menu à ce moment. Ci-dessous sont des enregistrements d'écran en utilisant Safari puis Chrome.

(Remarque: Dans les enregistrements ci-dessous. Les cercles verts indiquent un clic droit Les cercles noirs indiquent un clic gauche.)

Safari ❌

v10.1.1 (12603.2.4):

Chrome ✅

v59.0.3071.115 (Const officiel) (64 bits):

Source

2017-07-08 04:06:06 Mowzer

Ce n'est pas précis! la page de démonstration principale fonctionne dans Safari (Version 10.1.1 12603.2.4) très bien: https://vaadin.com/elements/-/element/vaadin-context-menu#demos Quelque chose doit être goofy avec JSBin & safari mais pas Vaadin & Safari. – petey

@petey: Je peux confirmer: [J'ai fait fonctionner correctement les démos dans Safari] (http://vaadin.com/elements/-/element/vaadin-context-menu#demos). Je suis d'accord, le problème est probablement quelque chose entre jsBin et Safari. J'ai édité ma réponse en conséquence. Mes excuses à tous les ingénieurs Vaadin. Vous faites du bon travail. – Mowzer

Comment faire fonctionner la démo du menu contextuel vaadin?

Répondre

Cette réponse ne s'applique qu'à JSBin.

Safari ❌

Chrome ✅

Questions connexes