illyria-ui-divider v1.0.0
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.
10 months ago