EctButton

This library was generated with Angular CLI version 19.0.0.

Description

This component allows for the creation of a WCAG compliant button, with additional properties making the button straightforward to set up.

Usage

After installing the NPM package, to use the component, first load the package into your modules file:

import { EctButtonModule } from 'ect-button';

Then add EctButtonModule into your imports array.

In your HTML template, to add a primary button with an icon and an onClick event, use this:

<ect-button Text="Add Event to Console" 
            Type="primary" 
            Icon="fa fa-plus" 
            (onClick)="writeToConsole()" />

Properties

• Text: Optional. Button text.
• Type: Optional. Default is primary. Can be primary, info, warning or error.
• Icon: Optional. Default is blank. Name of icon e.g. far fa-clock.
• AdditionalCssClasses: Optional. Default is blank.
• HideText: Optional. Default is false. Hide text and only show the icon?
• Disabled: Optional. Default is false. Is the button disabled?
• TextBeforeIcon: Optional. Default is false. Does the text come before the icon?
• IsSelected: Optional. Default is false. Is the button in a selected state?
• TextColour: Optional. Overriding text colour.
• BackgroundColour: Optional. Overriding background colour.
• BorderColour: Optional. Overriding border colour.
• IconColour: Optional. Overriding icon colour.
• DropDown: Optional. If set to true, button has dropdown option.
• DropDownOptions: Optional. Array of type IBtnDropdownOption showing an ectlink link, that can include dividers.

IBtnDropdownOption Properties

• Text: Mandatory. Link text.
• CssClasses: Optional. Default is blank.
• Icon: Optional. Name of icon e.g. far fa-clock.
• Action: Mandatory. Callback event.
• Target: Optional. A href target option i.e. _blank, _parent, _self or _top.
• Divider: Optional. If set to true, a divider is shown instead of the link.

Events

• onClick: Click action.

Dependencies

None

Cost

If you find some benefit from using this package, please consider the time it took to put this together, and why not buy me a coffee? Goodness only knows that most of us would not function without coffee. All donations very much welcomed: (https://www.buymeacoffee.com/exoduscloudtech)

Licence

The licence agreement for this paid component can be found here: (https://angular-grid.net/assets/licence/licence_agreement.txt)