O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Aba

Como usar

Chamada via atributos personalizados (se o componente for gerado dinamicamente, é necessário chamar mdui.mutation() para inicialização)
Chamar via JavaScript

Leitura relacionada

Diretrizes de design do Material Design: Componentes - Abas

Estilo

Estilo básico

Abaixo está uma aba padrão. Em celulares, ocupará 100% da largura, com cada opção tendo larguras iguais; em tablets/PCs, será alinhada à esquerda.

Exemplo


        <div class="mdui-tab" mdui-tab>
          <a href="#example1-tab1" class="mdui-ripple">web</a>
          <a href="#example1-tab2" class="mdui-ripple">shopping</a>
          <a href="#example1-tab3" class="mdui-ripple">images</a>
        </div>
        <div id="example1-tab1" class="mdui-p-a-2">web content</div>
        <div id="example1-tab2" class="mdui-p-a-2">shopping content</div>
        <div id="example1-tab3" class="mdui-p-a-2">images content</div>

Rolável

Adicione a classe .mdui-tab-scrollable em <div class="mdui-tab"> para permitir a rolagem horizontal das abas, comum em dispositivos móveis com muitas opções.

Exemplo


        <div class="mdui-tab mdui-tab-scrollable" mdui-tab>
          <a href="#example2-tab1" class="mdui-ripple">web</a>
          <a href="#example2-tab2" class="mdui-ripple">shopping</a>
          <a href="#example2-tab3" class="mdui-ripple">videos</a>
          <a href="#example2-tab4" class="mdui-ripple">images</a>
          <a href="#example2-tab5" class="mdui-ripple">news</a>
          <a href="#example2-tab6" class="mdui-ripple">maps</a>
          <a href="#example2-tab7" class="mdui-ripple">books</a>
          <a href="#example2-tab8" class="mdui-ripple">flights</a>
          <a href="#example2-tab9" class="mdui-ripple">apps</a>
          <a href="#example2-tab10" class="mdui-ripple">dictionary</a>
        </div>

Alinhamento central

Adicione a classe .mdui-tab-centered no elemento <div class="mdui-tab"></div> para centralizar as abas em tablets/PCs.

Exemplo


        <div class="mdui-tab mdui-tab-centered" mdui-tab>
          <a href="#example3-tab1" class="mdui-ripple">web</a>
          <a href="#example3-tab2" class="mdui-ripple">shopping</a>
          <a href="#example3-tab3" class="mdui-ripple">videos</a>
        </div>

100% de largura

Adicione a classe .mdui-tab-full-width no elemento <div class="mdui-tab"></div> para fazer com que as abas ocupem sempre 100% da largura, com larguras iguais para cada aba.

Exemplo


        <div class="mdui-tab mdui-tab-full-width" mdui-tab>
          <a href="#example4-tab1" class="mdui-ripple">web</a>
          <a href="#example4-tab2" class="mdui-ripple">shopping</a>
          <a href="#example4-tab3" class="mdui-ripple">videos</a>
        </div>

Com ícone

Exemplo


        <div class="mdui-tab" mdui-tab>
          <a href="#example5-tab1" class="mdui-ripple">
            <i class="mdui-icon material-icons">phone</i>
          </a>
          <a href="#example5-tab2" class="mdui-ripple">
            <i class="mdui-icon material-icons">favorite</i>
          </a>
          <a href="#example5-tab3" class="mdui-ripple">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
          </a>
        </div>

Com ícone e texto

Exemplo


        <div class="mdui-tab" mdui-tab>
          <a href="#example6-tab1" class="mdui-ripple">
            <i class="mdui-icon material-icons">phone</i>
            <label>recents</label>
          </a>
          <a href="#example6-tab2" class="mdui-ripple">
            <i class="mdui-icon material-icons">favorite</i>
            <label>favorites</label>
          </a>
          <a href="#example6-tab3" class="mdui-ripple">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
            <label>nearby</label>
          </a>
        </div>

Com cor de fundo

Adicione a classe .mdui-color-[color] no elemento <div class="mdui-tab"></div> para atribuir uma cor de fundo às abas.

Exemplo


        <div class="mdui-tab mdui-color-theme" mdui-tab>
          <a href="#example7-tab1" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">phone</i>
            <label>recents</label>
          </a>
          <a href="#example7-tab2" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">favorite</i>
            <label>favorites</label>
          </a>
          <a href="#example7-tab3" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
            <label>nearby</label>
          </a>
        </div>

Opção ativada por padrão

Adicione a classe .mdui-tab-active no elemento <a> para ativar essa opção por padrão.

Exemplo


        <div class="mdui-tab" mdui-tab>
          <a href="#example8-tab1" class="mdui-ripple">web</a>
          <a href="#example8-tab2" class="mdui-tab-active mdui-ripple"
            >shopping</a
          >
          <a href="#example8-tab3" class="mdui-ripple">images</a>
        </div>

Opção desativada

Adicione o atributo disabled no elemento <a> para desativar essa opção.

Exemplo


        <div class="mdui-tab" mdui-tab>
          <a href="#example9-tab1" class="mdui-ripple">web</a>
          <a href="#example9-tab2" class="mdui-ripple" disabled>shopping</a>
          <a href="#example9-tab3" class="mdui-ripple">images</a>
        </div>

Como usar

Chamar via atributos personalizados

Nesse método, não é necessário escrever código JavaScript; basta adicionar o atributo mdui-tab="options" no elemento <div class="mdui-tab"></div> para ativar o componente.

Se o componente for gerado dinamicamente, é necessário chamar mdui.mutation() para inicialização.

<div class="mdui-tab" mdui-tab>
...
</div>

Chamar via JavaScript

Instanciando o componente:

// selector é o seletor CSS ou elemento DOM do elemento .mdui-tab
// options são os parâmetros do plugin, veja a lista de parâmetros abaixo
var inst = new mdui.Tab(selector, options);

Executar

Parâmetro

Nome do parâmetro	Tipo	Valor padrão	Descrição
`trigger`	`string`	`click`	Forma de acionamento para alternar abas. `click`: alternar ao clicar `hover`: alternar ao passar o mouse
`loop`	`boolean`	`false`	Se deve habilitar a alternância cíclica. Se for `true`, ao chamar o método next na última aba, ela voltará para a primeira; ao chamar o método prev na primeira aba, ela irá para a última.

Método

Nome do método	Descrição
`prev()`	Alternar para a aba anterior
`next()`	Alternar para a próxima aba
`show(index)`	Mostrar uma aba específica. `index`: número do índice ou id da aba
`handleUpdate()`	Quando a largura do elemento pai muda, é necessário chamar este método para redefinir a posição do indicador. Quando novas abas são adicionadas dinamicamente, este método também deve ser chamado para que as novas abas entrem em vigor.

Evento

Nome do evento	Descrição	Alvo	Parâmetros
`change.mdui.tab`	O evento será acionado ao alternar entre abas.	`<div class="mdui-tab"></div>`	`event._detail.inst`: instância `event._detail.index`: índice da aba ativada `event._detail.id`: id do conteúdo da aba ativada
`show.mdui.tab`	O evento será acionado ao alternar para uma aba específica.	`<a></a>`	`event._detail.inst`: instância

Lista de classes CSS

Nome da classe	Descrição
`.mdui-tab`	Define um componente de aba.
`.mdui-tab-scrollable`	Componente de aba rolável.
`.mdui-tab-centered`	Componente de aba centralizado.
`.mdui-tab-full-width`	Componente de aba com 100% de largura.
`.mdui-tab-active`	Opção em estado ativado.

Lista em grade

Barra de ferramentas