Up direction
Click the FAB to expand the fan.
<wr-speed-dial [actions]="actions" (pick)="onPick($event)" />API
| Name | Description | Type | Default |
|---|---|---|---|
actions | — | 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
Data shapes used by the inputs and outputs above.
interface WrSpeedDialAction {
id: string;
label: string;
icon?: WrIconName;
}| 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 | — |
CSS variables
Custom properties ngwr/speed-dial publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.
| Variable | Default | Declared on |
|---|---|---|
--wr-speed-dial-action-size | 2.5rem | .wr-speed-dial |
--wr-speed-dial-gap | 0.625rem | .wr-speed-dial |
--wr-speed-dial-size | 3.25rem | .wr-speed-dial |