Exemplos de CLink
Usando como âncora
<c-link
target="_blank"
href="https://www.estrategiaconcursos.com.br/"
>
Texto do link
</c-link>
Usando como botão
O CLink pode ser usado como botão, para isso é necessário especificar através do atributo component
.
Ao ser renderizado como um botão, para que uma ação seja executada, é preciso passar um método no @click
.
<template>
<c-link
@click="handleClick"
component="button"
>
Texto do link
</c-link>
</template>
<script>
module.exports = {
methods: {
handleClick() {
alert('clicked!')
}
}
}
</script>
CLink API
Para utilizar o CLink é preciso primeiro importar o componente.
import { CLink } from '@estrategiahq/coruja-web-ui';
1
Props
A props disponíveis para configurar o componente são:
Nome | Tipo | Default | Descrição |
component | string | a | Define qual o componente deverá ser renderizado, podendo ser a ou button . |
href | string | | O link ao qual a âncora se refere |
target | string | _self | Define o valor do target da âncora. |
Âncora vs Botão
O componente CLink possui a prop type
que permite escolher qual elemento HTML deverá ser renderizado. Entretanto é importante se atentar aos casos de uso corretos.
Links são elementos focáveis e podem ser ativados através da tecla Enter
. Devem ser utilizados para navegação entre páginas ou seções de uma mesma página.
São agrupados pelos leitores de tela como links
.
Botões também são elementos focáveis e podem ser ativados através da tecla espaço
. Devem ser utilizados para disparar uma ação (abrir/fechar algo, enviar dados de um formulário).
São agrupados pelos leitores de tela como form controls
(ou controles de formulário).
Slots
Podem conter qualquer tipo de código template, incluindo HTML ou outro componente.
Temos definidos os seguintes slots:
Nome | Descrição |
default | Slot padrão do Vue. |
Events
Usado para definir alguma ação.
Nome | Tipo | Descrição |
@click | function | Emitido quando o componente é clicado. |