Chaque popover doit avoir un en-tête et une partie du corps. L'en-tête est utilisé pour donner un titre à la popover. Tout comme la barre supérieure de l'application, cet en-tête devrait également avoir les cours: .bar et .bar-nav. Ensuite, nous utiliserons le composant Table-View de Ratchet pour répertorier l'ensemble des réseaux de partage. Voici la plus grande question! Où dois-je placer le balisage de ce popover? <\/p>\n

Comme indiqué ci-dessus, puisque l'article.html sera récupéré en utilisant push.js uniquement le contenu présent à l'intérieur de la barre supérieure et. Content div sera tiré. Par conséquent, le balisage de popover ci-dessus doit être placé juste au-dessus de .Content div. <\/p>\n\n

Les popovers sont l'un des composants cachés de Ratchet. Cela signifie qu'ils ne seront visibles que lorsqu'ils sont déclenchés. Par conséquent, nous avons besoin d'un gestionnaire qui déclenchera la popover. <\/p>\n

Placez une ic?ne de partage à c?té du titre de l'article dans le composant de l'article.html. Cette ic?ne sera notre gestionnaire pour déclencher le popover de partage. Le balisage de la barre supérieure de l'article.html devrait maintenant être: <\/en-t><\/p>\n

\n<\/pre>\n
 L'attribut HREF du gestionnaire doit contenir l'ID du popover cible. Ici, la valeur est #popover. L'ic?ne de partage est un Ratchicon qui est affiché à l'aide de l'ic?ne de classes et de la part d'ic?ne. Allons-y et vérifions que cela fonctionne dans notre application. Il devrait ressembler ci-dessous. <\/p>\n\n
 Incroyable! N'est-ce pas? Nous n'avons pas eu à écrire une seule ligne de CSS et JS pour ce popover. Félicitations à l'équipe de cliquet. <\/p>\n
 Il est temps de créer un écran de paramètres. Cet écran sera un modal à cliquet. Tout comme les popovers, les modaux sont également invisibles par défaut. Ils doivent être déclenchés pour les rendre visibles. Créons une barre inférieure flottante dans l'écran Article.html. Nous y placerons une ic?ne de paramètres qui sera le gestionnaire pour déclencher l'écran modal. <\/p>\n
 Pour créer une barre flottante, ajoutez le balisage suivant juste en dessous du balisage des popovers. <\/p>\n
\n\n  \n    \n