LCD-style digit display web component with Lit
npm install @manufosela/lcd-digitA 7-segment LCD digit display web component. Built with Lit.
``bash`
npm install @manufosela/lcd-digit
`javascript`
import '@manufosela/lcd-digit';
`html`
- 7-segment LED/LCD display style
- Supports digits 0-9, minus sign, and blank
- Optional colon for clock displays
- Glow effect on active segments
- Increment/decrement methods
- Fully customizable via CSS properties
| Attribute | Type | Default | Description |
| ---------- | ------- | ------- | ------------------------------ |
| digit | String | 0 | Digit to display (0-9, -, space) |colon
| | Boolean | false | Show colon after digit |colon-on
| | Boolean | false | Whether colon is lit |
| Method | Description |
| ------------- | ------------------------------ |
| setDigit(d) | Set the digit (0-9, -, space) |increment()
| | Increase digit (wraps 9→0) |decrement()
| | Decrease digit (wraps 0→9) |
| Event | Detail | Description |
| -------------- | ------------------ | ---------------------- |
| digit-changed| { digit: string }| Fired when digit changes |
`javascript`
lcdDigit.addEventListener('digit-changed', (e) => {
console.log('New digit:', e.detail.digit);
});
| Property | Default | Description |
| ------------------------- | -------------------- | ------------------------ |
| --lcd-segment-length | 30px | Segment length |--lcd-segment-width
| | 6px | Segment width |--lcd-digit-on-color
| | #22c55e | Active segment color |--lcd-digit-off-color
| | rgba(0,0,0,0.1) | Inactive segment color |--lcd-digit-glow-color
| | rgba(34,197,94,0.5)| Glow effect color |
html
`$3
`html
`$3
`html
digit="8"
style="--lcd-digit-on-color: #3b82f6; --lcd-digit-glow-color: rgba(59, 130, 246, 0.5);">
`$3
`html
``MIT