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

https://cat-ui.igordrangel.com.br/components/dropdowncat-ui.igordrangel.com.br