Divider

Overview

The <custom-divider> component is a custom Angular component that provides a flexible divider to visually separate content within your application. It can be used in forms, sections, or anywhere you need dividers with varying colors and orientations.

Installation

To use the <custom-divider> component in your Angular application, you can install it via npm:

npm install illyria-ui-divider

Usage

• Import the CustomDividerModule in your application module:

import { NgModule } from '@angular/core';
import { DividerModule } from 'illyria-ui-divider';

@NgModule({
  imports: [DividerModule],
  // ...
})
export class AppModule { }

• Now, you can use the component in your templates:

<!-- Horizontal divider with default color -->
<custom-divider></custom-divider>

<!-- Horizontal divider with custom color -->
<custom-divider color="#ff0000"></custom-divider>

<!-- Vertical divider -->
<custom-divider orientation="vertical"></custom-divider>

Properties

The component supports the following properties:

Styling

The <custom-divider> component supports the following properties:

| Name | Type | Default Value | Description | |---------------|------------------------------|---------------|--------------------------------------------------------------| | color | string | #ccc | The color of the divider. Can be any valid CSS color value. | | orientation | 'horizontal' \| 'vertical' | 'horizontal' | The orientation of the divider. Use 'horizontal' for a horizontal divider and 'vertical' for a vertical divider. |

This Markdown table represents the properties of the component in a neat and organized way. The Name, Type, Default Value, and Description columns provide essential information about each property. Make sure to keep the | (pipe) characters and the alignment of columns consistent to render the table correctly when converted to HTML or other formats.

• .custom-divider: Represents the main container of the divider. You can use this class to set background colors or other styles.

• .horizontal: Applied when the orientation is set to 'horizontal'. You can use this class to adjust the height and margins of the horizontal divider.

• .vertical: Applied when the orientation is set to 'vertical'. You can use this class to adjust the width and margins of the vertical divider.

Please note that this is a sample documentation, and you might need to adjust the package name, import paths, and other details based on your actual project setup. The documentation should be placed in a Markdown file (e.g., `custom-divider.md`) within your project's documentation folder or wherever you maintain the component documentation.