search

davidherney / tepuy

Template for interactive content editing
GNU General Public License v3.0
1 stars 8 forks source link

Adjuntar imagen tipo viñeta a opciones menú #8

Closed ccruzh closed 5 years ago

ccruzh commented 5 years ago

Una pregunta, es posible adicionar una imagen a cada opción del menú, como una viñeta? algo así: menuemergente

davidherney commented 5 years ago

Hola @ccruzh ...

Sí, es posible, puede ser directamente en el contenido, en el atributo donde se adicionan las opciones de los menú, finalmente eso se maneja como HTML, incluso se puede hacer uso de la iconografía que se adjunta como fuente. Mira un ejemplo: <menuitem label="<i class=&quot;ion-beer&quot;></i> Invitar a una cerveza" data-page="pag-deseos"></menuitem>

Otra posibilidad es hacerlo mediante CSS, apuntando directamente a los ítems de menú que se desee decorar. Algo como lo siguiente podría funcionar: nav.horizontal ul.submenu > li::before { content: "☉"; position: absolute; left: 0px; font-size: 20px; }

E incluso se puede personalizar por cada elemento del menú.

Espero te sirva y nos compartas el resultado.

Saludos

ccruzh commented 5 years ago

Este es el resultado con algunas imágenes de prueba :)

Asi lo codifiqué:

<menuitem label="<img src='icons/groupme.png' width='24' height='24' align='middle'/> Mapa de Navegación" data-page="pag-mapa"></menuitem>

p

davidherney commented 5 years ago

@ccruzh ... Si quieres poner contenido como imágenes o html más complejo, también puedes optar por la opción de los items como contenido html. Para el ejemplo que enviaste también funcionaría algo como:

<menuitem data-page="pag-mapa"><span><img src='icons/groupme.png' width="24" height="24" align="middle"/> Mapa de Navegación</span></menuitem>

con la ventaja de que no toca esconder las comillas ya que no queda en el texto de un atributo.

El html puede ser complejo desde que esté contenido dentro de una sola etiqueta y no agregues el atributo label al menuitem.

Saludos