color-selector-component
Version:
Web Component para seleccionar colores con estilos personalizados y formAssociated
114 lines (86 loc) • 2.59 kB
Markdown
# Selector de Color - Web Component
Este proyecto implementa un componente web personalizado para seleccionar colores, diseñado para ser fácilmente integrado en formularios HTML.
## Características
- 🎨 Selector de color personalizable
- 📝 Compatible con formularios HTML (formAssociated)
- 🎯 Fácil integración
- 🔧 Altamente configurable
- 📱 Diseño responsive
## Instalación
Instala el paquete usando npm:
```bash
npm install color-selector-component
```
## Uso
### Importación
Primero, importa el componente en tu proyecto:
```javascript
import 'color-selector-component';
```
### Uso Básico
Para usar el selector de color con la configuración predeterminada:
```html
<color-selector name="color1"></color-selector>
```
### Uso Personalizado
Puedes personalizar el selector de color con diferentes opciones:
```html
<color-selector
name="color2"
width="120px"
height="25px"
colors='[
{"value":"#f44336","label":"Rojo intenso"},
{"value":"#4caf50","label":"Verde brillante"},
{"value":"#2196f3","label":"Azul claro"},
{"value":"#ffeb3b","label":"Amarillo sol"}
]'
></color-selector>
```
### Atributos Disponibles
- `name`: Nombre del campo para el formulario (requerido)
- `width`: Ancho del selector (opcional)
- `height`: Alto del selector (opcional)
- `colors`: Array JSON de colores personalizados (opcional)
- Cada color debe tener:
- `value`: Código hexadecimal del color
- `label`: Etiqueta descriptiva del color
## Integración con Formularios
El componente está diseñado para funcionar perfectamente con formularios HTML:
```html
<form method="POST" action="/tu-endpoint">
<color-selector name="color"></color-selector>
<button type="submit">Enviar</button>
</form>
```
## Ejemplo Completo
```html
<html>
<head>
<title>Selector de Color</title>
</head>
<body>
<form method="POST" action="/enviar">
<!-- Selector básico -->
<color-selector name="color1"></color-selector>
<!-- Selector personalizado -->
<color-selector
name="color2"
width="120px"
height="25px"
colors='[
{"value":"#f44336","label":"Rojo intenso"},
{"value":"#4caf50","label":"Verde brillante"}
]'
></color-selector>
<button type="submit">Enviar</button>
</form>
<script type="module">
import 'color-selector-component';
</script>
</body>
</html>
```
## Licencia
Este proyecto está bajo la Licencia MIT.