CToggle

O elemento Toggle é um elemento básico para entrada do usuário, semalhante ao CRadio, mas com estilo de botão. Pode usar para fornecer maneiras do usuário escolher uma opção entre várias escolhas.

Exemplos

API

Exemplos do Toggle

Padrão

false

<template> <div class="ui-flex ui-flex-1 ui-self-center"> <c-toggle v-model="value" @click="handleCheck" /> <div class="ui-ml-2">{{value}}</div> </div> </template> <script> module.exports = { data: () => ({ value: false }), methods: { handleCheck() { this.value = !this.value } } } </script>

<template>
  <div class="ui-flex ui-flex-1 ui-self-center">
    <c-toggle
      v-model="value"
      @click="handleCheck"
    />
    <div class="ui-ml-2">{{value}}</div>
  </div>
</template>

<script>
module.exports = {
  data: () => ({
    value: false
  }),
  methods: {
    handleCheck() {
      this.value = !this.value
    }
  }
}
</script>

Desabilitado

<c-toggle disabled />

<c-toggle
  disabled
/>

Toggle API

Para utilizar o CToggle é preciso primeiro importar o componente.

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

Props

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

Nome	Tipo	Default	Descrição
value	boolean	false	Define o valor o toogle.
disabled	boolean	false	Permite habilitar/desabilitar o input, pode utilizar as opções true ou false.

Events

Usado para definir alguma ação.

Nome	Tipo	Descrição
@click	function	Emitido quando o componente é clicado.