# ad-button-slide

> [website](https://adessilly.github.io/ad-button-slide/)

Latest version **0.0.7** (published 2018-11-21) · 0 weekly downloads

## Install

```sh
npm install ad-button-slide
pnpm add ad-button-slide
yarn add ad-button-slide
bun add ad-button-slide
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2018-11-21 |
| First published | 2018-11-14 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 74 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | adessilly |

## Links

- npm: https://www.npmjs.com/package/ad-button-slide
- npm.io page: https://npm.io/package/ad-button-slide

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 0.0.7 (latest) — 2018-11-21
- 0.0.6 — 2018-11-21
- 0.0.5 — 2018-11-21
- 0.0.4 — 2018-11-20
- 0.0.3 — 2018-11-14
- 0.0.2 — 2018-11-14

## README

# AdButtonSlide
[website](https://adessilly.github.io/ad-button-slide/)

Button Slide : show simple icon, on hover : show icon + text

<iframe src="https://stackblitz.com/edit/ad-button-slide?embed=1&file=src/app/app.component.html&hideExplorer=1&hideNavigation=1&view=preview" style="width:100%;height:330px;border:none;"></iframe>

## Using ***ad-button-slide*** in a project

1. Install the library : 
`npm i ad-button-slide`
2. Import the module : 
```
import { AdButtonSlideModule } from 'ad-button-slide';
@NgModule({
imports: [ ..., AdButtonSlideModule ], ...
```
3. (optional) import an icon library like fontawesome (`npm i @fortawesome/fontawesome-free`)
4. Play with the component :-)

```<ad-button-slide icon="fas fa-trash" label="Delete this" background="red"></ad-button-slide>```

## Properties

- `ad-button-slide` - (`AdButtonSlideComponent`) - button slide component object.

Parameters supported by this object:

- `icon`: string; - icon class, eg. 'fa fa-trash'
- `label`: string; - label displayed on hover
- `background`: string = '#aaa'; - css background color
- `foreground`: string = 'white'; - css font color
- `backgroundOver`: string = null; - css background color when mouseOver, if no value given : backgroundOver = background
- `foregroundOver`: string = null; - css font color when mouseOver, if no value given : foregroundOver = foreground
- `mini`: boolean = false; - boolean to make the button tiny

## Example

<iframe src="https://stackblitz.com/edit/ad-button-slide?embed=1&file=src/app/app.component.html&hideNavigation=1&view=preview" style="width:100%;height:400px;border:none;"></iframe>

## Test library

clone this project and run 'npm i && npm start'

## License

MIT License

## Author
Adrien Dessilly

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