Chip

Uso

page-chip.component.html

<cat-toolbar [config]="getToolbarInfo()">
  <nav buttons>
    <cat-chip class="mr-5" color="success">Success</cat-chip>
    <cat-chip class="mr-5" color="warning">Warning</cat-chip>
    <cat-chip class="mr-5" color="danger">Danger</cat-chip>
    <cat-chip class="mr-5" color="info">Info</cat-chip>
    <cat-chip class="mr-5" color="primary">Primary</cat-chip>
    <cat-chip class="mr-5" color="secondary">Secondary</cat-chip>
    <cat-dynamic-component [component]="chipWithDynamicComponent"></cat-dynamic-component>
  </nav>
</cat-toolbar>

O componente de chip também possui integração com os componentes dinâmicos, permitindo a inclusão deste componente pelo Datatable.

page-chip.component.ts

import { Component } from '@angular/core';
import { CatComponentBase } from '@catrx/ui/common';
import { CatChip } from '@catrx/ui/chip';

@Component({
  templateUrl: './page-chip.component.html',
})
export class PageChipComponent extends CatComponentBase {
  chipWithDynamicComponent = new CatChip('Componente Dinâmico', 'success');
}

page-chip.module.ts

import { CatDynamicComponentModule } from '@catrx/ui/dynamic-component';
import { NgModule } from '@angular/core';
import { CatChipModule } from '@catrx/ui/chip';
import { CatToolbarModule } from '@catrx/ui/toolbar';
import { PageChipComponent } from './page-chip.component';
import { PageChipRoutingModule } from './page-chip.routing.module';

@NgModule({
  declarations: [PageChipComponent],
  imports: [
    CatToolbarModule,
    CatChipModule,
    CatDynamicComponentModule,
    PageChipRoutingModule,
  ],
})
export class PageChipModule {}

Overview

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