import { Component } from '@angular/core';
import { WrSpeedDial } from 'ngwr/speed-dial';
@Component({ imports: [WrSpeedDial] })
export class MyComponent {}Speed Dial
A floating button that opens a set of related actions.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Basic usage
(pick) emits the action the user clicks.
<wr-speed-dial [actions]="actions" (pick)="onPick($event)" />Direction
direction is up (default), down, left or right: point it away from the nearest edge.
<wr-speed-dial [actions]="actions" direction="down" />API
| Name | Description | Type | Default |
|---|---|---|---|
actions | The buttons that fan out when the dial opens, in order from the trigger outwards. Each needs a label: it is the accessible name as well as the tooltip. | readonly WrSpeedDialAction[] | [] |
triggerLabel | Accessible name of the trigger. Falls back to speedDial.label, then 'Actions' — the trigger is icon-only, so without this it has no name at all. | string | null | null |
direction | Direction the actions fan out. | WrSpeedDialDirection | 'up' |
open | Two-way bindable open state. | boolean | false |
icon | Icon for the main trigger button. | WrIconName | 'add' |
disabled | Disable interaction. | boolean | false |
safeArea | Pad the host toward the dial direction with env(safe-area-inset-*). Only matters when the consumer pins the dial to that edge of the viewport; otherwise it has no effect. | boolean | false |
(pick) | Fires when the user picks one of the actions. | WrSpeedDialAction | — |
Types
interface WrSpeedDialAction {
readonly id: string;
readonly label: string;
readonly icon?: WrIconName;
}
type WrSpeedDialDirection = 'up' | 'down' | 'left' | 'right';| Name | Description | Type | Default |
|---|---|---|---|
WrSpeedDialAction | Per-button action shown when the dial expands. | interface | — |
idrequired | Stable identifier for the action. | string | — |
labelrequired | Tooltip / accessible label. | string | — |
icon | Button icon. | WrIconName | — |
WrSpeedDialDirection | Which way the fan opens. | 'up' | 'down' | 'left' | 'right' | — |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/speed-dial's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-speed-dial-action-border | var(--wr-border-base) | .wr-speed-dial |
--wr-speed-dial-action-size | 2.5rem | .wr-speed-dial |
--wr-speed-dial-font-family | var(--wr-font-family-base) | .wr-speed-dial |
--wr-speed-dial-gap | var(--wr-space-md) | .wr-speed-dial |
--wr-speed-dial-size | 3.25rem | .wr-speed-dial |
Dependencies
| Built on | Icon |
|---|