Skip to main content

DemoBadge Widget

Shows a diagonal "Demo" watermark across the page. This is used when the document is a demo or test document, so it is clear the document is not real.

Usage​

In your index.ts:

import "../../widgets/demo-badge";

In your template.hbs:

{{> DemoBadge}}

How it works​

The widget checks for a isDemo field (or similar flag) in the document data. If the document is a demo, it renders a large diagonal banner across the page.

The banner uses CSS transforms to rotate text at 45 degrees. It is positioned with position: fixed so it covers the entire page, even if the content scrolls.

When does it show?​

The badge only shows when the document data indicates it is a demo. For real invoices, the partial renders nothing.