Log Viewer
Log viewer web component: a monospace stream of lines that follows the newest while you're at the bottom, with pause, highlighting and a line cap.
- 2.2 KB gzipped
- @lit-material/log-viewer 0.0.3
- Renders on the server
Example
Log viewer
A monospace stream that follows the newest line while you're at the bottom. Scroll up to read; pause to hold new lines back.
Install
npm install @lit-material/log-viewer @lit-material/tokensimport "@lit-material/log-viewer";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-log-viewer>
A log viewer: a monospace stream of lines, newest at the bottom.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
maxLines | max-lines | number | 1000 | Lines kept; the oldest are dropped past this. |
paused | paused | boolean | false | Hold new lines back until set to false again. |
wrap | wrap | boolean | false | Wrap long lines instead of scrolling sideways. |
label | label | string | "Log" | The accessible name of the log region. |
highlight | property only | (line: string) => LogLevel | null | undefined | undefined | none | Classifies a line; return nothing for a plain one. |
lines | property only | string[] | none | The lines shown, oldest first. |
Events
| Event | Description |
|---|---|
lines-dropped | detail: { count } when max-lines dropped old lines. |
CSS parts
| Part | Description |
|---|---|
viewport | The scrolling area. |
line | Each line. |
jump | The "new lines" button. |
CSS custom properties
| Property | Description |
|---|---|
--lit-material-log-viewer-height | The viewport's height (default 320px). |