Skip to main content
Version: 1.x

fast-divider

A web component implementation of a horizontal rule.

Setup

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

provideFASTDesignSystem()
.register(
fastDivider()
);

Usage

Live Editor
<fast-divider></fast-divider>
Result
Loading...

Create your own design

import { Divider, dividerTemplate as template } from "@microsoft/fast-foundation";
import { dividerStyles as styles } from "./my-divider.styles";

export const myDivider = Divider.compose({
baseName: "divider",
template,
styles,
});

API

Variables

NameDescriptionType
DividerRoleDivider roles{ separator: "separator", presentation: "presentation", }

class: Divider

Superclass

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

Fields

NamePrivacyTypeDefaultDescriptionInherited From
rolepublicDividerRoleThe role of the element.
orientationpublicOrientationThe orientation of the divider.
$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
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Attributes

NameFieldInherited From
rolerole
orientationorientation

Additional resources