Compass
<o-compass> is a heading indicator: the card turns so the heading sits under the index at the top.
The card is two rings, ticks and cardinal letters, turned by their own --o-from. The letters stay upright because capsules do by default. A new heading only changes that angle.
Attributes
| Attribute | Default | What it does |
|---|---|---|
heading | 0 | Heading in degrees, clockwise from north. |
labels | N,E,S,W | Card letters, comma-separated and spread evenly. The first one is colored. |
accent | #ef4444 | Index and first letter. fill still works too. |
unit | ° | Suffix of the readout. |
size | 220px | Width of the widget. |
glow | off | A glow on the index. |
format, decimals, currency, locale | Number format of the heading readout, through Intl.NumberFormat. See Shared options. | |
theme | dark, light or glass. Also inherited from an ok-theme-* class on a container. See Shared options. |
Styling
| Property | Falls back to | What it does |
|---|---|---|
--ok-cmp-accent | --ok-accent | Index and the first letter. |
--ok-cmp-face | --ok-face | Dial background. |
--ok-cmp-bezel | --ok-bezel | Dial rim. |
--ok-cmp-tick | --ok-tick | Small ticks. |
--ok-cmp-tick-M | Ticks at the four cardinal points. | |
--ok-cmp-text | --ok-text | Letters and readout. |
--ok-font-size | Base text size, 7cqmin by default. |
More examples
Eight points
Following the pointer
A light dial
Accessibility
The compass has role="img" and a name like “Heading 45°, NE”, kept in sync with heading. Set aria-label to replace it.