ngx-yes-no-pm

Un componente de selección binaria (Sí/No) para Angular basado en PrimeNG, con soporte para formularios reactivos y totalmente personalizable.

Características

• ⚡ Basado en PrimeNG (p-selectButton).
• 📝 Soporte total para Reactive Forms (formControlName).
• 🎨 Estilizado moderno (bordes redondeados).
• 🔄 Botón de Reset integrado.
• 📍 Posición de etiqueta configurable (left, right, top, bottom).
• 🌍 Textos personalizables (i18n).
• 🖌️ Tematización fácil con CSS Variables.

Instalación

npm install ngx-yes-no-pm

(Requiere primeng y primeicons)

Galería de Ejemplos

1. Básico

El uso estándar con la etiqueta a la izquierda.

<ngx-yes-no-pm label="¿Está activo?"></ngx-yes-no-pm>

2. Internacionalización (Español)

Personaliza los textos de los botones y el reset.

<ngx-yes-no-pm 
  label="¿Confirmar?" 
  yesLabel="Sí" 
  noLabel="No" 
  resetLabel="Limpiar">
</ngx-yes-no-pm>

3. Etiquetas Arriba (Top Label)

Ideal para formularios verticales.

<ngx-yes-no-pm 
  label="Seleccione opción" 
  labelPosition="top">
</ngx-yes-no-pm>

4. Tema Personalizado (Rojo)

Cambia los colores usando variables CSS.

<!-- En tu CSS o style attribute -->
<ngx-yes-no-pm 
  style="--yns-primary-color: #d32f2f; --yns-bg-selected: #ffebee;"
  label="¿Eliminar permanentemente?">
</ngx-yes-no-pm>

API Reference

| Input | Tipo | Default | Descripción | |-------|------|---------|-------------| | label | string | '' | Texto de la etiqueta. | | labelPosition | 'top' \| 'bottom' \| 'left' \| 'right' | 'left' | Posición de la etiqueta. | | yesLabel | string | 'Yes' | Texto botón afirmativo. | | noLabel | string | 'No' | Texto botón negativo. | | resetLabel | string | 'Reset' | Texto botón reset. | | disabled | boolean | false | Deshabilita el componente. |

Autor

Creado para facilitar la implementación de selectores binarios en ecosistemas PrimeNG.