Material Design Lite navigation inside page

Question

I am using Material Design Lite to make a single page app. I have a page with two buttons, each one should "navigate" to another div, like what we do in Jquery Mobile when navigating in pages, when I write many divs as pages inside one html file.

There is no example in MDL website, but the source code shows using sections with class mdl-components__page, like this:

<section id="first-section" class="mdl-components__page">
  Part 1
</section>

<section id="second-section" class="mdl-components__page>
  Part 2
</section>

and the links should point as

<a href="#first-section" class="mdl-components__link mdl-component tooltips">
  Link 1
</a>

<a href="#second-section" class="mdl-components__link mdl-component tooltips">
  Link 2
</a>

But when I use that all the sections are shown at the same time. Any Idea in what I am doing wrong? Anyone known how to solve that?

Edited:

This is the pice of code I am writing:

<main class="docs-layout-content mdl-layout__content">
<!-- First Page (default)-->
            <section id="index-section" class="mdl-components-index mdl-components__page">

                <div class="painel-tracejado mission centralizado bloco-margem">
                    {{idioma.sejaBemVindo}}
                </div>

                <div class="painel-tracejado">
                    {{idioma.mensagemBemVindo}}
                </div>

                <div class="bloco-margem">
                    <br/>
                    <button href="#criarConta"
                            for="criarConta"
                            class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored largo">
                            {{idioma.criarConta}}
                    </button>
                    <br/>
                    <button
                            href="#login"
                            for="login"
                            class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored largo">
                        {{idioma.jaSouCadastrado}}
                    </button>
                </div>
            </section>
<!--Second page -->
            <section id="criarConta-section" class="mdl-components__page">
                <div class="bloco-margem painel-tracejado mission">
                    {{idioma.crieConta}}
                </div>

                <div class="bloco-margem painel-tracejado">

                    <input type="text" name="nome" ng-model="usuario.atual.visibleByAnonymousUsers.nome" placeholder="{{idioma.nome}}" required="">

                    <input type="text" name="sobreNome" ng-model="usuario.atual.visibleByFriends.sobreNome" placeholder="{{idioma.sobreNome}}" required="">

                    <input type="text" name="cidade" ng-model="usuario.atual.visibleByRegisteredUsers.cidade" placeholder="{{idioma.cidade}}" required="">

                    <input type="text" name="estado" ng-model="usuario.atual.visibleByRegisteredUsers.estado" placeholder="{{idioma.estado}}" required="">

                    <input type="text" name="pais" ng-model="usuario.atual.visibleByRegisteredUsers.pais" placeholder="{{idioma.pais}}" required="">

                    <input type="email" ng-model="usuario.atual.visiblebyTheUser.email" name="email" placeholder="{{idioma.email}}*" required="">

                    <input type="password" name="senha" ng-model="usuario.atual.password" placeholder="{{idioma.senha}}*" required="">

                    <input type="password" name="senha2" ng-model="usuario.atual.password2" placeholder="{{idioma.confirmeSenha}}*" required="">
                </div>

                <div class="bloco-margem">
                    <a class="ui-btn" ng-click="usuario.cadastrar()">{{idioma.criarContaEEntrar}}</a>
                </div>
            </section>
<!-- Third Page -->
            <section id="login-section" class="mdl-components__page">
                <div class="bloco-margem painel-tracejado mission">
                    {{idioma.informeSeusDadosDeAcesso}}
                </div>

                <form method="post" action="">
                    <div class="bloco-margem painel-tracejado">
                        <label for="email">{{idioma.email}}</label>
                        <input type="email" ng-model="usuario.atual.username" id="email" name="email" required="">
                        <label for="senha">{{idioma.senha}}</label>
                        <input type="password" ng-model="usuario.atual.password" name="senha" id="senha">
                    </div>

                    <div class="bloco-margem">
                        <a class="ui-btn" ng-click="usuario.login()">{{idioma.entrar}}</a>
                        <a class="ui-btn" ng-click="usuario.recuperarSenha()">{{idioma.esqueceuSuaSenha}}</a>
                    </div>
                </form>
            </section>

        </main>

In the image you may see the problem: pages (sections) are been showed at once.

Did you try 'for' ? <a href="#second-section" for="second-section" — hurricane
I've tried jsut now. But unfortunatelly nothing happened. I think that was not clear: the problem is not click and go to the new page, the problem is that all the sections are showed once. — André Claudino
@hurricane, I edited the answer to be more detailed about the problem. — André Claudino

Garbee Garbee · Accepted Answer · 2015-11-24T22:42:01

The MDL website has custom components to make it function. You are attempting to take something from our markup and assuming it will "just work". You would need to look into the custom JS and pull out the component for your own site to make it work, plus the extra styling from the CSS.

Instead, if you want something like this write your own component. That way it will do exactly what you need and how you want it.

Material Design Lite navigation inside page

2 Answers