0.1.1 • Published 6 months ago
@teenageinterface/separator v0.1.1
Separator Component
The Separator component is a versatile UI element used to create visual separation between sections or components in a layout. It supports both horizontal and vertical orientations and is fully customizable in size.
Installation
Ensure that you have installed the @teenageinterface/separator library in your Angular project. If not, you can add it using:
npm install @teenageinterface/separatorUsage
Import the SeparatorComponent into your Angular application:
import { SeparatorComponent } from '@teenageinterface/separator';
@Component({
selector: 'app-separator-example',
template: `
<tiSeparator [orientation]="'horizontal'" [size]="'50%'"></tiSeparator>
`,
})
export class SeparatorExampleComponent {}Example
<!-- Horizontal Separator -->
<tiSeparator [orientation]="'horizontal'" [size]="'80%'"></tiSeparator>
<!-- Vertical Separator -->
<tiSeparator [orientation]="'vertical'" [size]="'100px'"></tiSeparator>Properties
| Property | Type | Default | Description |
|---|---|---|---|
orientation | "vertical" \| "horizontal" | "horizontal" | Defines the orientation of the separator (vertical or horizontal). |
size | string | "100%" | Sets the length of the separator. Supports values like 50%, 100px, etc. |
Features
Orientation
- Horizontal: The separator is displayed as a thin horizontal line.
- Vertical: The separator is displayed as a thin vertical line.
Customizable Size
The size property allows you to adjust the separator's length dynamically based on your layout requirements.
Documentation
For more details, visit the official documentation.
Repository
The source code is available on GitHub.
License
This project is licensed under the MIT License.