src/link/link.directive.ts
A convenience directive for applying styling to a link. Get started with importing the module:
Example :import { LinkModule } from 'carbon-components-angular';
<a href="#" cdsLink>A link</a>
See the vanilla carbon docs for more detail.
Selector | [cdsLink], [ibmLink] |
Properties |
Inputs |
HostBindings |
Accessors |
disabled | |
Type : boolean
|
|
Defined in src/link/link.directive.ts:47
|
|
Set to true to disable link. |
inline | |
Type : boolean
|
|
Default value : false
|
|
Defined in src/link/link.directive.ts:39
|
|
Set to true to show links inline in a sentence or paragraph. |
attr.tabindex |
Type : any
|
Defined in src/link/link.directive.ts:33
|
Automatically set to |
class.cds--link |
Type : boolean
|
Default value : true
|
Defined in src/link/link.directive.ts:28
|
Private _disabled |
Defined in src/link/link.directive.ts:56
|
baseClass |
Default value : true
|
Decorators :
@HostBinding('class.cds--link')
|
Defined in src/link/link.directive.ts:28
|
tabindex |
Decorators :
@HostBinding('attr.tabindex')
|
Defined in src/link/link.directive.ts:33
|
Automatically set to |
disabled | ||||||
getdisabled()
|
||||||
Defined in src/link/link.directive.ts:52
|
||||||
setdisabled(disabled: boolean)
|
||||||
Defined in src/link/link.directive.ts:47
|
||||||
Set to true to disable link.
Parameters :
Returns :
void
|
import {
Directive,
HostBinding,
Input
} from "@angular/core";
/**
* A convenience directive for applying styling to a link. Get started with importing the module:
*
* ```typescript
* import { LinkModule } from 'carbon-components-angular';
* ```
*
* ```html
* <a href="#" cdsLink>A link</a>
* ```
*
* See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/link/code) for more detail.
*
* [See demo](../../?path=/story/components-link--basic)
*/
@Directive({
selector: "[cdsLink], [ibmLink]"
})
export class Link {
@HostBinding("class.cds--link") baseClass = true;
/**
* Automatically set to `-1` when link is disabled.
*/
@HostBinding("attr.tabindex") tabindex;
/**
* Set to true to show links inline in a sentence or paragraph.
*/
@Input()
@HostBinding("class.cds--link--inline") inline = false;
/**
* Set to true to disable link.
*/
@Input()
@HostBinding("attr.aria-disabled")
@HostBinding("class.cds--link--disabled")
set disabled(disabled: boolean) {
this._disabled = disabled;
this.tabindex = this.disabled ? -1 : null;
}
get disabled(): boolean {
return this._disabled;
}
private _disabled;
}