Indicator

Positions status or notification content around an anchor using the public DuskMoon Core 1.19.9 CSS contract.

Installation

npm install @duskmoon-dev/el-indicator

import '@duskmoon-dev/el-indicator/register';

Live Demo

<el-dm-indicator vertical="top" horizontal="end">
  <el-dm-badge slot="indicator" color="error">4</el-dm-badge>
  <el-dm-button aria-label="Inbox, 4 unread messages">Inbox</el-dm-button>
</el-dm-indicator>

Properties

| Property | Type | Default | Description | | ———— | –––– | –––– | ———– | —–– | ————————— | | vertical | 'top' | 'middle' | 'bottom' | 'top' | Vertical position | | horizontal | 'start' | 'center' | 'end' | 'end' | Logical horizontal position |

Composition and accessibility

Put the marker in the indicator slot and the anchor in the default slot. Decorative markers should be aria-hidden; meaningful values must also appear in the anchor’s accessible name.