CPill

O componente CPill permite a exibição de textos customizados e com a ação de remoção.

Exemplos

API

Exemplo simples

Cirurgia Preventiva

Clinica Médica

<div class="c-d-flex"> <c-pill label="Cirurgia Preventiva"/> <c-pill label="Clinica Médica" removable style="margin-left: 16px"/> </div>

<div class="c-d-flex">
  <c-pill label="Cirurgia Preventiva"/>
  <c-pill label="Clinica Médica" removable style="margin-left: 16px"/>
</div>

Exemplo outline

Pediatria

Clinica Geral

<div class="c-d-flex"> <c-pill label="Pediatria" outline style="margin-left: 16px"/> <c-pill label="Clinica Geral" outline removable style="margin-left: 16px"/> </div>

<div class="c-d-flex">
  <c-pill label="Pediatria" outline style="margin-left: 16px"/>
  <c-pill label="Clinica Geral" outline removable style="margin-left: 16px"/>
</div>

Exemplo disabled

Pediatria

Clinica Geral

<div class="c-d-flex"> <c-pill label="Pediatria" disabled style="margin-left: 16px"/> <c-pill label="Clinica Geral" disabled outline style="margin-left: 16px"/> </div>

<div class="c-d-flex">
  <c-pill label="Pediatria" disabled style="margin-left: 16px"/>
  <c-pill label="Clinica Geral" disabled outline style="margin-left: 16px"/>
</div>

Exemplo com outra cor

Pediatria

Clinica Geral

<div class="c-d-flex"> <c-pill label="Pediatria" color="#f17" style="margin-left: 16px"/> <c-pill label="Clinica Geral" color="#f17" outline style="margin-left: 16px"/> </div>

<div class="c-d-flex">
  <c-pill label="Pediatria" color="#f17" style="margin-left: 16px"/>
  <c-pill label="Clinica Geral" color="#f17" outline style="margin-left: 16px"/>
</div>

Exemplo com avatar

J

John Snow

<div class="c-d-flex"> <c-pill label="John Snow" :user="{ name: 'John Snow' }"/> </div>

<div class="c-d-flex">
  <c-pill label="John Snow" :user="{ name: 'John Snow' }"/>
</div>

CPill API

Para utilizar o CPill é preciso primeiro importar o componente.

import { CPill } from '@estrategiahq/coruja-web-ui';

Props

Evento	Tipo	Default	Descrição
color	string	var(--c-color-primary)	Configura cor padrão do CPill
label	string	required	Texto exibido no CPill
user	string	null	Habilita para exibir avatar no CPill, aceita o mesmo objeto que o componente CAvatar
disabled	boolean	false	Desabilita CPill para clicks
outline	boolean	false	Habilita estilo outline do componente
removable	boolean	false	Habilita componente para ser removível

Events

Evento	Descrição
remove	Emitido quando o componente é removable e o usuário clica no x