Switch
Controles de alternância para ativar/desativar configurações.
Preview
Visualização do componente Switch com diferentes estados
Instalação
Via CLI (Recomendado)
1. Inicializar (primeira vez)
npx @scmposs/hollow-ui init
npx @scmposs/hollow-ui setup2. Adicionar componente
npx @scmposs/hollow-ui add switchOs comandos init e setup fazem o pré-setup (necessário apenas uma vez). Se você rodar add sem isso, a CLI executa o setup automaticamente.
Via NPM
Instalar pacote completo
npm install @scmposs/hollow-ui@latestInstala todos os componentes como dependência do projeto.
Uso Básico
Uso do Switch
import { Switch } from "@scmposs/hollow-ui"
import { Label } from "@scmposs/hollow-ui"
<div className="flex items-center space-x-2">
<Switch id="notifications" />
<Label htmlFor="notifications">Notificações</Label>
</div>
// Switch ativado por padrão
<Switch id="theme" defaultChecked />
// Switch desabilitado
<Switch id="disabled" disabled />Exemplos
Configurações do Perfil
Configurações de Notificação
Receber notificações por email
Notificações push no navegador
Ofertas e promoções