EctButton

This library was generated with Angular CLI version 21.0.1.

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 import the EctButtonComponent into your component's Imports array, e.g.:
``javascript
@Component({
selector: 'my-component',
imports: [ EctButtonComponent ],
templateUrl: './my-component.component.html',
styleUrl: './my-component.css'
})
`

In your HTML template, to add a primary button with an icon and an onClick event, use this:
`html
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.
- ViewScale: Optional. Show the button at a certain % scale. This helps with accessibility.

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

EctAutoId - https://www.npmjs.com/package/ect-auto-id - A directive that makes sure that all HTML elements are unique.

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)