43 lines
883 B
Markdown
43 lines
883 B
Markdown
# tp-timeout-strip
|
|
|
|
Shows a small color strip that decreases in size over time to indicate a delay is currently elapsing. Can be used to indicate when a temporary popup will be automatically be closed.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm install @tp/tp-timeout-strip
|
|
```
|
|
|
|
## Usage
|
|
|
|
```html
|
|
<tp-timeout-strip></tp-timeout-strip>
|
|
```
|
|
|
|
```js
|
|
const strip = document.querySelector('tp-timeout-strip');
|
|
|
|
// Show the strip and start the timeout animation (3000ms = 3 seconds)
|
|
strip.show(3000);
|
|
|
|
// Listen for when the timeout completes
|
|
strip.addEventListener('timeout', () => {
|
|
console.log('Timeout elapsed!');
|
|
});
|
|
```
|
|
|
|
## Styling
|
|
|
|
The component can be customized using CSS custom properties:
|
|
|
|
```css
|
|
tp-timeout-strip {
|
|
/* Change the strip color (default: #000) */
|
|
--tp-timeout-strip-color: #ff4444;
|
|
|
|
/* Change the strip height (default: 3px) */
|
|
--tp-timeout-strip-width: 4px;
|
|
}
|
|
```
|
|
|