Skip to main content

fast-toolbar

As defined by the W3C:

A toolbar is a container for grouping a set of controls, such as buttons, menubuttons, or checkboxes.

When a set of controls is visually presented as a group, the toolbar role can be used to communicate the presence and purpose of the grouping to screen reader users. Grouping controls into toolbars can also be an effective way of reducing the number of tab stops in the keyboard interface.

Setup​

import {
    provideFASTDesignSystem,
    fastToolbar
} from "@microsoft/fast-components";

provideFASTDesignSystem()
    .register(
        fastToolbar()
    );

Usage​

Live Editor
Result
Loading...

Create your own design​

import {
    Toolbar,
    toolbarTemplate as template,
} from "@microsoft/fast-foundation";
import { toolbarStyles as styles } from "./my-toolbar.styles";

export const myToolbar = Toolbar.compose({
    baseName: "toolbar",
    template,
    styles,
    shadowOptions: {
        delegatesFocus: true,
    },
});

API​

class: Toolbar​

Superclass​

NameModulePackage
FoundationElement/src/foundation-element/foundation-element.js

Fields​

NamePrivacyTypeDefaultDescriptionInherited From
activeIndex
orientationpublicOrientationThe orientation of the toolbar.
childItemspublicElement[]
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.FoundationElement
stylespublicElementStyles or void or nullSets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.FoundationElement

Methods​

NamePrivacyDescriptionParametersReturnInherited From
slottedItemsChangedprotectedvoid
childItemsChangedprotectedprev: undefined or Element[], next: Element[]void
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Attributes​

NameFieldInherited From
orientationorientation

CSS Parts​

NameDescription
positioning-regionThe element containing the items, start and end slots

Slots​

NameDescription
startContent which can be provided before the slotted items
endContent which can be provided after the slotted items
The default slot for slotted items
labelThe toolbar label

class: DelegatesARIAToolbar​

Fields​

NamePrivacyTypeDefaultDescriptionInherited From
ariaLabelledbypublicstring or nullThe id of the element labeling the toolbar.
ariaLabelpublicstring or nullThe label surfaced to assistive technologies.

Attributes​

NameFieldInherited From
aria-labelledbyariaLabelledby
aria-labelariaLabel

Additional resources​