.md

Feedback & overlays

Callouts, modal dialogs, and the image lightbox for surfacing feedback and overlaying content above the page.

Alert (callout)

A callout box framed by the 1.5px rule with a label chip sitting on its top edge, like the website's notes. The variant sets the chip and the tint: info is labelled Note (white chip, plain surface), successTip (mint), warningWatch out (yellow) and errorError (a red tint). label overrides the chip text. <docs-alert> and the markdown :::alert block share the .docs-callout styles, so both render alike.

Variants

Note
Lists are views on a model: create as many as you need, they share the data.
Tip
Name a list when you create it, so you can find it again with getList().
Watch out
Only index properties you actually query. Every index costs memory and load time.
Error
The model key must be unique. A second model with the same key replaces the first.
Index on purpose
A custom label replaces the default chip text.

Usage

<docs-alert variant="warning">Only index properties you actually query.</docs-alert>
<docs-alert variant="success" label="Pro tip">Name your lists.</docs-alert>

<!-- Markdown -->
:::alert{variant="warning"}
Only index properties you actually query.
:::

A dialog: a flat panel framed by the 1.5px rule (6px corners) with the overlay shadow — the one place a shadow is allowed — a tinted header strip and a footer slot ([modal-footer]), over a dimmed backdrop. Traps focus, closes on Escape and on the backdrop (both configurable).

Example

Sizes

Usage

<docs-button (click)="modalOpen = true">Open</docs-button>

<docs-modal
  [(open)]="modalOpen"
  title="Modal Title"
  size="md"
  [closeOnBackdrop]="true"
  [closeOnEscape]="true"
>
  <p>Modal content</p>

  <div modal-footer>
    <docs-button (click)="modalOpen = false">Close</docs-button>
  </div>
</docs-modal>

A click-to-zoom image: the thumbnail is framed with a hairline that turns into the rule on hover; the overlay is a black stage with square-ish controls and square position markers for grouped galleries.

Single image

Gallery (grouped)

Click any image, then use arrow keys or buttons to navigate.

Usage

<!-- Single image -->
<docs-lightbox
  src="/image.jpg"
  alt="Description"
  caption="Optional caption"
/>

<!-- Gallery (grouped images) -->
<docs-lightbox src="/img1.jpg" group="gallery" />
<docs-lightbox src="/img2.jpg" group="gallery" />