MeSwitchCard

Card com switch integrado, label, subtitle e tooltip opcional. Ideal para configurações que precisam de mais contexto visual do que um switch isolado.

Playground

Importação

Vue 3

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

Vue 2

<script>
import { MeSwitchCard } from '@me/ui-vue2'

export default {
  components: { MeSwitchCard }
}
</script>

Uso Básico

Receber notificações

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

<template>
  <MeSwitchCard v-model="ativo" label="Receber notificações" />
</template>

Com Subtitle

E-mails de marketing

Promoções, novidades e dicas do sistema

<MeSwitchCard
  v-model="ativo"
  label="E-mails de marketing"
  subtitle="Promoções, novidades e dicas do sistema"
/>

Com Ícone e Tooltip

notifications

Notificações push

help_outline

Requer permissão do navegador

Alertas em tempo real no navegador

<MeSwitchCard
  v-model="ativo"
  label="Notificações push"
  subtitle="Alertas em tempo real no navegador"
  iconLeft="notifications"
  tooltip="Requer permissão do navegador"
/>

Card Clicável

Com clickableCard, clicar em qualquer parte do card alterna o switch — não apenas o switch em si.

dark_mode

Modo escuro

Clique em qualquer área do card

<MeSwitchCard
  v-model="ativo"
  label="Modo escuro"
  subtitle="Clique em qualquer área do card"
  iconLeft="dark_mode"
  clickableCard
/>

Estado Desabilitado

Recurso indisponível

Entre em contato com o suporte

<MeSwitchCard
  v-model="ativo"
  label="Recurso indisponível"
  subtitle="Entre em contato com o suporte"
  disabled
/>

Slot Default

Use o slot default para adicionar conteúdo extra à direita do card (ex: badge, botão, tag).

workspace_premium

Plano Pro

Funcionalidade exclusiva

PRO

<MeSwitchCard v-model="ativo" label="Plano Pro" subtitle="Funcionalidade exclusiva">
  <MeBadge message="PRO" blue />
</MeSwitchCard>

API

Props

Prop	Tipo	Padrão	Descrição
modelValue	boolean	false	Valor do switch. Use com v-model
label	string	—	Texto principal do card
subtitle	string	''	Texto secundário abaixo do label
tooltip	string	''	Texto do tooltip ao lado do label
iconLeft	string	''	Nome do ícone Material Icons exibido à esquerda
switchSize	string	'small'	Tamanho do switch interno ('small' ou 'standard')
disabled	boolean	false	Desabilita a interação
clickableCard	boolean	false	Torna o card inteiro clicável para alternar o switch

Eventos

Evento	Payload	Descrição
update:modelValue	boolean	Emitido ao alternar o switch. Use v-model para bind bidirecional

Slots

Nome	Descrição
default	Conteúdo adicional exibido à direita do card (ex: badge, tag, botão)