aperte s para abrir a busca
Storybook Storybook
v1.81.11

# CToast

O componente CToast serve para dar um feedback, com alguma mensagem para o usuário do sistema. Mantendo o padrão visual do Design System.

# Exemplo de CToast

<template>
  <client-only>
    <div>
      <div class="ui-flex ui-w-full ui-justify-center">
        <c-toast ref="toast" :auto="true" />
        <c-button  @click="emitEventToggle">
          Exibir toast
        </c-button>
      </div>
    </div>
  </client-only>
</template>

<script>
module.exports = {
  data: () => ({
    text: 'Não foi possível buscar os dados. Tente novamente mais tarde',
    type: 'success',
    position: 'bottom',
    width: 400
  }),
  methods: {
    emitEventToggle () {
      this.$refs.toast._show({
        type: this.type,
        text: this.text,
        timeout: 0,
        width: this.width,
        position: this.position,
        handler: () => { alert('Acionado o botão de fechar toast'); this.$refs.toast._close() }
      })
    }
  }
}
</script>

# CToast API

O componente CToast é um pouco diferente dos demais componentes do Design System, para utlizá-lo, é necessário importar como se fosse um plugin Vue.

import { CToast } from '@estrategiahq/coruja-web-ui';
import Vue from 'vue';
Vue.use(CToast);
1
2
3

E chamá-lo no html apenas uma vez, de preferência em um arquivo global de layout/template do seu app:

<c-toast />
1

# Props

A props disponíveis para configurar o componente são:

Nome Tipo Default Descrição
auto boolean true Adiciona a classe de posicionamento, definido no parâmetro position.

# Métodos

Os métodos disponíveis são:

Nome Tipo Parâmetros Descrição
_show function object Método utilizado para abrir o CToast.
_close function Método utilizado para fechar o CToast.

Os Parâmetros disponíveis para o método _show são e seus tipos:

{
  text: 'string', //Define uma mensagem
  type: 'string', //Define o tipo de Toast: `success`, `warning` e `error`
  position: 'string', //Define a posição: `top`, `bottom`
  width: 'number', //Define uma largura
  timeout: 'number', //Define com quantos segundos o CToast é fechado
}
1
2
3
4
5
6
7
Nome Tipo Default Descrição
text string Define uma mensagem.
type string warning Define o tipo do Toast: success, warning e error.
position string top Define a posição: top, bottom.
timeout number 5000 Define com quantos segundos o CToast é fechado automáticamente, definindo o valor 0 o CToast só é fechado com a ação do usuário.
width number 25rem Define uma largura.

# Emits

Os emits utilizado pelo componente estão listados abaixo:

Nome Descrição
click Emitido quando o componente é aberto.