# web-component-ff

> Web component desarrollado con Vanilla JS para crear una tarjeta multiproposito alusivo a Free Fire. Permite mostrar una imagen destacada, titulo, sub-titulo, info del producto, botón de ver más y efectos hover, marca de agua de fondo; incluso puedes vari

Latest version **1.0.4** (published 2023-09-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install web-component-ff
pnpm add web-component-ff
yarn add web-component-ff
bun add web-component-ff
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2023-09-10 |
| First published | 2023-09-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 702 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Mendozalz |
| Maintainers | mendozalz |
| Keywords | free fire, Web Component vanilla js, Vanilla JS |

## Links

- npm: https://www.npmjs.com/package/web-component-ff
- Repository: https://github.com/mendozalz/Free-fire-Web-Component
- Homepage: https://github.com/mendozalz/Free-fire-Web-Component#readme
- Issues: https://github.com/mendozalz/Free-fire-Web-Component
- npm.io page: https://npm.io/package/web-component-ff

## Dependencies (1)

- [vanilla-tilt](https://npm.io/package/vanilla-tilt.md) ^1.8.1

## Recent versions

- 1.0.4 (latest) — 2023-09-10
- 1.0.3 — 2023-09-10
- 1.0.1 — 2023-09-10
- 1.0.0 — 2023-09-10

## README

# web-component-ff

Web Component de uso multiporposito alusivo a Free Fire

## Instalación

```bash
npm install web-component-ff --save
```

## Uso
Importa el custom element:

```js
import {FreeFireCard} from 'web-component-ff';
```

## Usa el tag ```<mlz-ff>```:

```js
<mlz-ff
  titulo="Laura" //custom attribute
  img="./img.png" //custom attribute
  /* ...demás atributos */
>  
</mlz-ff>
```
## Atributos
+ titulo - Titulo de la tarjeta
+ img - Imagen destacada
+ movil - Imagen para vista movil
+ rgb - Activa efecto de gradiente (opcional)
+ coleccion - Colección del item
+ contenido - Descripción corta
+ alturaImg - Altura de la imagen

## Consideración de no usar el efecto titl
Se debe eliminar en el componente el atributo "rbg" el cual se descuadra 

## Atributos efecto Tilt
**Para los atributos del efecto tilt puedes buscar mas en** [https://gijsroge.github.io/tilt.js/](https://gijsroge.github.io/tilt.js/)

## Descripción
Web component desarrollado con Vanilla JS para crear una tarjeta multiproposito alusivo a Free Fire. Permite mostrar una imagen destacada, titulo, sub-titulo, info del producto, botón de ver más y efectos hover, marca de agua de fondo; incluso puedes variar en la imagen principal en modo pc y modo movil.

## Características
+ Diseño responsive para desktop y movil
+ cambiar de imagen principal para desktop y movil
+ Efecto hover con VanillaTilt.js
+ Soporte para Web Components nativos
+ Fácil personalización cambiando los atributos
+ Estilos encapsulados en Shadow DOM
+ Dependencias
+ vanilla-tilt: para el efecto hover 3D

## Desarrollo
Desarrollado con:

+ JavaScript vanila (ES6 modules)
+ HTMLTemplates
+ Shadow DOM
+ Custom Elements

## Para contribuir:

Crea un fork y contribuye

[https://github.com/mendozalz/Free-fire-Web-Component](https://github.com/mendozalz/Free-fire-Web-Component)


1.- Clonar repositorio 

2.- Ejecutar 
```bash 
npm install
```
3.- Realizar cambios y crear PR

---
_Source: https://npm.io/package/web-component-ff · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._