CSearchBar

O SearchBar é um componente de formulário, desenvolvido para renderizar campos de busca e manter o padrão do Design System.

Exemplos

API

Exemplos do CSearchBar

Simples

<template> <c-search-bar v-model="searchText" placeholder="Digite aqui!" /> </template> <script> module.exports = { data () { return { searchText: '' } } } </script>

  <template>
  <c-search-bar
    v-model="searchText"
    placeholder="Digite aqui!"
  />
</template>

<script>
module.exports = {
  data () {
    return {
      searchText: ''
    }
  }
}
</script>

Debounce ao digitar

Caso seja necessário um debounce na emissão do evento de digito do usuário, pode ser passado um valor em milisegundos. Para mais detalhes sobre o que é um debounce veja aqui (opens new window), além de um exemplo aqui (opens new window).

Valor emitido: @

<template> <div> <c-search-bar v-model="searchText" placeholder="Com debounce" :debounce="1500" /> <span>Valor emitido: {{ emittedValue }}</span> </div> </template> <script> module.exports = { data () { return { searchText: '' } }, computed: { emittedValue () { return this.searchText + ' @' } } } </script>

<template>
  <div>
    <c-search-bar
      v-model="searchText"
      placeholder="Com debounce"
      :debounce="1500"
    />
    <span>Valor emitido: {{ emittedValue }}</span>
  </div>
</template>

<script>
module.exports = {
  data () {
    return {
      searchText: ''
    }
  },
  computed: {
    emittedValue () {
      return this.searchText + ' @'
    }
  }
}
</script>

Variação de tamanhos

<template> <div> <div style="margin-bottom: 1rem;"> <c-search-bar v-model="searchText" placeholder="Small" size="sm" /> </div> <div style="margin-bottom: 1rem;"> <c-search-bar v-model="searchText" placeholder="Medium" /> </div> <div style="margin-bottom: 1rem;"> <c-search-bar v-model="searchText" placeholder="Large" size="lg" /> </div> </div> </template> <script> module.exports = { data () { return { searchText: '' } } } </script>

<template>
  <div>
    <div style="margin-bottom: 1rem;">
      <c-search-bar
        v-model="searchText"
        placeholder="Small"
        size="sm"
      />
    </div>
    <div style="margin-bottom: 1rem;">
      <c-search-bar
        v-model="searchText"
        placeholder="Medium"
      />
    </div>
    <div style="margin-bottom: 1rem;">
      <c-search-bar
        v-model="searchText"
        placeholder="Large"
        size="lg"
      />
    </div>
  </div>
</template>

<script>
module.exports = {
  data () {
    return {
      searchText: ''
    }
  }
}
</script>

SearchBar API

Para utilizar o CSearchBar é preciso primeiro importar o componente.

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

Props / v-model

As props / v-model disponíveis para configurar o componente são:

Nome	Tipo	Default	Descrição
v-model	string		É o model do SearchBar.
placeholder	string		Define o placeholder do SearchBar.
size	string	'md'	Define o tamanho do SearchBar. Pode ser sm, md ou lg
debounce	number	0	Tempo necessário de pausa para que a emissão do evento seja realizada.

Emits

Os emits utilizado pelo componente estão listados abaixo:

Nome	Descrição
search	Emitido quando o enter é pressionado.
input	Emitido quando o usuário preenche o input.