Cat UI
GitHub
  • Comece por aqui
    • 1. Instalação
      • Icones
      • Bootstrap
    • 2. Aplicando Tema
    • 3. Estrutura da aplicação
    • 4. Segurança
      • OpenID (Opcional)
      • Claims (Optional)
  • Menu
    • Sidenav
    • Toolbar
    • Dropdown
    • Tab
  • Exibição de Dados
    • Datatable
    • Componentes Dinâmicos
    • Exportação e Download de Dados
      • .csv
      • .xlsx
      • Visualizar .pdf
      • Download base64
    • Chip
  • Formulário
    • Formulário Dinâmico
    • Lista de Itens
    • Campos Personalizados
    • Stepper
    • Expansive Panel
    • Filtro Sobre Demanda
  • Janelas e Alertas
    • Dialog
    • Confirm
    • Alert
    • Snackbar
    • SideWindow
    • Notifications
    • Tooltip
  • Loaders
    • Spinner
    • Loader Page
  • Botões
    • Button
  • Abstrações
    • ServiceBase
    • ComponentBase
    • CRUDComponentBase
    • FormBase
  • Guias
    • Criando uma Aplicação de CRUD
      • Criando Projeto
      • Estrutura
      • Tela de Login
      • Menu
      • Tela de Adoção
      • Serviço HTTP
      • Lista de Pets
      • Formulário de Cadastro e Edição
      • Excluir Pet
      • Conclusão
Powered by GitBook
On this page
  • Uso
  • Overview

Was this helpful?

  1. Menu

Dropdown

Uso

page-dropdown.component.html
<cat-toolbar [config]="getToolbarInfo()">
  <nav buttons>
    <cat-dropdown class="mr-5" position="top">
      <cat-primary-button trigger>Top</cat-primary-button>
      <div content>
        <a class="dropdown-item" href="#">Ok</a>
      </div>
    </cat-dropdown>

    <cat-dropdown class="mr-5" position="top right">
      <cat-primary-button trigger>Top Right</cat-primary-button>
      <div content>
        <a class="dropdown-item" href="#">Ok</a>
      </div>
    </cat-dropdown>

    <cat-dropdown class="mr-5" position="top left">
      <cat-primary-button trigger>Top Left</cat-primary-button>
      <div content>
        <a class="dropdown-item" href="#">Ok</a>
      </div>
    </cat-dropdown>

    <cat-dropdown class="mr-5" position="left">
      <cat-primary-button trigger>Left</cat-primary-button>
      <div content>
        <a class="dropdown-item" href="#">Ok</a>
      </div>
    </cat-dropdown>

    <cat-dropdown class="mr-5" position="right">
      <cat-primary-button trigger>Right</cat-primary-button>
      <div content>
        <a class="dropdown-item" href="#">Ok</a>
      </div>
    </cat-dropdown>

    <cat-dropdown class="mr-5" position="bottom right">
      <cat-primary-button trigger>Bottom Right</cat-primary-button>
      <div content>
        <a class="dropdown-item" href="#">Ok</a>
      </div>
    </cat-dropdown>

    <cat-dropdown position="bottom left">
      <cat-primary-button trigger>Bottom Left</cat-primary-button>
      <div content>
        <a class="dropdown-item" href="#">Ok</a>
      </div>
    </cat-dropdown>
  </nav>
</cat-toolbar>
page-dropdown.component.ts
import { Component } from '@angular/core';
import { CatComponentBase } from '@catrx/ui/common';

@Component({
  templateUrl: './page-dropdown.component.html'
})
export class PageDropdownComponent extends CatComponentBase { }
page-dropdown.module.ts
import { NgModule } from '@angular/core';
import { PageDropdownComponent } from './page-dropdown.component';
import { CommonModule } from '@angular/common';
import { CatToolbarModule } from '@catrx/ui/toolbar';
import { CatDropdownModule } from '@catrx/ui/dropdown';
import { PageDropdownRoutingModule } from './page-dropdown.routing.module';
import { CatPrimaryButtonComponent } from '@catrx/ui/button/primary';

@NgModule({
  declarations: [PageDropdownComponent],
  imports: [
    CommonModule,
    CatToolbarModule,
    CatPrimaryButtonComponent,
    CatDropdownModule,
    PageDropdownRoutingModule,
  ],
})
export class PageDropdownModule {}

Overview

PreviousToolbarNextTab

Last updated 2 years ago

Was this helpful?

CatUi
Logo