MtxDivider Component Overview

The MtxDivider Component provides a horizontal line separator to visually divide content within an Angular application.

Usage

Basic Usage

Include the MtxDivider Component selector <mtx-divider></mtx-divider> in your template to display a horizontal divider line.

<mtx-divider></mtx-divider>

Configuration

The divider component supports the following configuration options through the [config] input:

• vertical: Set to true to render the divider vertically.
• inset: Set to true to inset the divider.

<mtx-divider [config]="dividerConfig"></mtx-divider>

Where dividerConfig is an object of type MtxDividerConfig.

Styling

Customize the appearance of the divider component by editing the divider.scss file. The component automatically applies CSS classes based on configuration options (vertical and inset).

Examples

Basic Horizontal Divider

<mtx-divider></mtx-divider>

Vertical Divider

<mtx-divider [config]="{ vertical: true }"></mtx-divider>

Inset Divider

<mtx-divider [config]="{ inset: true }"></mtx-divider>

Accessibility

The MtxDivider Component ensures accessibility by adhering to WCAG standards for contrast and keyboard navigation.

API

Inputs

• config: MtxDividerConfig: Configuration object for the divider component. Includes options for vertical and inset styling.

Dependencies

• Angular Material Divider Module (MatDividerModule)

Notes

• This component leverages Angular Material's styling and design principles for consistency with other Angular Material components.