0

Olá!

Eu criei o meu projeto utilizando o template blank do ionic1, porem surgiu a necessidade de adicionar um sidemenu no meu projeto. Não consegui de forma alguma adicionar esse menu e gostaria de saber se alguém já fez isso e se poderia compartilhar conosco como foi feito. Como já tenho boa parte dele pronto fica bastante chato ter que criar um novo projeto com sidemenu e ir migrando. Agradeço a ajuda de todos.

1 Resposta 1

1

Cara, ja fiz um app com side menu e é bem simples.

Da uma olhada na documentação sobre ele nesse link

Você só precisa usar as diretivas do próprio Ionic, de uma olhada.

Nesse exemplo abaixo eu peguei de um projeto meu, basicamente você tem:

  • Container de menus do Ionic: ion-side-menus
  • Conteúdo do container: ion-side-menu-content
  • Barra de navegação, a barra superior do app: ion-nav-bar
    • Botão voltar "nativo", responde ao histórico de navegação: ion-nav-back-button
    • Um container de botões a serem inseridos na barra superior: ion-nav-buttons
  • Componente de navegação das views do app que eu quero que apareçam dentro do container do menu
  • Ai fora do container de conteúdo, vem os menus e seus conteúdos: ion-side-menu

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-dark">
            <ion-nav-back-button></ion-nav-back-button>

            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
            </ion-nav-buttons>
        </ion-nav-bar>

        <ion-nav-view name="appView"></ion-nav-view> // nav view para trocar as telas mantendo o contexto do menu
    </ion-side-menu-content>

    <ion-side-menu side="left">
        <ion-content>
            <ion-list>
                <ion-item menu-close ui-sref="page2">
                    Página 1
                </ion-item>
                <ion-item menu-close ui-sref="page2">
                    Página 2
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .