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

Name	Description	Type
DividerRole	Divider roles	{ separator: "separator", presentation: "presentation", }

---

class: Divider

Superclass

Name	Module	Package
FoundationElement	/src/foundation-element/foundation-element.js

Fields

Name	Privacy	Type	Default	Description	Inherited From
role	public	DividerRole		The role of the element.
orientation	public	Orientation		The orientation of the divider.
$presentation	public	ComponentPresentation or null		A property which resolves the ComponentPresentation instance for the current component.	FoundationElement
template	public	ElementViewTemplate or void or null		Sets 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
styles	public	ElementStyles or void or null		Sets 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

Name	Privacy	Description	Parameters	Return	Inherited From
templateChanged	protected			void	FoundationElement
stylesChanged	protected			void	FoundationElement

Attributes

Name	Field	Inherited From
role	role
orientation	orientation

---

Additional resources

• Component explorer examples
• Component technical specification