MeFilterButton

Botão de filtro com suporte a exibição de um contador de filtros ativos.

Playground

Importação

Vue 3

<script setup>
import { MeFilterButton } from '@me/ui-vue3'
</script>

Uso Básico

<MeFilterButton />

Label Customizado

<MeFilterButton label="Período" icon="calendar_today" />

Com Filtros Ativos

O badge circular aparece automaticamente quando activeFiltersCount é maior que zero.

<MeFilterButton :activeFiltersCount="1" />
<MeFilterButton :activeFiltersCount="5" />
<MeFilterButton :activeFiltersCount="12" />

Estado Ativo

<MeFilterButton />
<MeFilterButton :active="true" />

Exemplo Interativo

<script setup>
import { ref } from 'vue'
const isActive = ref(false)
const count = ref(0)
</script>

<template>
  <MeFilterButton
    :active="isActive"
    :activeFiltersCount="count"
    @click="isActive = !isActive; count = isActive ? 3 : 0"
  />
</template>

API

Props

Prop	Tipo	Padrão	Descrição
label	string	'Filtro'	Texto exibido dentro do botão
icon	string	'filter_list'	Nome do ícone Material Icons
active	boolean	false	Estado ativo do botão
activeFiltersCount	number	0	Número de filtros ativos. Exibe badge quando > 0

Eventos

Evento	Payload	Descrição
click	void	Emitido quando o botão é clicado